How to set Image as Screen Background in React Native

Last Updated on December 11, 2020.

If you want to set an image as the background of your screen or whole view then you can use ImageBackground component from React Native. Wrap all of your content inside ImageBackground component and you are ready to go.

Use ImageBackground as given below:

import React from 'react';
import {ImageBackground, Text} from 'react-native';

const App = () => {
  return (
    <ImageBackground
      source={{
        uri:
          'https://cdn.pixabay.com/photo/2015/06/08/14/47/columns-801715_960_720.jpg',
      }}
      style={{width: '100%', height: '100%'}}>
      <Text>Full Screen Background</Text>
    </ImageBackground>
  );
};

export default App;

Following is the output of the react native image background example.