How to Set Background Image as Full Screen in React Native App

All the small social networking chatting apps now give its users to more customized and compact view with background image customization. Now user can himself set chatting screen background image as full screen of their android and iOS applications. So in this tutorial we would going to create a simple react native app to stretch and Set Background Image as Full Screen like chatting application backgrounds. So let’s get started šŸ™‚ .

Note: The background image used in this project is created by me using Photoshop. It is a Gradient Shade Image. You can use any other image according to your requirement.

Contents in this projectĀ Set Background Image as Full Screen in React Native:

1. ImportĀ StyleSheet, View and Image component in your project.

2. Now we would create Root Parent View using Image component. Normally we create root view using View component but in this case we have to make root view using Image component. There is no need to worry the design looks same. We would also setting the image source using HTTP URL so it’ll be more easy to understand.

3. Now create custom CSS class named asĀ MainContainer . This class has all the magic because when we give the height and width as NULL then it will automatically stretch and adjust according to screen size. This will work on both Landscape and Portrait Mode.

4.Ā Complete source code forĀ App.jsĀ File :

Screenshot in android mobile app :

Screenshot in iOS mobile application :

Set Background Image

9 Comments

  1. I put an image within view or outside of it for full of width and for 20% of total height. At portrait mode that is designed mode it looks better but as orientation changes to landscape image keeping the same width as previously has. Please tell me How do i solve this issue? So in landscape mode image should full of new width.

  2. Please tell how do i put an icon over the view just like and gmail compose button or whatsapp message button.

  3. By making position: ‘absolute’ and some adjustment i able to set the icon is that good practice?

  4. I have FlatList with dynamic size(can be 1 row or 20), how to set background image only for FlatList content?

Leave a Reply

Your email address will not be published. Required fields are marked *