DEV Community

shyam manek
shyam manek

Posted on

Example of how you can use React Native Image Crop Picker in your React Native project

Install the library using npm or yarn:

npm install react-native-image-crop-picker

Enter fullscreen mode Exit fullscreen mode

Link the library to your project:

react-native link react-native-image-crop-picker

Enter fullscreen mode Exit fullscreen mode

Import the necessary modules in your component file:

import React, { useState } from 'react';
import { View, Image, Button } from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';
Enter fullscreen mode Exit fullscreen mode

Create a component that allows the user to select and crop an image:

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

  const openImagePicker = () => {
    ImagePicker.openPicker({
      width: 300,
      height: 400,
      cropping: true,
    }).then(image => {
      setSelectedImage(image.path);
    }).catch(error => {
      console.log('Error:', error);
    });
  };

  return (
    <View>
      <Button title="Select Image" onPress={openImagePicker} />

      {selectedImage && (
        <View>
          <Image source={{ uri: selectedImage }} style={{ width: 200, height: 200 }} />
        </View>
      )}
    </View>
  );
};

Enter fullscreen mode Exit fullscreen mode

In this example, we have a component called ImageCropPickerExample that renders a button to open the image picker. When the user selects an image and crops it, the selected image's path is stored in the component's state (selectedImage). The cropped image is then displayed using the Image component.

Please note that this is a basic example, and you can customize the options passed to ImagePicker.openPicker() based on your specific requirements. You can refer to the library's documentation for additional options and functionalities.

Top comments (0)