🎈 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-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_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 common camera controls. Works for most needs

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

<CameraScreen
  // All Camera props can be used here, including Barcode ones
  ...

  // Plus the following ones specific to CameraScreen
  actions={{ leftButtonText: 'Cancel', leftCaptureRetakeButtonText: 'Abandon' }}
  onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
  flashImages={{
    // optional, images for flash state button
    on: require('path/to/image'),
    off: require('path/to/image'),
    auto: require('path/to/image'),
  }}
  flashImageStyle={} // optional, ImageStyle applied to flashImages
  cameraFlipImage={require('path/to/image')} // optional, image for flipping camera button
  cameraFlipImageStyle={} // optional, ImageStyle applied to cameraFlipImage
  captureButtonImage={require('path/to/image')} // optional, image capture button
  captureButtonImageStyle={} // optional, ImageStyle applied to captureButtonImage
  torchOnImage={require('path/to/image')} // optional, image for toggling on flash light
  torchOffImage={require('path/to/image')} // optional, image for toggling off flash light
  torchImageStyle={} // optional, ImageStyle applied to torchImage
  hideControls={false} // (default false) optional, hides camera controls
  showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session
  cameraRatioOverlay // optional
  allowCaptureRetake={false} // (default false) optional, ask for picture validation
/>

Camera

Barebones camera component if you need advanced/customized interface

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

<Camera
  ref={(ref) => (this.camera = ref)}
  cameraType={CameraType.Back} // front/back(default)
  flashMode='auto'
/>

Barcode / QR Code Scanning

Additionally, the Camera / CameraScreen can be used for barcode scanning

<Camera
  ...
  // Barcode props
  scanBarcode={true}
  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
/>

CameraScreen Props (Optional)

Props	Type	Description
All Camera Props
`actions`	Actions	Labels for the buttons visible on screen
`onBottomButtonPressed`	`(event: BottomPressedData) => void`	Callback called when a button is pressed. `BottomPressedData` contains the data to consume
`flashImages`	FlashImages	Images for flash state button. Default: none, button is hidden
`flashImageStyle`	ImageStyle	ImageStyle applied to flashImages
`cameraFlipImage`	ImageSourcePropType	Image for flipping camera button. Default: none, button is hidden
`cameraFlipImageStyle`	ImageStyle	ImageStyle applied to cameraFlipImage
`captureButtonImage`	ImageSourcePropType	Image for capture button. Default: none, button is hidden
`captureButtonImageStyle`	ImageStyle	ImageStyle applied to captureButtonImage
`torchOnImage`	ImageSourcePropType	Image for toggling on flash light. Default: none, button is hidden
`torchOffImage`	ImageSourcePropType	Image for toggling off flash light. Default: none, button is hidden
`torchImageStyle`	ImageStyle	ImageStyle applied to torchOnImage/torchOffImage
`hideControls`	Boolean	Hides camera controls Default: `false`
`showCapturedImageCount`	Boolean	Show count for photos taken during that capture session. Default: `false`
`cameraRatioOverlay`	CameraRatioOverlay
`allowCaptureRetake`	Boolean	Ask for picture validation. Default: `false`

Camera Props (Optional)

Props	Type	Description
`ref`	Ref	Reference on the camera view
`style`	StyleProp<ViewStyle>	Style to apply on the camera view
`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`
`cameraType`	CameraType.Back/CameraType.Front	Choose what camera to use. Default: `CameraType.Back`
`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
iOS only
`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	Dismiss tap to focus after this many milliseconds. Default `0` (disabled). Example: `5000` is 5 seconds.
`resetFocusWhenMotionDetected`	Boolean	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`.
Barcode only
`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`
`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 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 this.camera.capture();
// 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 this.camera.capture();
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

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

rasom/react-native-camera-kit