How to set Image as Background for a Screen in React Native

The mobile app user interface should be made beautiful to attract the attention of its users. In some scenarios, setting an image as the background for a screen can make the app looks more appealing, and cool.

In this blog post, let’s check how to make an image background for a screen in react native. You can use the ImageBackground component from react native for this purpose. This component is very similar to background-image on the web.

The ImageBackground component should be made parent and you can add as many children as you want. Specifying height and width is a must while using ImageBackground. Following is the snippet to use it.

<ImageBackground
      source={{
        uri: 'https://cdn.pixabay.com/photo/2019/07/16/11/14/banff-4341560_960_720.jpg',
      }}
      style={styles.container}>
      <Text style={styles.header}>Hello World!</Text>
    </ImageBackground>

You will get the following output.

Following is the complete code of this react native example.

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

const App = () => {
  return (
    <ImageBackground
      source={{
        uri: 'https://cdn.pixabay.com/photo/2019/07/16/11/14/banff-4341560_960_720.jpg',
      }}
      style={styles.container}>
      <Text style={styles.header}>Hello World!</Text>
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  header: {
    fontSize: 48,
    color: 'white',
  },
});

export default App;

That’s how you set the image background for react native easily.

If you want to darken the background image then see this react native tutorial.