How to Add Full Screen Background Image in React Native

This tutorial offers an exorbitantly easy method to add a full background image to React Native application using the ImageBackground component.

For React Native full background image example, we are using the profoundly popular expo.io ecosystem; it is a free open source toolchain to develop React Native programs for iOS, Android, and Web.

Sometimes we need to display a fullscreen background image in React native app; it is usually required for developing splash screens.

Import ImageBackground Component

import { ImageBackground } from 'react-native'

We need to import a few more components to add style, image, text, and view.

So, also import the couple of more components:

In another step, make the react-native template ready and pour some text within.

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
        </View>
    </SafeAreaView>
  );
};
export default App;

Next up propel the ImageBackground component within the defined above code, it implied the static image resource has been evoked.

<ImageBackground 
    source={require('image-url-goes-here')}
    style={{width: 200, height: 200}} 
/>

But for the example, we are using the third-party url and observing how to pass the network requests for images within the ImageBackground component.

<ImageBackground
style={{flex: 1}}
source={{
    uri:
    'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
}}>

We can also pass the URI Data images within the ImageBackground component, and it will look something like this:

<ImageBackground 
    style={{width: 100, height: 100}} 
    source={{
        uri:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
    }}
/>

Using ImageBackground in React Native

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        style={{flex: 1}}
        source={{
          uri:
            'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
        }}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
          <View style={styles.contentCenter}>
            <Image
              source={{
                uri:
                  'https://media4.giphy.com/media/9oHZQ2gEez8ti/giphy.gif',
              }}
              style={{
                width: 60,
                height: 60,
                marginTop: 100
              }}
            />
            <Text style={styles.textStyle}>
              The Big Bang Theory
            </Text>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
};
export default App;

To make the UI exorbitantly engaging, define some style.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 25,
    padding: 15,
    color: 'white',
    fontWeight: 'bold',    
    textAlign: 'center',    
  },
  contentCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    color: 'white',
    padding: 10,
  }
});

Final Code for React Native Background Image Example:

This code directly goes into the App.js file:

import {
  View,
  Text,
  Image,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
} from 'react-native';

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
} from 'react-native';
const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        style={{flex: 1}}
        source={{
          uri:
            'https://www.toptal.com/designers/subtlepatterns/patterns/moroccan-flower-dark.png',
        }}>
        <View style={styles.container}>
          <Text style={styles.title}>
             React Native Background Image Example
          </Text>
          <View style={styles.contentCenter}>
            <Image
              source={{
                uri:
                  'https://media4.giphy.com/media/9oHZQ2gEez8ti/giphy.gif',
              }}
              style={{
                width: 60,
                height: 60,
                marginTop: 100
              }}
            />
            <Text style={styles.textStyle}>
              The Big Bang Theory
            </Text>
          </View>
        </View>
      </ImageBackground>
    </SafeAreaView>
  );
};
export default App;
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  title: {
    fontSize: 25,
    padding: 15,
    color: 'white',
    fontWeight: 'bold',    
    textAlign: 'center',    
  },
  contentCenter: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  textStyle: {
    color: 'white',
    padding: 10,
  }
});



The final output will look like this:

This was it; you can easily add a background image to React Native by following this method, and it can save a lot of your precious time.