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

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

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.

Answer 4

Try "resizeMode" in imageview
enum('cover', 'contain', 'stretch', 'repeat', 'center')
https://facebook.github.io/react-native/docs/image#resizemode

Answer 5

None of these work for me ,
so i try this and it solve the problem.
First: Import SafeAreaProvider from react-native-safe-area-context as shown below.
import { SafeAreaProvider} from 'react-native-safe-area-context';
Second : give marginTop to it, in my case is was 13%, adjust according to your needs, as shown below .
<SafeAreaProvider style={{marginTop:"13%"}} >
<Home/>
...
<SafeAreaProvider/>
Let me know if this was helpful.