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 Native
• React Native Components
• React Native State
• React Native Props
• Expo CLI
• Node.js and npm (Node Package Manager)

Project Setup

Step 1: Create the project

npx create-expo-app image_crop

Step 2: Navigate to the project

cd image_crop

Step 3: Install the required packages.

npx expo install expo-file-system expo-image-picker

• expo-file-system: For saving the file.
• expo-image-picker: For picking and cropping the image.

Project Structure:

package.json for dependencies and respective versions.

{
    "name": "image_crop",
    "version": "1.0.0",
    "main": "node_modules/expo/AppEntry.js",
    "scripts": {
        "start": "expo start",
        "android": "expo start --android",
        "ios": "expo start --ios",
        "web": "expo start --web"
    },
    "dependencies": {
        "expo": "~49.0.11",
        "expo-file-system": "~15.4.4",
        "expo-image-picker": "~14.3.2",
        "expo-status-bar": "~1.6.0",
        "react": "18.2.0",
        "react-native": "0.72.4"
    },
    "devDependencies": {
        "@babel/core": "^7.20.0"
    },
    "private": true
}

Approach

• The application will have three buttons, pick image, reset image, and save image.
• On clicking the Pick Image button, Image Picker opens. We need to select an image.
• After that crop window opens where we need to crop it.
• After cropping, the image is displayed.
• If satisfied, press the save button.
• When completed, we can reset the app.

Example: This example shows the creation of the image crop tool using React-Native.

Javascript

// App.js file

import {
    Button,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
} from "react-native";
import * as ImagePicker from "expo-image-picker";
import * as FileSystem from "expo-file-system";
import { useRef, useState } from "react";
export default function App() {
    const [fileUri, setFileUri] = useState("");
    const [fileType, setFileType] = useState("");
    const [heightAspect, setHeightAspect] = useState("3");
    const [widthAspect, setWidthAspect] = useState("4");
    const handlePickFile = async () => {
        if (heightAspect == "0" || widthAspect == "0") {
            const res =
                await ImagePicker.launchImageLibraryAsync({
                    mediaTypes:
                        ImagePicker.MediaTypeOptions.Images,
                    quality: 1,
                    allowsEditing: true,
                    allowsMultipleSelection: false,
                });
            if (res.canceled) return;

            setFileUri(res.assets[0].uri);
            setFileType(res.assets[0].type);
        } else {
            const res =
                await ImagePicker.launchImageLibraryAsync({
                    mediaTypes:
                        ImagePicker.MediaTypeOptions.Images,
                    quality: 1,
                    aspect: [
                        parseInt(widthAspect),
                        parseInt(heightAspect),
                    ],
                    allowsEditing: true,
                    allowsMultipleSelection: false,
                });
            if (res.canceled) return;

            setFileUri(res.assets[0].uri);
            setFileType(res.assets[0].type);
        }
    };

    const saveFile = async (uri, mimetype) => {
        let fileName = Date.now() + ".jpg";
        const permissions =
            await
                FileSystem.StorageAccessFramework
                    .requestDirectoryPermissionsAsync();
        if (permissions.granted) {
            const base64 =
                await FileSystem.readAsStringAsync(uri, {
                    encoding:
                        FileSystem.EncodingType.Base64,
                });
            await FileSystem.StorageAccessFramework.createFileAsync(
                permissions.directoryUri,
                fileName,
                mimetype
            )
                .then(async (uri) => {
                    await FileSystem.writeAsStringAsync(
                        uri,
                        base64,
                        {
                            encoding:
                                FileSystem.EncodingType
                                    .Base64,
                        }
                    );
                })
                .catch((e) => console.log(e));
        } else {
            alert("Permission not granted");
        }
    };
    return (
        <View style={styles.container}>
            <Text style={styles.heading1}>
                Image Crop GeeksforGeeks
            </Text>
            {fileUri.length != 0 ? (
                <Image
                    source={{ uri: fileUri }}
                    style={{
                        width: 400,
                        height: 400,
                        objectFit: "contain",
                    }}
                />
            ) : (
                <View></View>
            )}
            <View
                style={{
                    flexDirection: "column",
                    alignItems: "center",
                }}>

                <Text
                    style={{ fontSize: 24, color: "red" }}>
                    Aspect ratio
                </Text>
                <Text>
                    Set values 0 for any for free aspect
                    ratio. Default is 4:3
                </Text>
                <View
                    style={{
                        display: "flex",
                        flexDirection: "row",
                        alignContent: "center",
                    }}>

                    <Text style={styles.inputLabel}>
                        Width:{" "}
                    </Text>
                    <TextInput
                        onChangeText={setWidthAspect}
                        value={widthAspect}
                        inputMode="numeric"
                        keyboardType="numeric"
                        style={styles.input}
                        maxLength={2}/>

                </View>
                <View
                    style={{
                        display: "flex",
                        flexDirection: "row",
                        alignContent: "center",
                    }}>

                    <Text style={styles.inputLabel}>
                        Height:{" "}
                    </Text>
                    <TextInput
                        onChangeText={setHeightAspect}
                        value={heightAspect}
                        inputMode="numeric"
                        keyboardType="numeric"
                        style={styles.input}
                        maxLength={2}/>
                </View>
            </View>
            <View
                style={{
                    display: "flex",
                    flexDirection: "row",
                    justifyContent: "space-evenly",
                    width: "100%",
                    padding: 10,
                }}>

                <Button
                    title="Pick Image"
                    onPress={handlePickFile}/>

                {fileUri.length != 0 ? (
                    <>
                        <Button
                            title="Save Image"
                            onPress={() =>
                                saveFile(fileUri, fileType)
                            }
                        />
                        <Button
                            title="reset"
                            onPress={() => setFileUri("")}
                        />
                    </>
                ) : (
                    <></>
                )}
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "space-evenly",
        height: "100%",
    },
    heading1: {
        fontSize: 28,
        fontWeight: "bold",
        color: "green",
        textAlign: "center",
    },
    input: {
        width: 50,
        height: 30,
        borderColor: "gray",
        borderWidth: 1,
        textAlign: "center",
        borderRadius: 5,
        padding: 5,
        margin: 5,
    },
    inputLabel: {
        fontSize: 20,
        margin: 5,
        padding: 5,
    },
});

Step 4: Run the application

npx expo start

To run on Android:

npx react-native run-android

To run on iOS:

npx react-native run-ios

Output: