How to set background image in React native? Code Example

React Native provides <ImageBackground> component which can be used to render images on the background with children components above it.

This component is similar to Image component and supports most of the props.

Code Example

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

const App = () => (
  <View style={styles.container}>
    <ImageBackground source={{uri: 'https://is2-ssl.mzstatic.com/image/thumb/H4JfhPRO782ZNd7FgxmDFQ/1200x675mf.jpg'}} resizeMode="cover" style={styles.image}>
      <Text style={styles.text}>Ironman</Text>
    </ImageBackground>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    flex: 1,
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 42,
    lineHeight: 84,
    fontWeight: "bold",
    textAlign: "center",
    backgroundColor: "#000000c0"
  }
});

export default App;

The output will look like this –

In this code we have used <ImageBackground> component and passed the image url in source prop, the same way we used to do in <Image> component.

Live Demo

Conclusion

To set a background image, you can create a custom component in React Native with absolute position. But React native also provides a component <ImageBackground> for this task.