Adding a nice looking background to a screen makes an app visually appealing. It also makes the app look more sleek and elegant. Let us see how we can leverage this technique in React Native and add an image as a background.

We’ll need to create different sizes of the background image, which we’re going to use as a container. React Native will pick up appropriate image based on the device’s dimension (check Images guide for more information).

- login-background.png (375x667) - login-background@2x.png (750x1134) - login-background@3x.png (1125x2001)

Now we’ll use these images in our code as container.

//... render () { return ( < Image source = { require ( './images/login-background.png' )} style = { styles . container } > < Text style = { styles . welcome } > Welcome to React Native ! < /Text > < Text style = { styles . instructions } > To get started , edit index . ios . js < /Text > < Text style = { styles . instructions } > Press Cmd + R to reload ,{ ' \ n' } Cmd + D or shake for dev menu < /Text > < /Image > ); } //... const styles = StyleSheet . create ({ container : { flex : 1 , width : undefined , height : undefined , backgroundColor : 'transparent' , justifyContent : 'center' , alignItems : 'center' , }, });