How to set Background Image in react-native ?

React Native is a framework developed by Facebook for creating native-style apps for iOS & Android under one common language, JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can now render mobile UIs for both platforms.

Prerequisites:

• Basic knowledge of ReactJs.
• HTML, CSS, and javascript with ES6 syntax.
• NodeJs should be installed in your system (install).
• Jdk and android studio for testing your app on the emulator (install).

Approach: In this article, we will see that how to set background Image in react-native. In our project, we will simply set a background image and show a text input on top of it.

Setting background images requires using the ImageBackground component in React Native. You can style it further to adapt to different screen sizes and resolutions.

Learn to create stunning interfaces by mastering background images and layout techniques in the React Native Course.

Below is the step-by-step implementation:

Step 1: Create a project in react-native using the following command:

npx react-native init DemoProject

Step 2: Create a components folder inside your project. Inside the components, folder create a file BackgroundImage.js.

Project Structure: It will look like the following.

In BackgroundImage.js, we will import ImageBackground component from react-native. It takes following props:

• source: Source of Image to display. It can be from local storage or url.
• resizeMode: Resizing of image based on different mobile configurations.

It can be one of the following:

resizeMode: "center" | "contain" | "cover" | "repeat" | "stretch"

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

const screenHeight = Dimensions.get('window').height;
const screenWidth = Dimensions.get('window').width;

const BackgroundImg = () => {
  return (
    <View>
      <ImageBackground
        source={{
          uri: 
'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png',
        }}
        resizeMode="stretch"
        style={styles.img}>
        <TextInput placeholder="Geeks for Geeks" style={styles.input} />
      </ImageBackground>
    </View>
  );
};

export default BackgroundImg;

const styles = StyleSheet.create({
  img: {
    height: screenHeight,
    width: screenWidth,
    justifyContent: 'center',
    alignItems: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 2,
    padding: 10,
  },
});

import React from 'react';
import type { Node } from 'react';
import { View } from 'react-native';
import BackgroundImg from './components/BackgroundImage';

const App: () => Node = () => {
  return (
    <View>
      <BackgroundImg />
    </View>
  );
};

export default App;

Step to run the application: Run the application using the following command:

npx react-native run-android

Output:

samiksharanjan

Follow

Improve

Article Tags :

• Geeks Premier League
• Web Technologies
• Geeks-Premier-League-2022
• React-Native