DOCSEARCHbyAlgolia
Submit Docs

React Native Camera Kit

repository·master·Indexed 25 days ago

https://github.com/teslamotors/react-native-camera-kit

A high-performance camera library for React Native applications supporting iOS and Android. Features include QR/Barcode scanning, real-time face detection using Apple Vision and Google ML Kit, and a customizable Camera component with controls for flash, focus, zoom, and torch.

Tokens
4.2K
Snippets
10
Records
30
Agent score
83%

What's inside react-native-camera-kit

  4. Configure Camera Permissions

    master
    React Native Camera Kit does not provide a built-in permissions API. You must use a separate library (such as react-native-permissions) to request camera and storage access before rendering the <Camera /> component. Failure to prompt for permission will result in a blank or black camera preview.

  6. Configure iOS Camera Permissions

    master

    Add the following usage descriptions to your ios/PROJECT_NAME/Info.plist file to provide context to the user when requesting camera and photo library access.

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

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

  7. Add Kotlin Support for Android

    master

    To use react-native-camera-kit with Kotlin support on Android, you must configure your Gradle files to include the Kotlin version, repositories, and plugins.

    1. Configure android/build.gradle

    Set the Kotlin version: In the buildscript.ext block, define kotlin_version. If you are using React Native 0.73 or higher, you can reference the existing kotlinVersion variable to avoid duplication.

    Add repositories: Ensure google() is present in both buildscript.repositories and allprojects.repositories.

    Add Kotlin classpath: Add the Kotlin Gradle plugin to buildscript.dependencies using the $kotlin_version variable defined earlier.

    2. Configure android/app/build.gradle

    Apply the necessary Kotlin plugins at the top of the file:

    // android/build.gradle
buildscript {
    ext {
        ... 
        kotlinVersion = '1.7.20' // Existing RN variable if 0.73+
        kotlin_version = kotlinVersion // Reference for react-native-camera-kit
    }
    repositories {
        ... 
        google()
    }
    dependencies {
        ... 
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
    }
}

allprojects {
    repositories {
        ... 
        google()
    }
}

// android/app/build.gradle
apply plugin: "kotlin-android"
apply plugin: "kotlin-android-extensions"

  8. Use the Camera component

    master

    The Camera component is a barebones camera view used for building custom camera interfaces. You can control the camera type (front or back) and flash mode via props.

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

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

  9. Capture an image with capture()

    master

    Use the imperative capture() method on a camera ref to take a JPEG photo.

    Important: The returned URI points to a temporary file in the app's cache. You must move this file to a permanent location (like the Documents folder) using a library like react-native-fs or expo-filesystem if you need it to persist beyond the current session.

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

  10. Implement Face Detection

    master

    Detect faces in real time using Apple Vision (iOS) or Google ML Kit (Android).

    Android Requirement: Requires a Google Play Store device. To avoid a delay on the first run, you should pre-download the ML Kit model by adding the following to your AndroidManifest.xml:

    <application ...>
  <meta-data
      android:name="com.google.mlkit.vision.DEPENDENCIES"
      android:value="face" />
</application>

    Use onFaceDetected to receive an array of FaceData objects containing id, yaw, pitch, roll, and bounding box information.

    <Camera
  ... 
  faceDetectionEnabled={true}
  faceDetectionThrottleMs={100} // optional, default 100ms
  onFaceDetected={(event) => {
    // event.nativeEvent.faces: FaceData[]
    // each face: { id, yaw, pitch, roll, boundsX, boundsY, boundsWidth, boundsHeight }
  }}
  // Android only — track MLKit face module download progress
  onFaceDetectionInstallStatus={(event) => {
    // event.nativeEvent.state: FaceDetectionInstallState
    // 'pending' | 'downloading' | 'installing' | 'ready' | 'failed' | 'unavailable'
  }}
/>

  11. Implement Barcode and QR Code scanning

    master

    Enable barcode scanning by setting scanBarcode={true}. You can customize the scanner UI with showFrame, laserColor, and frameColor. Use the onReadCode callback to receive the scanned value.

    <Camera
  ... 
  scanBarcode={true}
  onReadCode={(event) => Alert.alert('QR code found')} // optional
  showFrame={true} // (default false) optional
  laserColor='red' // (default red)
  frameColor='white' // (default white)
/>