How to crop image in image picker before upload image

Question

I am new in react native. I want to crop image before upload image. I am following this tutorial https://reactnativecode.com/upload-image-to-server-using-php-mysql/#comment-5335. Now I have problem to crop image before upload. How can I implement crop function into coding? Can anyone help me? Thank you very much.

Answer 1

You can try using https://github.com/ivpusic/react-native-image-crop-picker which can crop the selected image in both IOS and Android. Basic example for this is

selectPhoto() {
    if (this.state.selectedOption === 'camera') {
        ImagePicker.openCamera({
            cropping: true,
            width: 500,
            height: 500,
            cropperCircleOverlay: true,
            compressImageMaxWidth: 640,
            compressImageMaxHeight: 480,
            freeStyleCropEnabled: true,
            includeBase64: true
        }).then(image => {
            this.setState({imageModalVisible: false})
            this.storeUploadedData(item, image);
        })
            .catch(e => {
                console.log(e), this.setState({imageModalVisible: false})
            });

        console.log('camera')
    } else {
        ImagePicker.openPicker({
            cropping: true,
            width: 300,
            height: 400,
            cropperCircleOverlay: true,
            freeStyleCropEnabled: true,
            avoidEmptySpaceAroundImage: true,
            includeBase64: true
        }).then(image => {
            this.setState({imageModalVisible: false})
        })
            .catch(e => console.log(e));
        console.log('gallery')
    }
}

yet there is a drawback here you need to create your own popup for selecting images through camera or gallery. Other than that this component is really made of it. The whole documentation you can find in mentioned link