avani kothari
avani kothari

Reputation: 739

I have SafeAreaView at root of my app but I want a full screen backgroundColor (including the top and bottom of safeAreaView ) at few screens in app

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

Answers (1)

avani kothari
avani kothari

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

Related Questions