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

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

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

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

To add a full screen background image with React Native, we can set the flex style to 1.

For instance, we write:

import * as React from 'react';
import { Text, View, StyleSheet, Image } from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: null,
    height: null,
  },
});

const App = () => {
  return (
    <View style={styles.container}>
      <Image source={require('./assets/snack-icon.png')} style={styles.container}></Image>
    </View>
  );
};
export default App;

to add the styles.container styles object that sets flex to 1 on the View and Image so they both stretch to fit their parent container.

We add the image with the Image component.

The source has the image path.

As a result, the image should be full screen.

Conclusion

To add a full screen background image with React Native, we can set the flex style to 1.