How to Add a Full Screen Background Image with React Native?

Aug 29, 2022 . Admin

This article will provide some of the most important example image background react native. I would like to show you react native image full screen on click. we will help you to give example of react native background image full screen. This tutorial will give you simple example of how to add full screen background image in react native.

In this example,We will add full screen image in background in react native.you can easy and simply add to full screen background image in react native.The complete example below shows you how to do that.

Step 1: Download Project

In the first step run the following command to create a project.

expo init ExampleApp

Step 2: App.js

In this step, You will open the App.js file and put the code.

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

export default function App() {
    return (
      <View style={styles.container}>
        <Image
        style={styles.container}
        source={require('./assets/tree.jpg')}
        />
      </View>
    );
}

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

Step 3: Run Project

In the last step run your project using the below command.