import { StyleSheet, Platform, StatusBar } from "react-native";
export default StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === "android" ? StatusBar.currentHeight : 0
}
});import SafeAreaView from 'react-native-safe-area-view';
<SafeAreaView forceInset={{ top: 'always' }}>
<View>
<Text>Yeah, I'm safe too!</Text>
</View>
</SafeAreaView>//if it won't wrok when exporting from 'react-native'
npm install react-native-safe-area-context
import { SafeAreaView } from 'react-native-safe-area-context '; import React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
const App = () => {
return (
<SafeAreaView style={styles.container}>
<Text style={styles.text}>Page content</Text>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
text: {
fontSize: 25,
fontWeight: '500',
}
});
export default App;