Create an Image Resize and Editor using React-Native

Image manipulation in mobile apps is an important functionality, from cropping and resizing to 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 to integrate image editing capabilities into their React-Native applications.

Preview of final output: Let us have a look at how the final application will look like.

Project Preview

Prerequisites:

• Node.js and npm installed
• Introduction to React Native
• React Native Components
• React Native State
• React Native Props
• Expo CLI

Approach to create Image Resizer and Editor:

• Utilizes React Native and Expo libraries (expo-photograph-picker and expo-photograph-manipulator) for picture operations.
• Facilitates picture selection, editing, and resizing functionalities within the app.
• Manages picture country the use of the useState hook in a functional component (App).
• Implements pickImage to enable users to pick out an photo from their tool’s gallery.
• Employs editAndResizeImage to control photograph dimensions, optimizing the selected image.
• Renders UI factors for picture choice, editing, and showing the up to date photo.
• Emphasizes thorough testing and errors coping with for smooth capability.

Steps to install & configure React Native:

Step 1: Create a react native application by using this command:

npx create-expo-app ImageModifier

Step 2: After creating your project folder, i.e. ImageModifier, use the following command to navigate to it:

cd ImageModifier

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react-native-paper": "4.9.2",
    "@expo/vector-icons": "^13.0.0",
    "expo-image-picker": "~14.3.2",
    "expo-image-manipulator": "~11.3.0"
}

Step 3: Open the App.js file, paste the provided source code, and use it as the starting point for developing your Image Editor and Image Resizer application.

Javascript

//App.js

import React, { useState } from "react";
import { View, Image, Button } from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as ImageManipulator from "expo-image-manipulator";

export default function App() {
    const [selectedImage, setSelectedImage] = useState(null);

    const pickImage = async () => {
        try {
            const result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Images,
                allowsEditing: true,
                aspect: [4, 3],
                quality: 1,
            });

            if (!result.cancelled) {
                setSelectedImage(result);
                console.log("Image picked successfully!");
            } else {
                console.log("Image selection cancelled.");
            }
        } catch (error) {
            console.log("Error picking image:", error);
        }
    };

    const editAndResizeImage = async () => {
        try {
            if (selectedImage && selectedImage.uri) {
                const resizedImage = await ImageManipulator.manipulateAsync(
                    selectedImage.uri,
                    [{ resize: { width: 200, height: 200 } }],
                    { compress: 0.8, format: ImageManipulator.SaveFormat.JPEG }
                );

                if (resizedImage && resizedImage.uri) {
                    setSelectedImage({
                        ...selectedImage,
                        uri: resizedImage.uri,
                        width: resizedImage.width,
                        height: resizedImage.height,
                    });
                    console.log("Image successfully cropped!");
                } else {
                    console.log("Error resizing image");
                }
            } else {
                console.log("No selected image to resize");
            }
        } catch (error) {
            console.log("Error during image manipulation:", error);
        }
    };

    console.log("Render method executed!");

    return (
        <View
            style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
        >
            <Button
                title="Pick an image from camera roll"
                onPress={pickImage}
            />
            <Button
                title="Edit and resize image"
                onPress={editAndResizeImage}
            />
            {selectedImage && selectedImage.uri && (
                <Image
                    source={{ uri: selectedImage.uri }}
                    style={{
                        width: selectedImage.width,
                        height: selectedImage.height,
                    }}
                />
            )}
        </View>
    );
}

Step to run the application: Go to the Terminal and type the following command to run the react native application.

npx expo start

• To run on Android:

npx react-native run-android

• To run on ios:

npx react-native run-ios

Output: