🎈 React Native Camera Kit

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

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

Permissions

Android

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

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

The second is only needed if you are not using internal storage

iOS

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

<key>NSCameraUsageDescription</key>
<string>For taking photos</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>For saving photos</string>

Running the example project

• yarn bootstrap
• yarn example ios or yarn example android

Components

CameraScreen

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

import{CameraScreen}from'react-native-camera-kit';

<CameraScreenactions={{rightButtonText: 'Done',leftButtonText: 'Cancel'}}onBottomButtonPressed={(event)=>this.onBottomButtonPressed(event)}flashImages={{// optional, images for flash stateon: require('path/to/image'),off: require('path/to/image'),auto: require('path/to/image'),}}cameraFlipImage={require('path/to/image')}// optional, image for flipping camera buttoncaptureButtonImage={require('path/to/image')}// optional, image capture buttontorchOnImage={require('path/to/image')}// optional, image for toggling on flash lighttorchOffImage={require('path/to/image')}// optional, image for toggling off flash lighthideControls={false}// (default false) optional, hides camera controlsshowCapturedImageCount={false}// (default false) optional, show count for photos taken during that capture sessionsaveToInternalStorage={false}// (default false) optional, save files to internal storageonError={(err)=>console.error(err)}/>

Barcode / QR Code Scanning

Additionally, the camera screen can be used for barcode scanning

<CameraScreen...// Barcode propsscanBarcode={true}onReadCode={(event)=>Alert.alert('QR code found')}// optionalshowFrame={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 screenlaserColor='red'// (default red) optional, color of laser in scanner frameframeColor='white'// (default white) optional, color of border of scanner frame/>

Camera

Barebones camera component

import{Camera,CameraType}from'react-native-camera-kit';

<Cameraref={(ref)=>(this.camera=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: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default true.
saveToCameraRoll	Boolean	Using the camera roll is slower than using regular files stored in your app. On an iPhone X in debug mode, on a real phone, we measured around 100-150ms processing time to save to the camera roll. Note: This only work on real devices. It will hang indefinitly on simulators.
saveToInternalStorage	Boolean	Save files to internal storage (Android only)
saveToCameraRollWithPhUrl	Boolean	iOS only. If true, speeds up photo taking by about 5-50ms (measured on iPhone X) by only returning a rn-cameraroll-compatibleph://.. URL instead of a regular file://.. URL.
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
onError	Function	Callback when when an error occurs

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({ ... })

Capture image ({ saveToCameraRoll: boolean }). Using the camera roll is slower than using regular files stored in your app. On an iPhone X in debug mode, on a real phone, we measured around 100-150ms processing time to save to the camera roll.

constimage=awaitthis.camera.capture();

checkDeviceCameraAuthorizationStatus (iOS only)

constisCameraAuthorized=awaitCamera.checkDeviceCameraAuthorizationStatus();

return values:

AVAuthorizationStatusAuthorized returns true

AVAuthorizationStatusNotDetermined returns -1

otherwise, returns false

requestDeviceCameraAuthorization (iOS only)

constisUserAuthorizedCamera=awaitCamera.requestDeviceCameraAuthorization();

AVAuthorizationStatusAuthorized returns true

otherwise, returns false

Contributing

• 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.

License

The MIT License.

See LICENSE