Sometimes, we want to add a full screen background image with React Native and JavaScript.

In this article, we’ll look at how to add a full screen background image with React Native and JavaScript.

How to add a full screen background image with React Native and JavaScript?

To add a full screen background image with React Native and JavaScript, we add an Image and make it full screen.

For instance, we write

<Image source={require('image!egg')} style={styles.backgroundImage} />

to add the Image into our component.

Then we define styles by writing

import React from "react-native";
const { StyleSheet } = React;

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: "cover",
  },
});

to call StyleSheet.create with an object that set the backgroundImage.resizeMode to 'cover' to make it full screen.

We apply the styles with style={styles.backgroundImage}.

Conclusion

To add a full screen background image with React Native and JavaScript, we add an Image and make it full screen.