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.
Hi, I am a professional Ionic and React Native Pixel Perfect App Designer and Developer, with expertise in Client Communication, Bug Fixing, Third Party Lib, Version Control Tools, Requirement Understanding, and managing teams, I have 6+ years of experience in the same domain as well as in Codeigniter, JS, IoT, and more than 10 other languages. For the last 6+ years, not a single day went without design/development.
Please follow me on Medium: https://nehadwivedi1004.medium.com/