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.

<br />
import { StyleSheet, View, Image } from ‘react-native’;

1	import { StyleSheet, View, Image } from ‘react-native’;

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.

<br />
render() {</p>
<p>   return (</p>
<p>     <Image source={ {uri: ‘/wp-content/uploads/2017/10/sample_full_image.jpg’} } style={styles.MainContainer} ></p>
<p>     {/* Put All Your Component Here Inside Root Image Component. */}</p>
<p>     </Image><br />
  );<br />
 }

render() {

return (

{/* Put All Your Component Here Inside Root Image Component. */}

</Image>

);

}

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.

<br />
const styles = StyleSheet.create({</p>
<p> MainContainer: {<br />
   flex: 1,<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   width: null,<br />
   height: null,<br />
 }</p>
<p>});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: ‘center’,

alignItems: ‘center’,

width: null,

height: null,

}

});

4. Complete source code for App.js File :

<br />
import React, { Component } from ‘react’;</p>
<p>import { StyleSheet, View, Image } from ‘react-native’;</p>
<p>export default class App extends Component<{}> {</p>
<p> render() {</p>
<p>   return (</p>
<p>     <Image source={ {uri: ‘/wp-content/uploads/2017/10/sample_full_image.jpg’} } style={styles.MainContainer} ></p>
<p>     {/* Put All Your Component Here Inside Root Image Component. */}</p>
<p>     </Image><br />
  );<br />
 }<br />
}</p>
<p>const styles = StyleSheet.create({</p>
<p> MainContainer: {<br />
   flex: 1,<br />
   justifyContent: ‘center’,<br />
   alignItems: ‘center’,<br />
   width: null,<br />
   height: null,<br />
 }</p>
<p>});