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 an image and view a preview of it. In this article, we are going to see how we can addimage upload functionality and preview it on the screen.

To begin, you will be required to configure your development setup. This entails the installation of Node.js, which serves as the runtime environment for executing JavaScript code beyond the confines of a web browser.

• Installation: In this article, we will use the Expo CLI edition, which offers a more seamless experience for executing your React Native apps. Proceed sequentially through the provided instructions to establish your React native ecosystem.
• Expo is a JavaScript and React-based platform that enables developers to create cross-platform mobile applications for iOS, Android, and the web using a unified codebase. This free and open-source framework offers a range of tools and services that streamline the mobile app development process, empowering developers to construct top-notch applications.

Prerequisites:

• Introduction to React Native
• React Native Components
• React Native State
• Expo CLI
• Node.js and npm (Node Package Manager)

Uploading images in React Native requires integrating with external APIs, while previewing them involves rendering the image using the Image component.

Steps to Create React Native Application:

Step 1: Set Up the Development Environment​. Install Expo CLI globally by running this command:

npm install -g expo-cli​

Step 2: Create React Native Application With Expo CLI

expo init image-upload

Step 3:​Navigate to the project directory by using this command:

cd image-upload 

Project Structure

👁 React-Native-Project-Structure

Step 4: Install the required dependencies by running:

npm install expo-image-picker

Approach

• We'll use React Native along with the Expo framework and Expo ImagePicker module to solve this problem.
• The state variables 'file' and 'error' are created inside the 'App' method using 'useState' to store the URI of the selected image and any error messages.
• The 'pickImage' function solicits authorization before locating the image URI. Three elements make up the UI rendering: a container, a header, and a button. The 'pickImage' function is activated by pressing the button.

Example: In this example, we will show how to upload an Image and Preview it using React Native.

• App.js

Step 5: To run React Native use the following command in the Terminal/CMD:

npx expo start

To run on Android:

npx react-native run-android

To run on ios:

npx react-native run-ios

Output: