React Native Camera but With React Hooks

Introduction

React Native Camera is a well-known library of React Native ecosystems. It allows you to control the camera and interacts with the device's native operating system and hardware. The features of React Native Camera are listed below :

• Bar Code
• Face Detection
• Text Recognition
• Take Pictures

In this tutorial, let us build a RNCamera with react hooks and implement how to capture and read barcodes.

RNCamera's official documentation may be found here if you want to learn more about it

Install RNCamera Module

You have to install some dependencies to use the RNCamera module.

For (RN > 0.60):

npm install react-native-camera --save
cd ios && pod install && cd ..

For RN < 0.60:

npm install react-native-camera --save
react-native link react-native-camera

Other required steps are to add permissions on both Android and iOS

iOS - other required steps

Add permissions with usage descriptions to your app Info.plist

<!-- Required with iOS 10 and higher -->
<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Required with iOS 11 and higher: include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>

<!-- Include this only if you are planning to use the microphone for video recording -->
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Android - other required steps

Add permissions to your app android/app/src/main/AndroidManifest.xml

<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" />

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

Insert the following lines in android/app/build.gradle:

android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}

RN Camera is deprecated, but...

I haven't been in the react-native-camera library for a long time, but I recently discovered that this library is deprecated and an error is popping up regarding viewproptypes in the latest react native

This is pretty easily resolved. The deprecated-react-native-prop-types library only has to be installed in the following way:

#npm
npm i deprecated-react-native-prop-types

#or

#yarn
yarn add deprecated-react-native-prop-types

After that go to /node-modules/react-native-camera/src/RNCamera.js folder and delete ViewPropTypes

import React from 'react';
import PropTypes from 'prop-types';
import {
  findNodeHandle,
  Platform,
  NativeModules,
  ViewPropTypes, // DELETE
  requireNativeComponent,
  View,
  ActivityIndicator,
  Text,
  StyleSheet,
  PermissionsAndroid,
} from 'react-native';

Then we just need to add the library that we have previously installed.

import React from 'react';
import PropTypes from 'prop-types';
import {
  findNodeHandle,
  Platform,
  NativeModules,
  requireNativeComponent,
  View,
  ActivityIndicator,
  Text,
  StyleSheet,
  PermissionsAndroid,
} from 'react-native';
import {ViewPropTypes} from 'deprecated-react-native-prop-types'

Implementation of RNCamera using React Hooks

Class components are used instead of functional components in the RNCamera documentation, but we use functional components here because, these days, functional components are used more often.

Import RNCamera Module.
import {RNCamera} from 'react-native-camera';

Then use the <RNCamera/> tag.
import React from 'react';
import {RNCamera} from 'react-native-camera';

const App = () => {
  const ref = React.createRef();
  return (
    <RNCamera
      ref={ref}
      style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}
      androidCameraPermissionOptions={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
    />
  );
};

export default App;

After the <RNCamera/> tag is called, this is what it looks like.

How to Take a Photo with RNCamera

In order for the Camera to take pictures, we must create a function to handle it.

const takePicture = async () => {
  if (ref.current) {
    const options = { quality: 0.5, base64: true };
    const data = await ref.current.takePictureAsync(options);
    console.log(data.uri);
  }
};

Here is the complete source code with the take button.

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';

const App = () => {
  const ref = React.createRef();

  const takePicture = async () => {
    if (ref.current) {
      const options = { quality: 0.5, base64: true };
      const data = await ref.current.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <View
      style={{ flex: 1, flexDirection: 'column', backgroundColor: 'black' }}
    >
      <RNCamera
        ref={ref}
        style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.on}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
      />
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
        <TouchableOpacity
          onPress={takePicture}
          style={{
            flex: 0,
            backgroundColor: '#fff',
            borderRadius: 1000,
            padding: 15,
            paddingHorizontal: 20,
            alignSelf: 'center',
            margin: 20,
          }}
        >
          <Text style={{ fontSize: 14 }}> Take Picture </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;

When we press the take button, a log with the URL of the image that was taken will appear.

How to read barcodes

RNCamera can also read aztec, code128, code39, code39, code39, mod43, code93, ean13, ean8, pdf417, qr, and upce barcodes.

we can use onBarCodeRead property to read barcode.

import React from 'react';
import { RNCamera } from 'react-native-camera';

const App = () => {
  const ref = React.createRef();
  return (
    <RNCamera
      ref={ref}
      style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}
      androidCameraPermissionOptions={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
      //this is onBarcodeRead Property
      onBarCodeRead={(barcodes) => {
        console.log(barcodes);
      }}
    />
  );
};

export default App;

A barcode log will show when we point the camera at the barcode. In this case, I'm using QR types.

Conclusion

If you're developing cross-platform apps with React Native, the react-native-camera module is a great way to take advantage of the device's hardware.