Capture and Crop image in React Native

 In this blog, we are going to learn about image reading.

  Let's create a new React Native project called "CropImage":

npx react-native init CropImage

To start the project, run the below command inside your React Native project folder:

npx react-native run-android

 

 To start the Metro server, run the below command inside your React Native project folder:

npx react-native start

 Step 1: From image read from storage of and android phone or using camera we need to image following npm library.

npm install react-native-image-crop-picker

 

  Step 2: Write the below code in the android Androidmanifest.xml file.          These permission are required to access the Camera and Storage.

           

    <uses-permission  android:name="android.permission.CAMERA"/>

    <uses-permission  android:name="android.permission.READ_EXTERNAL_STORAGE"/>

    <uses-permission   android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

 

 Step 3: Open app.js and Write the below code.

 

import React, {useState} from 'react';

import {View, Image, Text, Button, TouchableOpacity} from 'react-native';

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

 

const App = () => {

 const [imagePath, setImagePath] = useState('');

 

 const chooseImage = () => {

   ImagePicker.openPicker({

     width: 500,

     height: 600,

     cropping: true,

     compressImageQuality: 1,

     mediaType: 'photo',

   }).then(response => {

     setImagePath(response);

   });

 };

 

 const caputeImage = () => {

   ImagePicker.openCamera({

     width: 500,

     height: 600,

     cropping: true,

     compressImageQuality: 1,

     mediaType: 'photo',

   }).then(response => {

     setImagePath(response);

   });

 };

 

 return (

   <View style={{flex: 1, justifyContent: 'center'}}>

     <Image

       source={{uri: imagePath.path}}

       style={{

         height: 300,

         borderWidth: 1,

         borderColor: 'black',

         justifyContent: 'center',

         alignSelf: 'center',

         width: 300,

         marginBottom: 20,

       }}

     />

     <TouchableOpacity

       style={{

         backgroundColor: '#e3e3e3',

         justifyContent: 'center',

         alignSelf: 'center',

         height: 60,

         width: 200,

       }}

       onPress={chooseImage}>

       <Text

         style={{

           textAlignVertical: 'center',

           textAlign: 'center',

           fontSize: 14,

         }}>

         Choose Image

       </Text>

     </TouchableOpacity>

 

     <TouchableOpacity

       style={{

         backgroundColor: '#e3e3e3',

         justifyContent: 'center',

         alignSelf: 'center',

         height: 60,

         width: 200,

         marginTop: 20,

       }}

       onPress={caputeImage}>

       <Text

         style={{

           textAlignVertical: 'center',

           textAlign: 'center',

           fontSize: 14,

         }}>

         Capture Image

       </Text>

     </TouchableOpacity>

   </View>

 );

};

 

export default App;

This function is use to capture image using camera of android

   
    ImagePicker.openCamera({
     width: 500,
     height: 600,
     cropping: true,
     compressImageQuality: 1,
     mediaType: 'photo',
   }).then(response => {
     console.log(response);
   });

This function is use to select image from local storage of android

   

  ImagePicker.openPicker({

     width: 500,

     height: 600,

     cropping: true,

     compressImageQuality: 1,

     mediaType: 'photo',

   }).then(response => {

     setImagePath(response);

});

   

Output Screenshot

      

Home Screen

 On choose Image

After Selecting Image

on Capture Image

Image for crop

Final Image

In this way, we can read images in React Native. Keep Learning. 
All the Best :)