Implementing Camera with react-native-image-crop-picker in React Native

 

Introduction

Hello, React Native enthusiasts! Today, we’re delving into the exciting world of integrating a camera into our React Native applications. The camera is a powerful feature that significantly enhances the functionality of our mobile applications.

The Chosen Library: react-native-image-crop-picker

To kickstart our camera implementation, we’ll be leveraging the react-native-image-crop-picker library. With an impressive weight of over 2.16 MB and a robust weekly download count exceeding 122K, this library is a reliable choice for handling image and video capture.

Implementation Steps

1. Android Configuration

Make sure to add the following permissions to your AndroidManifest.xml file:

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

Permisson Request

Now, let’s proceed with the implementation in your React Native component:

import React, { useEffect, useState,useRef } from 'react';
import { Text, View ,Button,Image} from 'react-native';
import ImagePicker from 'react-native-image-crop-picker';

const App = () => {

  const confirmVideo = ()=>{
    console.log('innnnnnnnn');
    ImagePicker.openCamera({
      cropping: true,
      // showCropFrame: true,
      // showCropGuidelines:true,
      // multiple:true,
      freeStyleCropEnabled: true,
      mediaType: 'photo',
      // cropperToolbarTitle:'',
      // cropperCircleOverlay:true
      // showCropGuidelines:false,
      // showCropFrame:false,
      // hideBottomControls: true, //to hide bottom
    }).then(image => {
      console.log('image',image);
    });
    return null;
  }
  
  const confirmVideo1 = ()=>{
    console.log('innnnnnnnn');
    ImagePicker.openCamera({
      showCropFrame: true,
      showCropGuidelines:true,
      multiple:true,
      mediaType: 'video',
    }).then(image => {
      console.log('image',image);
    });
    return null;
  }
  return (
    <View style={{ flex: 1 }}>
       <Button title="Camera" onPress={confirmVideo} />
       <Button title="Video" onPress={confirmVideo1} />

    </View>
  );
};

export default App;

In this implementation, we’ve provided clear function names (captureImage and captureVideo) for better readability. Additionally, the usage of the camera for both image and video capture is demonstrated through separate buttons.

Feel free to explore the various configuration options provided by react-native-image-crop-picker to customize the camera behavior according to your application's requirements.

Happy coding! 🚀

🔗 Reference Links:

Implementing a Camera in a React Native App using react-native-vision-camera

Recently, react-native-vision-camera emerged as a powerful alternative to react-native-camera, which has been…

medium.com

Implementing Camera in React Native using react-native-camera

Hello, React Native enthusiasts! Today, we’re diving into the exciting world of implementing a camera in our React…

medium.com