Add Full Screen Background Image in React Native (Expo)

 In this post, we are going to learn about the simpler way to add a full background image to your react native application.

This code will be build using the expo app. 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.

Step 1:  Import ImageBackground Component

We need to import a few more components to add style, image, text, and view. So, also import the couple of more components:

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

Add some template code to try this out

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.nintyzeros.com/designers/subtlepatterns/patterns/Amrican-pie.png',
}}>

Using ImageBackground in React Native

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ImageBackground
        style={{flex: 1}}
        source={{
          uri:
            'https://www.nintyzeros.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://nintyzeros.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 style more adaptable add some stylesheets.

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,
  }
});

Full code :

Add the Below code in App.js and run the code in emulator or an android device.

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.ninty.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,
  }
});