React-native: How to set image in background of Layout(View)

user_5163232 0
Viewed 17643

Right now i am setting background image with below code where creating one extra image view to set image over view and its working fine. 

<View>
<Image 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}/>
</View>

Now my question is: Is there any way to set background image directly on view like : 

<View 
  style={{
     height:67 ,
     width: width} 
  source={Images.header_bachkground}>
</View>

The above code is not working for me.

react-native reactjs background-image layout
6 Answers

This is the easiest and most preferred method!

 <ImageBackground
     source={require("../Assets/splash.png")}
      style={{width: '100%',opacity:0.95, height: '100%',justifyContent:"center",alignContent:"center",alignItems: "center"}}
    > 

                <View style={styles.InfoText}>
                <Text style={{ textAlign: "center",color:'white', letterSpacing: 1.0, 
        lineHeight: 15  }}> Hello {user.email},</Text>
    </View>
    </ImageBackground>

This must do the trick.. Dont forget to import image background from react native at the top of your app!

This is a new addition to react native!

user_98100400
Related