Create an Image Resize and Editor using React-Native

//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>
	);
}