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) - email@example.com (750x1134) - firstname.lastname@example.org (1125x2001)
Now we’ll use these images in our code as container.
We’ve intentionally left height and width of the image as
This will let React Native take the size of the image from the image
This way, we can use Image component as View and add other components as a children to build UI.