Create an Image Resize and Editor using React-Native
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:
- Node.js and npm installed
- Introduction to React Native
- React Native Components
- React Native State
- React Native Props
- Expo CLI
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-nameProject Structure
Step 2: Run Application
Start 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 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.
// 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";
- Button:
This button is used to pick an image from the gallery by calling the pickImage function.
{/* 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.
// 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.
{/* 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:
// 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>
);
}
