Why we need image cropping –

In this article we are going to discuss about “Image Selection With Crop in React Native“, in today era mostly each app has image uploading functionality and after selection image we provide the cropping for image.

I’m a big fan of React Native, because it is very easy to implement complicated concepts and designs, in below example i am going to explain you in detail how to create a very simple image cropping and image picking functionality.

Example Output –

Follow all the steps carefully –

Please follow all the steps carefully for integrating this functionality.

Step 1 – Installing plugin

Firstly we need to install the npm plugin.

npm install react-native-image-crop-picker

Step 2 – Importing the plugin

After plugin install successfully, you need to import it where you want to use this plugin

import ImagePicker from 'react-native-image-crop-picker';

Step 3 – View Design

Here we design the view where you click on image after that image chooser is open then after choose image cropping option appear.

render(){
const index = 0;
  return(
       <TouchableOpacity 
          onPress={() => { this.onImageOptionClick(index) }}
           style={{
              width: '10%',
              height: '100%',
              alignItems: 'center',
              justifyContent: 'center',
         }}>
          <Image source={Images.attachment}                               
          style={{width:33, height: 33 }} />
     </TouchableOpacity>
 )
}

Step 4 – Function Definition

Here we provide the definition of onImageOptionClick() where we open the picker and apply the cropping, you can provide the option based on index.

 onImageOptionClick(index) {
    if (index == 0) {
      ImagePicker.openPicker({
        width: moderateScale(400),
        height: moderateScale(400),
        compressImageMaxWidth:(300),
        compressImageMaxHeight:(300),
        compressImageQuality: 0.8,
        cropping: true,
        multiple: false, //if you make it true then able to pick 
        multiple image and response is in array form
        mediaType: 'photo',
      }).then(image => {
        this.setState({imageAttachment: image.path});
        const userSourceImg = {
          uri: image.path,
          type: 'image/*',
          name: 'fileName',
        };
        this.setState({userSourceImg: userSourceImg});
      });
    } else if (index == 1) {
      ImagePicker.openCamera({
        width:(400),
        height:(400),
        cropping: true,
        mediaType: 'photo',
        compressImageMaxWidth:(300),
        compressImageMaxHeight:(300),
        compressImageQuality: 0.8,
      }).then(image => {
        this.setState({imageAttachment: image.path});
        const userSourceImg = {
          uri: image.path,
          type: 'image/*',
          name: 'fileName',
        };
      });
    } else {
      console.log('close the image picker modal');
    }
  }

Step 5 – Run The App

Now all thing are done, run your app.

react-native run-android // for android

react-native run-ios // for ios

So we completed the react native cropping which is “Image Selection With Crop in React Native“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.