Install the library using npm or yarn:
npm install react-native-image-crop-picker
Link the library to your project:
react-native link react-native-image-crop-picker
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';
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>
);
};
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)