Contents
    React Native Camera but With React Hooks

    React Native Camera but With React Hooks

    Control the camera and interacts with the devices native operating system and hardware using RNCamera

    Last updated August 11, 2022Posted by Jagad on February 12, 2022
    -- views

    5 min read

    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.

    Meme

    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.

    React Native Camera

    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.

    Take Picture With RNCamera

    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.

    Scan Barcodes With RNCamera

    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.


    Post Reactions
    LIKE
    LOVE
    Wow
    YAY
    Contributors

    The writing on this website may contain errors in grammar, punctuation, etc. Please make a contribution here