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.