React Native Camera Kit

A high performance, easy to use, rock solid camera library for React Native apps.
Alternatives To React Native Camera Kit
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Barcodescanner5,23353 years ago27August 19, 2017otherJava
Barcode Scanner Libraries for Android
React Native Vision Camera4,138236 days ago76August 09, 2022432mitSwift
📸 The Camera library that sees the vision.
Html5 Qrcode3,2564a day ago46April 07, 2022229apache-2.0TypeScript
A cross platform HTML5 QR code reader. See end to end implementation at:
8 months ago7November 08, 202122mitGo
Cameradar hacks its way into RTSP videosurveillance cameras
Instascan2,3655563 years ago7April 26, 2017177mitJavaScript
HTML5 QR code scanner using your webcam
React Native Qrcode Scanner1,986171920 days ago51February 11, 2022123mitJavaScript
A QR code scanner component for React Native.
React Native Camera Kit1,97146119 days ago185September 15, 202276mitObjective-C
A high performance, easy to use, rock solid camera library for React Native apps.
2313 years ago2March 29, 201749Java
Modification of ZXING Barcode Scanner project for easy Android QR-Code detection and AR purposes
Qr Scanner1,6407116 months ago7February 22, 202275mitTypeScript
Lightweight Javascript QR Code Scanner
339 months ago16March 11, 201821otherSwift
:mag_right: A simple and beautiful barcode scanner.
Alternatives To React Native Camera Kit
Select To Compare

Alternative Project Comparisons

🎈 React Native Camera Kit

A high performance, easy to use, rock solid
camera library for React Native apps.

React Native Camera Kit is released under the MIT license. Current npm package version.

  • Cross Platform (iOS and Android)

  • Optimized for performance and high photo capture rate

  • QR / Barcode scanning support

  • Camera preview support in iOS simulator

Installation (RN > 0.60)

yarn add react-native-camera-kit
cd ios && pod install && cd ..

Android: Add Kotlin to your project



Add the following uses-permission to your AndroidManifest.xml (usually found at: android/src/main/)

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


Add the following usage descriptions to your Info.plist (usually found at: ios/PROJECT_NAME/)

<string>For taking photos</string>

<string>For saving photos</string>

Running the example project

  • yarn bootstrap
  • yarn example ios or yarn example android



Full screen camera component that holds camera state and provides camera controls

import { CameraScreen } from 'react-native-camera-kit';
  actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
  onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
    // optional, images for flash state
    on: require('path/to/image'),
    off: require('path/to/image'),
    auto: require('path/to/image'),
  cameraFlipImage={require('path/to/image')} // optional, image for flipping camera button
  captureButtonImage={require('path/to/image')} // optional, image capture button
  torchOnImage={require('path/to/image')} // optional, image for toggling on flash light
  torchOffImage={require('path/to/image')} // optional, image for toggling off flash light
  hideControls={false} // (default false) optional, hides camera controls
  showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session

Barcode / QR Code Scanning

Additionally, the camera screen can be used for barcode scanning

  // Barcode props
  onReadCode={(event) => Alert.alert('QR code found')} // optional
  showFrame={true} // (default false) optional, show frame with transparent layer (qr code or barcode will be read on this area ONLY), start animation for scanner,that stoped when find any code. Frame always at center of the screen
  laserColor='red' // (default red) optional, color of laser in scanner frame
  frameColor='white' // (default white) optional, color of border of scanner frame


Barebones camera component

import { Camera, CameraType } from 'react-native-camera-kit';
  ref={(ref) => ( = ref)}
  cameraType={CameraType.Back} // front/back(default)

Camera Props (Optional)

Props Type Description
flashMode 'on'/'off'/'auto' Camera flash mode. Default: auto
focusMode 'on'/'off' Camera focus mode. Default: on
zoomMode 'on'/'off' Enable pinch to zoom camera. Default: on
torchMode 'on'/'off' Toggle flash light when camera is active. Default: off
ratioOverlay ['int':'int', ...] Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: ['16:9', '1:1', '3:4']
ratioOverlayColor Color Any color with alpha. Default: '#ffffff77'
resetFocusTimeout Number iOS only. Dismiss tap to focus after this many milliseconds. Default 0 (disabled). Example: 5000 is 5 seconds.
resetFocusWhenMotionDetected Boolean iOS only. Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: Default true.
onOrientationChange Function Callback when physical device orientation changes. Returned event contains orientation. Ex: onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}. Use import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... } to understand the new value

Barcode Props (Optional)

Props Type Description
scanBarcode Boolean Enable barcode scanner. Default: false
showFrame Boolean Show frame in barcode scanner. Default: false
laserColor Color Color of barcode scanner laser visualization. Default: red
frameColor Color Color of barcode scanner frame visualization. Default: yellow
surfaceColor Color Color of barcode scanner surface visualization. Default: blue
onReadCode Function Callback when scanner successfully reads barcode. Returned event contains codeStringValue. Default: null. Ex: onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)}

Imperative API

Note: Must be called on a valid camera ref


Capture image as JPEG.

A temporary file is created. You must move this file to a permanent location (e.g. the app's 'Documents' folder) if you need it beyond the current session of the app as it may be deleted when the user leaves the app. You can move files by using a file system library such as react-native-fs or expo-filesystem. (On Android we currently have an unsupported outputPath prop but it's subject to change at any time).

Note that the reason you're getting a URL despite it being a file is because Android 10+ encourages URIs. To keep things consistent regardless of settings or platform we always send back a URI.

const { uri } = await;
// uri = 'file:///data/user/0/com.myorg.myapp/cache/ckcap123123123123.jpg'

If you want to store it permanently, here's an example using react-native-fs:

import RNFS from 'react-native-fs';
// [...]
let { uri } = await;
if (uri.startsWith('file://')) {
  // Platform dependent, iOS & Android uses '/'
  const pathSplitter = '/';
  // file:///foo/bar.jpg => /foo/bar.jpg
  const filePath = uri.replace('file://', '');
  // /foo/bar.jpg => [foo, bar.jpg]
  const pathSegments = filePath.split(pathSplitter);
  // [foo, bar.jpg] => bar.jpg
  const fileName = pathSegments[pathSegments.length - 1];

  await RNFS.moveFile(filePath, `${RNFS.DocumentDirectoryPath}/${fileName}`);
  uri = `file://${destFilePath}`;

checkDeviceCameraAuthorizationStatus (iOS only)

const isCameraAuthorized = await Camera.checkDeviceCameraAuthorizationStatus();

return values:

AVAuthorizationStatusAuthorized returns true

AVAuthorizationStatusNotDetermined returns -1

otherwise, returns false

requestDeviceCameraAuthorization (iOS only)

const isUserAuthorizedCamera = await Camera.requestDeviceCameraAuthorization();

AVAuthorizationStatusAuthorized returns true

otherwise, returns false


  • Pull Requests are welcome, if you open a pull request we will do our best to get to it in a timely manner
  • Pull Request Reviews are even more welcome! we need help testing, reviewing, and updating open PRs
  • If you are interested in contributing more actively, please contact us.


The MIT License.


Popular Camera Projects
Popular Scanner Projects
Popular Hardware Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Objective C