<SafeAreaView> not work (Views go above the notification tab)

Question

For some reason safeAreaView does not work in my code, Views go above the notification tab. I've tried a few things but couldn't. I tried to take the style of safeAreaView and create a view below safeAreaView that involves all the code and then in that view put that style, but it didn't work either!

import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text } from 'react-native';

export default function Menu({ navigation }){

    return <SafeAreaView style={styles.container}>
        <View style={styles.profile}>
            <Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
            <Text style={styles.name}>StackOverFlow</Text>
        </View>
    </SafeAreaView>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    profile: {
        flexDirection: 'row',
        backgroundColor: '#EEE',
    },
    imageProfile: {
        width: 34,
        marginBottom: 5,
        marginTop: 5,
        borderRadius: 44/2,
        marginLeft: 10,
        height: 34
    },
    name: {
        alignSelf: 'center',
        marginLeft: 10,
        fontSize: 16
    }
});

Answer 1

According to react-native docs:

The purpose of SafeAreaView is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices with iOS version 11 or later.

I would advise you to not just follow safeAreaView functionalities. rather its better extract the Status bar height and give a marginTop to whole container so its always below the status bar. See the code below and also the working expo snack solution:

import React from 'react';
import { SafeAreaView, StyleSheet, View, Image, Text,StatusBar } from 'react-native';

export default function Menu({ navigation }){

    return <SafeAreaView style={styles.container}>
        <View style={styles.profile}>
            <Image source={{uri: 'https://elysator.com/wp-content/uploads/blank-profile-picture-973460_1280-e1523978675847.png'}} style={styles.imageProfile} />
            <Text style={styles.name}>StackOverFlow</Text>
        </View>
    </SafeAreaView>
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginTop:StatusBar.currentHeight
    },
    profile: {
        flexDirection: 'row',
        backgroundColor: '#EEE',
    },
    imageProfile: {
        width: 34,
        marginBottom: 5,
        marginTop: 5,
        borderRadius: 44/2,
        marginLeft: 10,
        height: 34
    },
    name: {
        alignSelf: 'center',
        marginLeft: 10,
        fontSize: 16
    }
});

Expo link :expo-snack

Hope it helps. feel free for doubts

Answer 2

The SafeAreaView from 'react-native-safe-area-context' just worked for me.

Answer 3

Try "resizeMode" in imageview enum('cover', 'contain', 'stretch', 'repeat', 'center')

https://facebook.github.io/react-native/docs/image#resizemode

Answer 4

The react-native version doesn't work on Android or early iOS versions.

Specifically you want to use:

import { SafeAreaView } from 'react-native-safe-area-context'

and not

import { SafeAreaView } from 'react-native'

If you're not already using react-native-safe-area-context then you might want to read the documentation as it also requires that you use the SafeAreaProvider component at a higher level in your app.