Reputation: 739
I am using SafeAreaView
in the root of my project App.js. But some screens need full white background from top to bottom. Since I am using SafeAreaView
in root every screen view starts after SafeAreaView
even making a view with absolute
position of the height of the SafeAreaView
doesn't work like this:
render() {
return (
<View style={styles.container}>
<View style={[styles.hideSafeAreaView, { top: 0 }]} />
{/*....*/}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: whiteTextColor,
padding: 12
},
hideSafeAreaView: {
position: "absolute",
backgroundColor: whiteTextColor,
right: 0,
left: 0,
height: 44
}
});
This is my app.js
render() {
return (
<ImageBackground style={styles.container} source={APP_BACKGROUND_IMAGE}>
<SafeAreaView style={styles.container}>
<AppNavigator />
</SafeAreaView>
</ImageBackground>
);
}
Thanks in advance.
Upvotes: 5
Views: 2004
Reputation: 739
I found a simple trick to do this. I removed SafeAreaView form root component and made a custom Header of height 44. I used this reusable Header in all files where I wanted SafeAreaView to work.
Upvotes: 1