How to set Background Image in react-native ? Last Updated : 24 May, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we will see 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. Let's watch a demo video of what we are going to develop.Demo VideoStep-by-Step ImplementationStep 1: Create a React Native ProjectNow, create a project with the following command.npx create-expo-app app-name --templateNote: Replace the app-name with your app name for example : react-native-demo-appNext, you might be asked to choose a template. Select one based on your preference as shown in the image below. I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript. It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below. Now go into your project folder, i.e., react-native-democd app-nameProject Structure: Step 2: Run ApplicationStart the server by using the following command.npx expo startThen, the application will display a QR code.For the Android users,For the Android Emulator, press "a" as mentioned in the image below.For Physical Device, Download the "Expo Go" app from the Play Store. Open the app, and you will see a button labeled "Scan QR Code." Click that button and scan the QR code; it will automatically build the Android app on your device.For iOS users, simply scan the QR code using the Camera app.If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below. Step 3: Start Coding- Import libraries: Import required libraries at the top of the file. JavaScript import React from 'react'; // Import React library import { View, // Import View component for layout TextInput, // Import TextInput component for user input ImageBackground, // Import ImageBackground component for background images StyleSheet, // Import StyleSheet for styling Dimensions // Import Dimensions to get screen dimensions } from 'react-native'; // Import necessary components from react-native - StyleSheet: Create a StyleSheet to style components like img and input. JavaScript // Get the height of the device screen const screenHeight = Dimensions.get('window').height; // Get the width of the device screen const screenWidth = Dimensions.get('window').width; // Define styles for the components const styles = StyleSheet.create({ img: { // Set the height to the screen height height: screenHeight, // Set the width to the screen width width: screenWidth, // Center content vertically justifyContent: 'center', // Center content horizontally alignItems: 'center', }, input: { // Set the height of the input field height: 40, // Add margin around the input field margin: 12, // Set the border width borderWidth: 2, // Add padding inside the input field padding: 10, }, }); - ImageBackground: This component is used to set a background image. JavaScript <ImageBackground source={{ // URL of the background image uri:'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', }} // Stretch the image to fit the container resizeMode="stretch" // Apply styles to the ImageBackground style={styles.img} > Props in ImageBackground:source: Source of Image to display. It can be from local storage or url.resizeMode: Resizing of the image based on different mobile configurations.It can be one of the following:resizeMode: "center" | "contain" | "cover" | "repeat" | "stretch"- TextInput: This component is used to take input from the user. JavaScript <TextInput placeholder="Geeks for Geeks " // Placeholder text for the input field style={styles.input} // Apply styles to the TextInput /> - BackgroundImg: This is a wrapper of ImageBackground and TextInput components with the View component. JavaScript // Define a functional component for displaying // a background image with a text input const BackgroundImg = () => { return ( <View> {/* Wrapper View component */} {/* ImageBackground component to set a background image */} <ImageBackground source={{ // URL of the background image uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', }} // Stretch the image to fit the container resizeMode="stretch" // Apply styles to the ImageBackground style={styles.img} > <TextInput // Placeholder text for the input field placeholder="Geeks for Geeks " // Apply styles to the TextInput style={styles.input} /> </ImageBackground> </View> ); }; - App Component: Call the above Component in the App component, and also make sure to export the App. JavaScript // Define the main App component export const App = () => { return ( <View> <BackgroundImg /> </View> ); }; Complete Source CodeApp.js: App.js // Import React library import React from 'react'; import { View, // Import View component for layout TextInput, // Import TextInput component for user input ImageBackground, // Import ImageBackground component for background images StyleSheet, // Import StyleSheet for styling Dimensions // Import Dimensions to get screen dimensions } from 'react-native'; // Import necessary components from react-native // Get the height of the device screen const screenHeight = Dimensions.get('window').height; // Get the width of the device screen const screenWidth = Dimensions.get('window').width; // Define a functional component for displaying // a background image with a text input const BackgroundImg = () => { return ( <View> {/* Wrapper View component */} {/* ImageBackground component to set a background image */} <ImageBackground source={{ // URL of the background image uri: 'https://media.geeksforgeeks.org/wp-content/uploads/20220217151648/download3.png', }} // Stretch the image to fit the container resizeMode="stretch" // Apply styles to the ImageBackground style={styles.img} > <TextInput // Placeholder text for the input field placeholder="Geeks for Geeks " // Apply styles to the TextInput style={styles.input} /> </ImageBackground> </View> ); }; // Define the main App component export const App = () => { return ( <View> <BackgroundImg /> </View> ); }; // Define styles for the components const styles = StyleSheet.create({ img: { // Set the height to the screen height height: screenHeight, // Set the width to the screen width width: screenWidth, // Center content vertically justifyContent: 'center', // Center content horizontally alignItems: 'center', }, input: { // Set the height of the input field height: 40, // Add margin around the input field margin: 12, // Set the border width borderWidth: 2, // Add padding inside the input field padding: 10, }, }); Output: Comment More infoAdvertise with us Next Article How to create custom FAB(Floating Action Button) in React Native? samiksharanjan Follow Improve Article Tags : Android Geeks Premier League React Native Geeks-Premier-League-2022 React-Native Similar Reads React Native Tutorial React Native is a framework developed by Facebook for creating native-style applications for Android & iOS under one common language, i.e. JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can 5 min read React Native BasicsIntroduction to React NativeIf you want to build mobile apps for both Android and iOS. What should you learn? The individual native languages for each app i.e, Java for Android and Swift/Objective-C for iOS?, Actually NO. Native Android and iOS development are quite different and can be expensive – first, the language itself i 3 min read What are the steps to create first React Native App ?React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, etc. We’re always looking for shorter development cycles, quicker time to deployment, and better app performance. And there are so many hybrid mobile 4 min read How React Native worksReact Native is a popular framework for building mobile applications using JavaScript and React. It allows developers to write code once in JavaScript and run it on both Android and iOS devices, bridging the gap between web and native mobile development. In this article, we’ll explore the main compo 5 min read What is a bridge in React Native ?A React Native app comprises two sides as given below.The JavaScript SideThe Native SideThe Native Side should be Java or Kotlin for Android and Swift or Objective-C for iOS.The huge reason for the popularity of React Native is that a bridge can be created between the JavaScript code and Native lang 7 min read How React Native is different from ReactJS ?In this article, we will learn about how React Native is different from ReactJS. Both are popular JavaScript libraries. ReactJS is primarily used for building user interfaces on the web, while React Native extends its capabilities to mobile app development.React JSIt is a JavaScript library that sup 4 min read React Native DebuggingDebugging is very important for building applications and removing errors. A good knowledge of debugging techniques allows for the faster and efficient development of software.Here we are going to discuss a few debugging techniques in React Native. We will be using expo-cli to develop, run, and debu 4 min read React Native ComponentsHow to import components in React Native ?React Native is a framework developed by Facebook for creating native-style applications for Android & iOS under one common language, i.e. JavaScript. Initially, Facebook only developed React Native to support iOS. However, with its recent support of the Android operating system, the library can 5 min read React Native ListView ComponentThe ListView Component is an inbuilt React Native view component that displays a list of items in a vertically scrollable list. It requires a ListView.DataSource API to populate a simple array of data blobs and instantiate the ListView component with a data source and a renderRow callback.The major 4 min read React Native ScrollView ComponentThe ScrollView Component is an inbuilt react-native component that serves as a generic scrollable container, with the ability to scroll child components and views inside it. It provides the scroll functionality in both directions- vertical and horizontal (Default: vertical). It is essential to provi 8 min read React Native Tab Navigation ComponentIn this article, we are going to see how to implement Tab Navigation in react-native. For this, we are going to use createBottomTabNavigator component. It is basically used for navigation from one page to another. These days mobile apps are made up of a single screen, so create various navigation co 3 min read React Native Drawer Navigation ComponentIn this article, we’re going to explore how to implement Drawer Navigation in a React Native application. We'll be using the createDrawerNavigator component, which serves as a convenient UI panel for displaying your navigation menu. By default, this panel is hidden, but it gracefully slides into vie 3 min read React Native ActivityIndicator ComponentIn this article, we’re going to explore how to create an ActivityIndicator in React Native. If you’ve ever wanted to show a loading spinner while your app is processing something, the ActivityIndicator component is just what you need. It’s designed to display a circular loading indicator that lets y 2 min read Dumb Components in React NativeIn this article, we are going to learn about Dumb components in React Native. The dumb component is one of the categories of React Components, so before diving into the dumb component details. Let's know a little bit about components. A Component is one of the core building blocks of React. The comp 5 min read What is the TouchableHighlight in react native ?TouchableHighlight is a component that is used to provide a wrapper to Views to make them respond correctly to touch-based input. On press down the TouchableHighlight component has its opacity decreased which allows the underlying View or other component's style to get highlighted.This component mus 4 min read React Native FlatList ComponentFlatList is a React Native component that is a scrolling list that shows changing information while keeping the same look. It's great for long lists where the number of items can change. Instead of loading all items simultaneously, this component only shows what you can see on the screen. This makes 4 min read React Native AsyncStorage ComponentHere is a guide on how to use AsyncStorage in React Native. We will use the AsyncStorage component. AsyncStorage is an unencrypted, asynchronous, persistent key-value storage system that is accessible globally throughout the app.SyntaxAsyncStorage.method();Methods in AsyncStorageMethodDescriptionget 5 min read React Native Button ComponentThe following approach covers how to use the Button in react-native. For this, we are going to use the Button component. It is basically a clickable component that is used to perform some action when clicked by the user. Let's watch a demo video of what we are going to develop.Demo Video:Syntax<B 6 min read React Native UI ElementsHow to style React Native Application ?In this article, we'll learn how to style React Native applications. There are two major ways to style your React Native Application.Table of ContentStyle PropsUsing StyleSheetStyle Props ExampleUsing StyleSheet ExampleStyle PropsTo style an element with the style props, the value must be a JavaScri 5 min read How to create a basic button in React Native ?In this article, we will learn how to create a basic button in React Native. To build a React Native app, we will use the Expo CLI, which provides a smoother experience for running your applications.ExpoIt is a framework and a platform for universal React applications. It is a set of tools and servi 5 min read How to Implement Radio Button In React Native ?In this article, we will learn to implement a Radio Button in React Native. A radio button signifies a graphical user interface element enabling individuals to make an exclusive seÂlection among multiple alternativeÂs. React Native is a popular platform for creating native mobile apps for iOS and A 10 min read How to create a table 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 m 2 min read How to add SearchBar in React Native ?In this article, we'll add search functionality in React-Native. This can be regarded as a continuation of the React native flatlist component. In the article above, we created a flatlist using the Flatlist component. Let's make it searchable using the SearchBar component. To add a SearchBar to your 13 min read React Native Animated Fade In Fade Out EffectIn this article, we will dwell on the implementation of fadeÂ-in and fade-out effects in ReÂact Native using the Animated moduleÂ.The fadeÂ-in and fade-out effect, a timeÂless animation technique utilizeÂd to seamlessly transition an eleÂment from invisibility to visibility and vice versa, holds a s 8 min read How to set Background Image in react-native ?In this article, we will see 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 s 5 min read How to create custom FAB(Floating Action Button) in React Native?React Native doesn't come with any FAB component built in. A floating action button (FAB) is used whenever you want to display a button on top of everything. If you have used ScrollView and the user can scroll up and down, this FAB button will always stay at the same position and doesn't move with t 7 min read How to add a Progress Bar in react-native using react-native-paper library ?In this article, we’re going to create a progress bar using material design. We’ll be using the react-native-paper library to display this progress bar. The progress bar will act as a status indicator, showing how much progress has been made. In our project, we will place the progress bar at the top 10 min read How to create Avatar in react-native ?In this article, we will create 3 different kinds of Avatars using the react-native-paper library. An avatar is used for representation purposes in the form of icons, images, or text. In our project, we will create all these Avatars using material design. To give you a better idea of what we’re goin 6 min read React Native APIReact Native Switch APIIn this article, we will explore how to use the Switch component in React Native. The Switch component is a controlled component, meaning it requires a callback function to update the props based on the user's actions. Let's watch a demo video of what we are going to develop.Demo VideoSyntax<Swit 6 min read React Native Alert APIIn this article, we will explore how to create an alert in React Native using the React Native Alert API. This API enables the display of a small pop-up window that prompts the user for a choice.The Alert API utilizes the alert method to present the alert dialog box. This dialog box can include thre 6 min read React Native QuestionsFind what caused Possible unhandled promise rejection in React Native ?In this article, we will check out the `Possible Unhandled Promise Rejection` error in react native.Step-by-Step ImplementationStep 1: Create a React Native ProjectNow, create a project with the following command.npx create-expo-app app-name --templateNote: Replace the app-name with your app name fo 5 min read Axios in React NativeAxios is a widely used HTTP client for making REST API calls. You can use this in React Native to get data from any REST API.Axios in React NativeAxios is a library that helps you send HTTP requests in React Native apps. It allows mobile devices to communicate with a server, enabling them to send an 8 min read How to fetch data from a local JSON file in React Native ?Fetching JSON (JavaScript Object Notation) data in React Native from Local (E.g. IOS/Android storage) is different from fetching JSON data from a server (using Fetch or Axios). It requires Storage permission for APP and a Library to provide Native filesystem access.Implementation: Now let’s start wi 3 min read How to center a View component on screen ?The View Component is the basic building block for creating the user interface. It can map directly to the native view of different platforms, like UIView, <div>, android.view, etc. The View component can consist of nested View components as well as other native components (children).Approach: 3 min read How to Add Icons at the Bottom of Tab Navigation in React Native ?Adding Icons at the Bottom of Tab Navigation in React Native is a fairly easy task. In this article, we will implement a basic application to learn to use icons in our tab navigation. For this, we first need to set up the application and install some packages.Implementation: Now let’s start with the 3 min read How to pass value between Screens in React Native ?With React Navigation, we can also pass values or parameters between screens in React Native. We will create a simple stack navigator with 2 screens and pass values from one screen to another. Let’s watch a short video to see what we are going to create.Demo VideoStep-by-Step ImplementationStep 1: C 6 min read How to make a Post request from frontend in react-native ?The POST method is used to send data to the server to create a new resource or modify an existing resource on the server. We cannot make a POST request by using a web browser, as web browsers only directly support GET requests.But what if we want to develop an application where we need to add some d 9 min read How to add GIFs in react-native ?React-native is a cross-platform mobile application development tool. It is one of the frameworks built on top of Javascript. Now let's come to the point. We usually use .jpeg or .png images because we are more friendly to them. But what if you want to add GIF support to your react native project. T 2 min read How to Implement Form Validation in React Native ?React Native is a JavaScript framework for cross-platform mobile app development. Expo CLI simplifies React Native development with a streamlined process and helpful tools. In this article, we'll see how to implement form validation in react native. Form validation ensures the validity of user input 3 min read How many threads run in a React Native app ?If you want to be a react native developer and have mastered creating basic android and ios apps, then one of the most important things is to learn the execution process of threads. If you understand how a react native app executes and how many threads it uses that will help you build more efficient 3 min read How to add Table in React Native ?React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities. In this article, we will 2 min read How to add a Menu in react-native using Material Design ?In this article, we will see how to create a menu in react-native. To make a menu, we will use the material design library, i.e., react-native-paper. The menu contains a list of options that appear temporarily. In our project, we will create a button, and the menu will appear on the click of that bu 9 min read What are props in React Native ?Props are used to provide properties to the components using which they can be modified and customized. These properties are passed to the components when the component is created. Props are used in both user-defined and default components to extend their functionality. These props are immutable and 5 min read How to check the version of React native ?React Native is a mobile app framework to build natively-rendered apps based on JavaScript. To know the version of React Native (RN), we can use some simple ways. In this article, we will see four easy ways to find the react native version: Using TerminalUsing npxUsing package.jsonUsing the info opt 2 min read How to perform logging in React Native ?In this article, we will learn about logging in React Native.LoggingIt is a quick and easy way to debug your application in development phase. It helps to get an insight into the functioning of the application. To perform logging, we can simply use the console.log() statements to log the required in 4 min read How to Upload and Preview an Image in React Native ?Image uploading and previewing are widespread in mobile apps. With the Expo ImagePicker package, React Native makes this work easier. Uploading and previewing photographs is a common feature in Android and iOS applications, especially in the user profile section. This feature allows users to submit 4 min read How to Add Phone Number Input in React Native ?React Native is a JavaScript framework for cross-platform mobile app development. In this article, we'll see how to add a phone number input field in a React Native app using Expo CLI.​Adding a phone number input field in React Native is helpful for collecting user phone numbers during registration 3 min read How to Get Window Width and Height In React Native ?In this article, we'll explore two different approaches to obtaining the screen width and height in a React Native application. ScreeÂn dimensions, including width and height, play a vital role in deÂsigning user interfaces that adapt seÂamlessly to different deÂvices and orientations. By understand 5 min read How to check Platform and Device Details in React Native ?React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows, and UWP by enabling developers to use the React framework along with native platform capabilities.In this article, we will 3 min read Top React Native Apps to Build in 2025Top React Native Apps to Build in 2025 is a popular framework for building high-performance mobile apps using JavaScript and React. It allows developers to create apps for both iOS and Android with a single codebase, saving time and resources. React Native, developed by Facebook. Initially, for iOS, 9 min read How to Create ToDo App using React Native ?In this article, we'll see how to create a To-Do app using React Native. An ideal illustration of a basic application that can be developed with React Native is a To-Do app. This app enables users to generate, modify, and remove tasks, assisting them in maintaining organization and concentration. To 11 min read React Native ProjectsHow to Generate Random Numbers in React Native ?Generating random numbers is a fundamental aspect of React Native development. It enables various functionalities like generating game elements, creating unique identifiers, and implementing randomized UI components. In this article, we are going to see how we can generate a random number by using R 7 min read Build a Calculator using React NativeBuilding a simple calculator app in React Native is an exciting project. You'll create an interface with buttons for numbers (0-9) and operations (+, -, ×, ÷), along with a display area for showing input and results. Using React Native, you'll write functions that handle button presses and perform c 10 min read Create a Task Manager App using React-NativeIn this article, we'll walk you through the process of building a basic Task Manager app using React Native. The application enables users to effortlessly create, edit, complete/incomplete, and delete tasks, providing an uncomplicated yet impactful introduction to ReÂact Native's mobile app develop 12 min read How to Create Emoji Picker in React Native ?React Native is a popular cross-platform framework for mobile app development. Emojis have become common in modern applications, providing personalization and enhancing user engagement. In this article, we'll see how we can add an emoji picker to a React Native application.React Native doesn't have 3 min read Create a Stop Watch using React NativeStopwatches serve as vital tools for accurately measuring time intervals. By the capabilities of React Native, we can effortleÂssly develop a versatile stopwatch application compatible with both iOS and Android devices. In this article, we will guide you through the step-by-step process of creati 10 min read Create an OTP Generator and Validator App using React-NativeOne-time passwords (OTPs) have become a popular choice for enhancing the security of various online services and applications. In this article, we'll explore how to create an OTP Generator and Validator App using React Native, a popular framework for building cross-platform mobile applications.To gi 11 min read Create a Rock Paper Scissors Game using React-NativeRock, Paper, Scissors is a timeless game that has entertained people of all ages for generations. In this article, we will walk you through the process of creating a Rock Paper Scissors mobile game using React Native. You'll learn how to build a simple yet engaging game that can be played on both An 10 min read Create a Number Guessing App using React-NativeThe Number Guessing App is a simple mobile game where the user tries to guess a random number generated by the app. The app provides feedback to the user, indicating whether their guess is too high or too low, and keeps track of the number of attempts it takes to guess the correct number. In this ar 10 min read Create a BMI Calculator App using React-NativeIn this article, we will create a BMI (Body Mass Index) calculator using React Native. A BMI calculator serves as a valuable and straightforward tool for estimating body fat by considering height and weight measurements.A BMI Calculator App built with React Native allows users to input their age, he 4 min read Create a GPA Calculator using React NativeA GPA calculator proves to be a useful tool for students who want to monitor their academic progress. In this article, we will build a GPA calculator using React Native, a popular framework for building mobile applications. To give you a better idea of what we’re going to create, let’s watch a demo 15+ min read Create a Password Manager using React-NativeThis article will demonstrate how to create a Password Manager Application using React-Native. To assist users in securely storing and managing their passwords, we will develop a Password Manager mobile application using React Native for this project. The application will provide functionalities su 15+ min read Create Jokes Generator App using React-NativeIn this article, we are going to build a joke generator app using react native. React Native enables you to master the designing an elegant and dynamic useÂr interface while eÂffortlessly retrieving jokeÂs from external APIs. To give you a better idea of what we’re going to create, let’s watch a de 8 min read Build a Dictionary App Using React NativeIn this article, we will implement a Dictionary app using React Native. The app allows users to effortlessly search for word meanings, access definitions, listen to pronunciations, and examine example sentences. To give you a better idea of what we’re going to create, let’s watch a demo video.Demo V 15+ min read Create a Blog App using React-NativeThis article will help you make a simple blog app using React Native. The app lets users add, edit, and delete blog posts, making it easy to manage content. You will learn how to use different React Native features to create a user-friendly design that checks if the input is correct, making sure all 15+ min read Create a Text Editor App using React-NativeIn this article, we are going to implement a text editor app using React Native. It will contain multiple text formatting functionalities like bold, italic, underline, etc. We will implement Editor with a library called "react-native-pell-rich-editor."Preview of final output: Let us have a look at h 3 min read Create a Password Validator using React-NativeIn this article we are going to implement a Password Validator using React Native. The Password validation app in React Native is a simple application that is used to check the strength of a password. Passwords protect your personal and sensitive data, such as financial information, medical records, 11 min read Create a Currency Converter using React-NativeIn this article, we will build a currency converter using react native. This app serves as a valuable tool for travelers, business professionals, and anyone who frequently deals with international currencies. It enables users to effortleÂssly convert one currency to another. To give you a better ide 14 min read Like