Create an Image Resize and Editor using React-Native
Last Updated :
01 Jun, 2025
Image manipulation in mobile apps is a crucial functionality, encompassing tasks such as cropping and resizing, as well as adding filters or overlays. In this tutorial, you will learn the process of building a simple Image Resize and Editor application using React-Native. This project aims to provide a foundation for integrating image editing capabilities into React Native applications.
To give you a better idea of what we’re going to create, let’s watch a demo video.
Demo Video
Prerequisites:
Step-by-Step Implementation
Step 1: Create a React Native Project
Now, create a project with the following command.
npx create-expo-app app-name --template
Note: Replace the app-name with your app name for example : react-native-demo-app
Next, 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 that is 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-demo
cd app-name
Project Structure
Step 2: Run Application
Start the server by using the following command.
npx expo start
Then, the application will display a QR code.
- For the Android users,
- For the Android Emulator, press "a" as mentioned in the image below.
- For the 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: Update dependencies
The updated dependencies in package.json file will look like:
"dependencies": {
"react-native-paper": "^5.14.0",
"expo-image-picker": "^16.1.4",
}Now, run the below command to install the above dependencies.
Step 4: Start Coding
Approach to create Image Resizer and Editor:
- Utilizes React Native and Expo library (expo-image-picker) for image operations.
- Facilitates image selection, editing, and resizing functionalities within the app.
- Implements the pick Image to enable users to pick out a photo from their tool's gallery.
- Renders UI factors for picture choice, editing, and showing the up-to-date photo.
- Emphasizes thorough testing and errors coping with for smooth capability.
Let's dive into the code in detail.
- Import libraries:
Import required libraries at the top of the file.
JavaScript
// Import useState hook from React to manage component state
import { useState } from "react";
// Import necessary components from React Native for UI and image rendering
import { View, Image, Button } from "react-native";
// Import the ImagePicker module from Expo to pick images from the device's library
import * as ImagePicker from "expo-image-picker";
This button is used to pick an image from the gallery by calling the pickImage function.
JavaScript
{/* Button to trigger the image picker */}
<Button
title="Pick an image to Resize and Edit"
onPress={pickImage} // onPress event calls the pickImage function
/>
- pickImage function:
This function enables users to pick an image from the gallery using the expo-image-picker library and updates the selected image in the selectedImage state variable by calling the setSelectedImage function with the result as a parameter.
JavaScript
// Declare a state variable to store the selected image
const [selectedImage, setSelectedImage] = useState(null);
// Async function to launch the image picker
const pickImage = async () => {
try {
// Launch the image library for selecting an image
const result = await ImagePicker.launchImageLibraryAsync({
// Only allow images (not videos or other media types)
mediaTypes: ImagePicker.MediaTypeOptions.Images,
// Allow user to crop/edit the image before selection
allowsEditing: true,
// Set the aspect ratio for the cropping tool (4:3)
aspect: [4, 3],
// Set the quality of the selected image (1 = highest quality)
quality: 1,
});
// If the image was picked successfully (not canceled)
if (!result.canceled) {
// Save the selected image to state
setSelectedImage(result);
// Log success message
console.log("Image picked successfully!");
} else {
// Log cancellation message
console.log("Image selection cancelled.");
}
} catch (error) {
// Catch and log any errors that occur during image picking
console.log("Error picking image:", error);
}
};
- Display Image:
The code below is used to display the selected image.
JavaScript
{/* If an image has been selected and has a URI, display it */}
{selectedImage && selectedImage.uri && (
<Image
// Set the image source using the selected image URI
source={{ uri: selectedImage.uri }}
// Display the image with its original width and height
style={{
width: selectedImage.width,
height: selectedImage.height,
}}
/>
)}
Now, wrap all design code with a View component, return it from the App component, and place all methods and useStates within the App component. Ensure to export the App.
Complete Source Code
App.js:
App.js
// Import useState hook from React to manage component state
import { useState } from "react";
// Import necessary components from React Native for UI and image rendering
import { View, Image, Button } from "react-native";
// Import the ImagePicker module from Expo to pick images from the device's library
import * as ImagePicker from "expo-image-picker";
// Define the main functional component of the app
export default function App() {
// Declare a state variable to store the selected image
const [selectedImage, setSelectedImage] = useState(null);
// Async function to launch the image picker
const pickImage = async () => {
try {
// Launch the image library for selecting an image
const result = await ImagePicker.launchImageLibraryAsync({
// Only allow images (not videos or other media types)
mediaTypes: ImagePicker.MediaTypeOptions.Images,
// Allow user to crop/edit the image before selection
allowsEditing: true,
// Set the aspect ratio for the cropping tool (4:3)
aspect: [4, 3],
// Set the quality of the selected image (1 = highest quality)
quality: 1,
});
// If the image was picked successfully (not canceled)
if (!result.canceled) {
// Save the selected image to state
setSelectedImage(result);
// Log success message
console.log("Image picked successfully!");
} else {
// Log cancellation message
console.log("Image selection cancelled.");
}
} catch (error) {
// Catch and log any errors that occur during image picking
console.log("Error picking image:", error);
}
};
// Log message whenever the component renders
console.log("Render method executed!");
// Return the UI elements of the component
return (
// Container View to center content vertically and horizontally
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{/* Button to trigger the image picker */}
<Button
title="Pick an image to Resize and Edit"
onPress={pickImage} // onPress event calls the pickImage function
/>
{/* If an image has been selected and has a URI, display it */}
{selectedImage && selectedImage.uri && (
<Image
// Set the image source using the selected image URI
source={{ uri: selectedImage.uri }}
// Display the image with its original width and height
style={{
width: selectedImage.width,
height: selectedImage.height,
}}
/>
)}
</View>
);
}
Output:
Similar Reads
Create a Text Editor App using React-Native
In 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 an Image to Text App using React-Native
In this article, we are going to build a step-by-step Image to Text app using React-Native. This application will allow users to extract the text from the image using OCR (Optical Character Recognition) and later copy it to the clipboard or share it with others. This application is a perfect usage o
4 min read
Create an Image Crop Tool using React-Native
In this tutorial, we are going to build an Image crop tool using React-Native. The Image Crop tool is a very important tool for cropping the Images. It will allow the users to pick an image from storage, crop it, and later save it locally.Preview Image:Prerequisites Introduction to React NativeReact
4 min read
Create an Image Carousal using React-Native
In this article, we will build the Image Carousal using React Native language. In this interactive application, we have taken some sample GFG course images which are automatically and manually scrolled. When the user clicks on the image, the additional information about that course is shown in a mod
5 min read
Create an Image Resizer and Compressor Using React
In this tutorial, we'll create an image resizer and compressor application using React. We search for different tools and websites on the internet to resize and compress the image. But, as a web developer, we can create our image resize and compressor using React. The application allows user to uplo
6 min read
Create an Image/Video Downloader App using React-Native
There are a vast amount of videos available on the internet but we are not able to download most of them. In this article, you will be guided through the step-by-step to create an Image/Video Downloader App using React-Native. Preview of final output: Let us have a look at how the final output will
3 min read
Create a Task Manager App using React-Native
In 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
Create a Food Reciepe App using React-Native
In this React-Native article, we will be developing an interactive Food Recipe Application. In this application, the users can be able to search for any food recipe in the search box. Then, according to the search query, the results will be fetched through an API and will be displayed in the applica
5 min read
Create an Image/Video Gallery using React-Native
An Image/Video Gallery is a common feature in mobile applications. This article will guide you for creating an Image/Video Gallery using React Native.We will learn to build an Image/Video Gallery app using React-Native. In this app, we will display the images and videos in the form of a grid, and on
4 min read
Creating a Simple Image Editor using JavaScript
In this article, we will be creating a Simple Image Editor that can be used to adjust the image values like brightness, contrast, hue, saturation, grayscale, and sepia. Image editors allow one to quickly edit pictures after they have been captured for enhancing them or completely changing their look
10 min read