How to implement image cropping in React Native

Hi Guys, In this article, we are going to learn about How to implement image cropping in React Native. In modern mobile applications, the ability to select and crop images is crucial for enhancing user engagement and personalization. React Native offers a convenient solution for integrating image selection and cropping features into your app. In this tutorial, we’ll explore how to use the react-native-image-crop-picker library to allow users to pick images from the gallery or camera, perform cropping operations, and handle necessary permissions.

Before we start, ensure that you have a basic understanding of React Native and that your development environment is set up. check this article to learn the basics of React Native setup.

1. Installing Dependencies

Install following packages

npm install react-native-image-crop-picker react-native-permissions

2. Implementing Image Selection and Cropping with Permissions

We’ll now create a component that allows users to select images from the gallery or camera, perform cropping, and handle permissions.

import React, { useState, useEffect } from 'react';
import { View, Text, Image, TouchableOpacity, StyleSheet, Platform } from 'react-native';
import { PERMISSIONS, request } from 'react-native-permissions';
import ImageCropPicker from 'react-native-image-crop-picker';

const ImagePickerScreen = () => {
  const [selectedImage, setSelectedImage] = useState(null);

  const openImagePicker = async () => {
    try {
      const cameraPermissionStatus = await request(
        Platform.select({
          ios: PERMISSIONS.IOS.CAMERA,
          android: PERMISSIONS.ANDROID.CAMERA,
        })
      );

      const photoPermissionStatus = await request(
        Platform.select({
          ios: PERMISSIONS.IOS.PHOTO_LIBRARY,
          android: PERMISSIONS.ANDROID.READ_EXTERNAL_STORAGE,
        })
      );

      if (cameraPermissionStatus === 'granted' && photoPermissionStatus === 'granted') {
        const image = await ImageCropPicker.openPicker({
          width: 300,
          height: 400,
          cropping: true,
        });
        setSelectedImage(image.path);
      }
    } catch (error) {
      console.log('+++++Image picking error:', error);
    }
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={openImagePicker} style={styles.button}>
        <Text style={styles.buttonText}>Select and Crop Image</Text>
      </TouchableOpacity>
      {selectedImage && (
        <Image source={{ uri: selectedImage }} style={styles.image} />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: 'blue',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
  },
  image: {
    marginTop: 20,
    width: 300,
    height: 400,
  },
});

export default ImagePickerScreen;

3. Using the Image Picker Component

Integrate the ImagePickerScreen component into your main application file.

import React from 'react';
import { StyleSheet, View } from 'react-native';
import ImagePickerScreen from './ImagePickerScreen';

const App = () => {
  return (
    <View style={styles.container}>
      <ImagePickerScreen />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default App;

By using react-native-image-crop-picker library along with permission handling using react-native-permissions. You’ve learned How to implement image cropping in React Native.

Thank you 🙂