A Camera component for React Native. Also supports barcode scanning!
Branch: master
Clone or download
semantic-release-bot chore(release): 1.12.0 [skip ci]
# [1.12.0](v1.11.2...v1.12.0) (2019-02-20)

### Features

* **android:** allow specifying a different google vision version via gradle properties ([#2112](#2112)) ([1009c4e](1009c4e))
Latest commit 1a5be4b Feb 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update question.md Nov 19, 2018
android feat(android): allow specifying a different google vision version via… Feb 20, 2019
docs docs(q-a): add how to save video/image to camera roll (#2115) Feb 18, 2019
examples/basic fix: remove executable bit from regular files (#2103) [skip release] … Feb 12, 2019
ios fix(ios): only check permission descriptions availability in debug bu… Jan 25, 2019
postinstall_project Seblau/fix postinstall pbxproj (#1961) Dec 3, 2018
src fix(android): permission compat on android 6 devices (#2099) Feb 11, 2019
types fix: change misspelled upce to upc_e (adjust to native constants) (#2109 Feb 15, 2019
windows fix(windows): update min sdk version (#2117) Feb 19, 2019
.eslintrc docs(rn-camera): add rncamera-example without face detection (#1979) … Dec 11, 2018
.flowconfig chore(lint): fix lint to make ci work Apr 15, 2018
.gitattributes disable git large files Feb 1, 2018
.gitignore chore: upgrade prettier and autoformat typescript files upon commit (#… Dec 12, 2018
.npmignore fix: exclude android build artifacts (#2001) [skip ci] Dec 17, 2018
.prettierrc docs(rn-camera): add rncamera-example without face detection (#1979) … Dec 11, 2018
CHANGELOG.md chore(changelog): add link to github releases [skip ci] Nov 12, 2018
LICENSE Initial commit Apr 1, 2015
README.md feat(android): allow specifying a different google vision version via… Feb 20, 2019
THIRD-PARTY-LICENSES rename expo to simple RN, add js files, and export them inside the sa… Jan 1, 2018
circle.yml fix: exclude android build artifacts (#2001) [skip ci] Dec 17, 2018
commitlint.config.js chore(semantic-release): setup semantic-release for automated publish… Nov 12, 2018
package.json chore(release): 1.12.0 [skip ci] Feb 20, 2019
react-native-camera.podspec fix: the git tag format in the podspec (#2045) [skip release] Jan 11, 2019
yarn.lock fix(rn-camera): remove lodash dependency (#1996) Dec 14, 2018


React Native Camera Backers on Open Collective Sponsors on Open Collective npm version npm downloads


If you use this library on your commercial/personal projects, you can help us by funding the work on specific issues that you choose by using IssueHunt.io!

This gives you the power to prioritize our work and support the project contributors. Moreover it'll guarantee the project will be updated and maintained in the long run.


Open Collective

You can also fund this project using open collective


Support us with a monthly donation and help us continue our activities. [Become a backer]


Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

The comprehensive camera module for React Native.


  • photographs.
  • videos
  • face detection (Android & iOS only)
  • barcode scanning
  • text recognition (optional installation for iOS using CocoaPods)


Get supported react-native-camera with the Tidelift Subscription


Example import

import { RNCamera, FaceDetector } from 'react-native-camera';

How to use master branch?

We recommend using the releases from npm, however if you need some features that are not published on npm yet you can install react-native-camera from git.

yarn: yarn add react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git

npm: npm install --save react-native-camera@git+https://git@github.com/react-native-community/react-native-camera.git


  • 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 me (same username on Twitter, Facebook, etc.) Thanks!
  • We are now on Open Collective! Contributions are appreciated and will be used to fund core contributors. more details
  • If you want to help us coding, join Expo slack https://slack.expo.io/, so we can chat over there. (#react-native-camera)

To use the camera on Android you must ask for camera permission:

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

To enable video recording feature you have to add the following code to the AndroidManifest.xml:

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


Migrating from RCTCamera to RNCamera

See this doc

RNCamera Docs


Docs old RCTCamera


Getting started


  1. JDK >= 1.7 (if you run on 1.6 you will get an error on "_cameras = new HashMap<>();")
  2. With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the Info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<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 -->
<string>Your message to user when the microphone is accessed for the first time</string>
  1. On Android, you require buildToolsVersion of 25.0.2+. This should easily and automatically be downloaded by Android Studio's SDK Manager.

  2. On iOS 11 and later you need to add NSPhotoLibraryAddUsageDescription key to the Info.plist. This key lets you describe the reason your app seeks write-only access to the user’s photo library. Info.plist can be found in 'your_project/ios/your_project/Info.plist'. Add the following code:

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

Mostly automatic install with react-native

  1. npm install react-native-camera --save
  2. react-native link react-native-camera To install it with Windows, see manual install below

Mostly automatic install with CocoaPods

  1. npm install react-native-camera --save
  2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:
pod 'react-native-camera', path: '../node_modules/react-native-camera'
  1. Run pod install

Note: You might need to adjust your Podfile following the example below:

target 'yourTargetName' do
  # See http://facebook.github.io/react-native/docs/integration-with-existing-apps.html#configuring-cocoapods-dependencies
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project

  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  pod 'react-native-camera', path: '../node_modules/react-native-camera'


post_install do |installer|
  installer.pods_project.targets.each do |target|
    if target.name == "React"

Manual install


  1. npm install react-native-camera --save
  2. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  3. Go to node_modulesreact-native-camera and add RNCamera.xcodeproj
  4. Expand the RNCamera.xcodeprojProducts folder
  5. In XCode, in the project navigator, select your project. Add libRNCamera.a to your project's Build PhasesLink Binary With Libraries
  6. Click RNCamera.xcodeproj in the project navigator and go the Build Settings tab. Make sure 'All' is toggled on (instead of 'Basic'). In the Search Paths section, look for Header Search Paths and make sure it contains both $(SRCROOT)/../../react-native/React and $(SRCROOT)/../../../React - mark both as recursive.

Face Detection or Text Recognition Steps

Face Detection/Text Recognition are optional on iOS. If you want them, you are going to need to install Google Mobile Vision frameworks in your project, as mentioned in the next section.

No Face Detection steps

If you do not need it and do not want to install the GMV frameworks, open your app xcode project, on the Project Navigator, expand the RNCamera project, right click on the FaceDetector folder and delete it (move to trash, if you want). If you keep that folder and do not follow the GMV installation steps, your project will not compile.

If you want to make this automatic, you can add a postinstall script to your app package.json. Inside the postinstall_project there is a xcode project ready with the folder removed (we opened xcode, removed the folder from the project and copied the resulting project file). The post install script is:

echo "Creating project without FaceDetector"
if [ -e node_modules/react-native-camera/ios/FaceDetector ] ; then
  rm -rf node_modules/react-native-camera/ios/FaceDetector
cp node_modules/react-native-camera/postinstall_project/projectWithoutFaceDetection.pbxproj node_modules/react-native-camera/ios/RNCamera.xcodeproj/project.pbxproj

And add something like this to the scripts section in your package.json:

Note: The face detection/text recognition code is excluded by default for the CocoaPods installation.

"postinstall": "./scripts/post.sh",
Installing GMV frameworks

GMV (Google Mobile Vision) is used for Face detection/Text recognition by the iOS RNCamera. You have to link the google frameworks to your project to successfully compile the RNCamera project.

CocoaPods Path (The only option for Text Recognition)

Modify the dependency towards react-native-camera in your Podfile, from

pod 'react-native-camera', path: '../node_modules/react-native-camera'

to (for Face Detection)

pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [

or to (for Text Recognition)

pod 'react-native-camera', path: '../node_modules/react-native-camera', subspecs: [

Note: Text recognition is available only via CocoaPods Path. If you have issues with duplicate symbols you will need to enable dead code stripping option in your Xcode (Target > Build Settings > search for "Dead code stripping") see: https://github.com/firebase/quickstart-ios/issues/487#issuecomment-415313053.

Non-CocoaPods Path
  1. Download: Google Symbol Utilities: https://www.gstatic.com/cpdc/dbffca986f6337f8-GoogleSymbolUtilities-1.1.1.tar.gz

    Google Utilities: https://dl.google.com/dl/cpdc/978f81964b50a7c0/GoogleUtilities-1.3.2.tar.gz

    Google Mobile Vision: https://dl.google.com/dl/cpdc/df83c97cbca53eaf/GoogleMobileVision-1.1.0.tar.gz

    Google network Utilities: https://dl.google.com/dl/cpdc/54fd7b7ef8fd3edc/GoogleNetworkingUtilities-1.2.2.tar.gz

    Google Interchange Utilities: https://dl.google.com/dl/cpdc/1a7f7ba905b2c029/GoogleInterchangeUtilities-1.2.2.tar.gz

  2. Extract everything to one folder. Delete "BarcodeDetector" and "copy" folders from Google Mobile Vision.

  3. Open XCode, right click on your project and choose "New Group". Rename the new folder to "Frameworks". Right click on "Frameworks" and select "add files to 'YOUR_PROJECT'". Select all content from the folder of step 2, click on Options. Select "Copy items if needed", leave "Create groups" selected and choose all your targets on the "Add to targets" section. Then, click on "Add".

  4. On your target -> Build Phases -> Link Binary with Libraries -> add AddressBook.framework

  5. On your target -> Build Settings -> Other Linker Flags -> add -lz, -ObjC and -lc++

  6. To force indexing and prevent errors, restart xcode and reopen your project again before compiling.


  1. npm install react-native-camera --save
  2. Open up android/app/src/main/java/[...]/MainApplication.java
  • Add import org.reactnative.camera.RNCameraPackage; to the imports at the top of the file
  • Add new RNCameraPackage() to the list returned by the getPackages() method. Add a comma to the previous item if there's already something there.
  1. Append the following lines to android/settings.gradle:

    include ':react-native-camera'
    project(':react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-camera/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile (project(':react-native-camera')) {
        exclude group: "com.google.android.gms"
        compile 'com.android.support:exifinterface:25.+'
        compile ('com.google.android.gms:play-services-vision:12.0.1') {
            force = true

You may need to use different exifinterface versions, e.g. 27.+ instead of 25.+.

  1. Declare the permissions in your Android Manifest (required for video recording feature)
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  1. Add jitpack to android/build.gradle
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }

The current Android library defaults to the below values for the Google SDK and Libraries,

def DEFAULT_COMPILE_SDK_VERSION             = 26
def DEFAULT_BUILD_TOOLS_VERSION             = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION              = 26

You can override this settings by adding a Project-wide gradle configuration properties for use by all modules in your ReactNative project by adding the below to android/build.gradle file,

buildscript {...}

allprojects {...}

* Project-wide gradle configuration properties for use by all modules
ext {
    compileSdkVersion           = 26
    targetSdkVersion            = 26
    buildToolsVersion           = "26.0.2"
    googlePlayServicesVersion   = "12.0.1"
    googlePlayServicesVisionVersion = "15.0.2"
    supportLibVersion           = "27.1.0"

The above settings in the ReactNative project over-rides the values present in the react-native-camera module. For your reference below is the android/build.gradle file of the module.

buildscript {

def DEFAULT_COMPILE_SDK_VERSION             = 26
def DEFAULT_BUILD_TOOLS_VERSION             = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION              = 26

android {
  compileSdkVersion rootProject.hasProperty('compileSdkVersion') ? rootProject.compileSdkVersion : DEFAULT_COMPILE_SDK_VERSION
  buildToolsVersion rootProject.hasProperty('buildToolsVersion') ? rootProject.buildToolsVersion : DEFAULT_BUILD_TOOLS_VERSION

  defaultConfig {
    minSdkVersion 16
    targetSdkVersion rootProject.hasProperty('targetSdkVersion') ? rootProject.targetSdkVersion : DEFAULT_TARGET_SDK_VERSION

    versionCode 1
    versionName "1.0.0"
  lintOptions {
    abortOnError false
    warning 'InvalidPackage'


dependencies {
  def googlePlayServicesVersion = rootProject.hasProperty('googlePlayServicesVersion')  ? rootProject.googlePlayServicesVersion : DEFAULT_GOOGLE_PLAY_SERVICES_VERSION
  def supportLibVersion = rootProject.hasProperty('supportLibVersion')  ? rootProject.supportLibVersion : DEFAULT_SUPPORT_LIBRARY_VERSION

  compile 'com.facebook.react:react-native:+'
  compile "com.google.zxing:core:3.2.1"
  compile "com.drewnoakes:metadata-extractor:2.9.1"
  compile 'com.google.android.gms:play-services-vision:$googlePlayServicesVersion'
  compile 'com.android.support:exifinterface:$supportLibVersion'

  compile 'com.github.react-native-community:cameraview:cc47bb28ed2fc54a8c56a4ce9ce53edd1f0af3a5'

If you are using a version of googlePlayServicesVersion that does not have play-services-vision, you can specify a different version of play-services-vision by adding googlePlayServicesVisionVersion to the project-wide properties

ext {
    compileSdkVersion           = 26
    targetSdkVersion            = 26
    buildToolsVersion           = "26.0.2"
    googlePlayServicesVersion   = "16.0.1"
    googlePlayServicesVisionVersion = "15.0.2"
    supportLibVersion           = "27.1.0"


  1. npm install react-native-camera --save
  2. Link the library as described here: react-native-windows / LinkingLibrariesWindows.md For the last step of this guide, you have to add the following things to your MainReactNativeHost.cs:
  • in the import section at the very top: using RNCamera;
  • in protected override List<IReactPackage> Packages => new List<IReactPackage> add a new line with new RNCameraPackage()
  1. Add the capabilities (permissions) for the webcam and microphone as described here: docs.microsoft / audio-video-camera
  2. Use RCTCamera (RNCamera is not supported yet) like described above

Follow the Q & A section if you are having compilation issues.



Take a look into this documentation.


Since 1.0.0, RCTCamera is deprecated, but if you want to use it, you can see its documentation.

Thanks to Brent Vatne (@brentvatne) for the react-native-video module which provided me with a great example of how to set up this module.