CODEWITHSUNDEEP
react-native
Pouya92
Pouya92

Reputation: 443

SafeArea Transparent background in react native

Im using SafeAreaView in my screen it's working, but I want to have transparent background instead of solid color, Actually I want to have my screen's background image to be shown under safeAreaView.

How can I handle that?

Upvotes: 4

Views: 6655

Answers (2)

Syed Amir Ali
Syed Amir Ali

Reputation: 1011

just remove paddingTop from your SafeAreaView styling and it will ignore backgroundColor: "#ffffff" as shown below in the code. By doing this you will achieve Safearea Transparent Background in React Native

    <SafeAreaView style={styles.flex}>
      <StatusBar
        barStyle={barStyle}
        backgroundColor={'transparent'}
        translucent={true}
        animated={true}
      />
      <View
        style={[
          theme == LIGHT_MODE ? styles.containerLight : styles.containerDark,
          style,
        ]}>
        {children}
      </View>
    </SafeAreaView>

  flex: () => ({
    flex: 1,
    backgroundColor: "#ffffff",
    paddingTop: Platform.OS == 'android' ? StatusBar.currentHeight : 30,
  }),

Upvotes: 0

displayname
displayname

Reputation: 1064

if you want to use an image background, then nested your safeAreaView inside the ImageBackground

class App extends React.Component{
 render(){
  return(
     <ImageBackground 
       source={{uri:'https://wallpapershome.com/images/pages/pic_v/3443.jpg'}} 
       style={{height:Dimensions.get('window').height, 
       width:Dimensions.get('window').width, overflow:'hidden', flex:1}}
       > 
        <SafeAreaView>
         //whatever content
        </SafeAreaView>

      </ImageBackground>
     )
   }
 }

Upvotes: 4

Related Questions