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

Last update: May 11, 2022

🎈 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

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 camera controls

import { CameraScreen } from 'react-native-camera-kit';
<CameraScreen
  actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
  onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
  flashImages={{
    // 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

<CameraScreen
  ...
  // 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
/>

Camera

Barebones camera component

import { Camera, CameraType } from 'react-native-camera-kit';
<Camera
  ref={(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.
saveToCameraRollWithPhUrl Boolean iOS only. If true, speeds up photo taking by about 5-50ms (measured on iPhone X) by only returning a rn-cameraroll-compatible ph://.. 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

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.

const image = await this.camera.capture();

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

GitHub

https://github.com/wix/react-native-camera-kit
Comments
  • 1. Can't turn off flash on android

    Followed the example and set flash to off, but it's still set to auto

            ref={(cam) => {
                                this.camera = cam;
                                }
                    }
            style={{flex: 1, backgroundColor:'white'}}
            cameraOptions={{
                        flashMode: 'off',             // on/off/auto(default)
                        focusMode: 'on',               // off/on(default)
                        zoomMode: 'on',                // off/on(default)
                        ratioOverlay:'1:1',            // optional, ratio overlay on the camera and crop the image seamlessly 
                        ratioOverlayColor: '#00000077' // optional
                        }}
    />```
    Reviewed by faisalkanji at 2016-11-22 13:45
  • 2. Camera default is to initiate with zoom at ~70%?

    It appears that the camera zooms in by default, with no ability to fully zoom out.

    Is this intended, or is there a setting that can be adjusted to initiate the camera fully zoomed out?

    Reviewed by antoncode007 at 2016-09-25 04:13
  • 3. Don't ask for Library permissions

    ... if we aren't going to use them.

    Essentially before saving file we were asking for library permissions and THEN conditionally writing to it or not. As I see it, its best to only ask for the permissions if we are going to use it.

    psst it may be easier to look at this PR with whitespace turned off: https://github.com/wix/react-native-camera-kit/pull/23/files?w=1

    Reviewed by JAStanton at 2017-03-24 20:54
  • 4. Doesn't compile after jetifier with androidx

    Issue Description

    Doesn't compile after jetifier with androidx. I have an app that uses the library, and I just migrated to androidx. I used jetifier on it, and everything except react-native-camera-kit worked perfectly. So my app compiles without camera-kit, but it doesn't with it.

    Task :rncamerakit:compileDebugJavaWithJavac FAILED /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:5: error: package and roidx.gridlayout.widget does not exist import androidx.gridlayout.widget.GridLayoutManager; ^ /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:12: error: cannot fin d symbol private class GridLayoutViewManagerWrapper extends GridLayoutManager { ^ symbol: class GridLayoutManager location: class GalleryView /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:18: error: method does not override or implement a method from a supertype @Override ^ /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:21: error: cannot find symbol super.onLayoutChildren(recycler, state); ^ symbol: method onLayoutChildren(RecyclerView.Recycler,State) /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:60: error: incompatible types: LayoutManager cannot be converted to GalleryView.GridLayoutViewManagerWrapper if (getLayoutManager() == null || ((GridLayoutViewManagerWrapper) getLayoutManager()).getSpanCount() != columnCount) { ^ /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:61: error: cannot find symbol GridLayoutManager layoutManager = new GridLayoutViewManagerWrapper(getContext(), columnCount); ^ symbol: class GridLayoutManager location: class GalleryView /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryView.java:62: error: cannot find symbol layoutManager.setOrientation(GridLayoutManager.VERTICAL); ^ symbol: variable GridLayoutManager location: class GalleryView Note: Some input files use or override a deprecated API. Note: Recompile with -Xlint:deprecation for details. Note: /Users/irondsd/dev/neet/node_modules/react-native-camera-kit/android/src/main/java/com/wix/RNCameraKit/gallery/GalleryViewManager.java uses unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 7 errors

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':rncamerakit:compileDebugJavaWithJavac'.

    Steps to Reproduce / Code Snippets / Screenshots

    react-native init test npm install react-native-camera-kit --save android_installation_process npm install --save-dev jetifier npx jetify

    add 2 lines to gradle.properties: android.useAndroidX=true android.enableJetifier=true

    and then build.gradle: compileSdkVersion 28 buildToolsVersion '28.0.3'

    npx react-native run-android doesn't compile anymore

    Environment

    • React Native Navigation version: 3.4.1
    • React Native version: 0.59.2
    • Platform(s) (iOS, Android, or both?): Android
    • Device info (Simulator/Device? OS version? Debug/Release?): Both
    Reviewed by irondsd at 2019-06-21 11:07
  • 5. Camera is not correctly rotated

    1 - Open camera 2 - Rotate mobile device 3 - Image shows cropped with wrong orientation 4 - Rotate mobile device again 5 - Image shows cropped with wrong orientation

    Reviewed by ferminmoli at 2017-08-29 14:51
  • 6. onReadQRCode doesn't work, onReadCode doesn't work too

    onReadQRCode doesn't work, onReadCode doesn't work too

    /**
     * Created by iori on 2017/1/4.
     */
    
    import React, {PureComponent} from 'react';
    import {
        View,
        TouchableOpacity,
        Text,
        Alert,
        StyleSheet,
        InteractionManager,
        AppState
    } from 'react-native';
    
    import CommonCss from '../style/CommonCss';
    import * as api from '../utils/index';
    import SQLite from '../component/Widget/DB'
    import {CameraKitCamera, CameraKitGallery, CameraKitGalleryView, CameraKitCameraScreen} from 'react-native-camera-kit';
    
    let sqlite = new SQLite();
    
    class HomeScene extends PureComponent {
        constructor(props) {
            super(props);
    
            this.state = {}
        }
    
        componentDidMount() {
            InteractionManager.runAfterInteractions(() => {
                this._renderNavi();
            })
        }
    
        render = () => {
            let that = this;
            return (
                <View style={CommonCss.wrap}>
                    <CameraKitCameraScreen
                        showFrame={true}
                        scanBarcode={true}
                        laserColor={"blue"}
                        frameColor={"yellow"}
                        onReadCode={((event) => that._onReadCode(event))}
                        hideControls={true}
                        offsetForScannerFrame={30}
                        heightForScannerFrame={300}
                        colorForScannerFrame={'blue'}
                    />
                </View>
            );
        };
    
        _onReadCode = (e) => {
            alert(1)
            console.log(e);
        };
        
        _renderNavi = () => {
            const {navigation} = this.props;
            navigation.setParams({
                headerLeftComp: (
                    <View style={[CommonCss.flexRow]}>
                        <TouchableOpacity
                            style={{marginLeft: 20}}
                            onPress={() => {
    
                            }}
                        >
                            <Text style={[CommonCss.iconfont, {fontSize: 20}]}>&#xe796;</Text>
                        </TouchableOpacity>
                    </View>
                ),
                headerRightComp: (
                    <View style={[CommonCss.flexRow]}>
                        <TouchableOpacity
                            style={{marginRight: 20}}
                            onPress={() => {
    
                            }}
                        >
                            <Text style={[CommonCss.iconfont, {fontSize: 20}]}>&#xe873;</Text>
                        </TouchableOpacity>
                    </View>
                )
            });
        };
    
    
    }
    
    const styles = StyleSheet.create({});
    
    export default HomeScene;
    

    Steps to Reproduce / Code Snippets / Screenshots

    [FILL THIS OUT - It will be extremely helpful]


    Environment

    • React Native Navigation version: 1.5.8
    • React Native version: 0.54.2
    • Platform(s) (iOS, Android, or both?): iOS
    • Device info (Simulator/Device? OS version? Debug/Release?): iPhone 7
    Reviewed by bashen1 at 2018-03-24 08:05
  • 7. Failed to save image to MediaStore on android 6.0.1

    Issue Description

    When trying to take a pic with CameraKitCameraScreeen on m,y Mi3 with android 6.0.1 image

    image

    This happens also with some other older androids

    Related to #94


    Environment

    • React Native Camera Kit version: 5.3.21
    • React Native version: 49.3
    • Platform(s) (iOS, Android, or both?): Android
    • Device info (Simulator/Device? OS version? Debug/Release?): Both on dev and production on real device and simulator
    Reviewed by tokict at 2018-02-07 15:37
  • 8. CameraKitGalleryView crashes app when it's first loaded on android.

    Issue Description

    CameraKitGalleryView crashed the app when it's first loaded on android. I use wix/react-native-navigation

    Steps to Reproduce / Code Snippets / Screenshots

    class Photos extends Component {
        render () {
            return (
                <CameraKitGalleryView
                    ref={gallery => this.gallery = gallery}
                    style={{flex: 1, marginTop: 20}}
                    minimumInteritemSpacing={10}
                    minimumLineSpacing={10}
                    columnCount={3}
                    selectedImages={this.state.images}
        
                />
            );
        }
    }
    
    ```---
    
    ### Environment
    * React Native Navigation version: [1.1.323]
    * React Native version: [0.51.0]
    * Platform(s) (iOS, Android, or both?): [Android]
    * Device info (Simulator/Device? OS version? Debug/Release?): [Both on simulator and device. Android 7.0, Both on Debug/Release]
    
    Reviewed by victorlenerd at 2018-01-14 17:27
  • 9. Help me fixing this android build issue

    Running dex in-process requires build tools 23.0.2. For faster builds update this project to use the latest build tools. Dex: Error converting bytecode to dex: Cause: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompatIcs; UNEXPECTED TOP-LEVEL EXCEPTION: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompatIcs; at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596) at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554) at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535) at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171) at com.android.dx.merge.DexMerger.merge(DexMerger.java:189) at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502) at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334) at com.android.dx.command.dexer.Main.run(Main.java:277) at com.android.dx.command.dexer.Main.main(Main.java:245) at com.android.dx.command.Main.main(Main.java:106)

    :app:transformClassesWithDexForDebug FAILED

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':app:transformClassesWithDexForDebug'.

    com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command '/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home/bin/java'' finished with non-zero exit value 2

    Reviewed by ranjitnadar at 2017-07-31 15:04
  • 10. Camera Freeze: How to re-initialise camera component?

    Hi All,

    Took photo using camera and then navigated to another page where there is a back button, on click event I am again navigating to camera but this time camera freezes but I am able to click a another photo.

    Thanks in advance!

    Reviewed by rashmimhatre100 at 2018-03-30 12:43
  • 11. Cannot scan barcode multiple times on Android devices

    Issue Description

    With scanBarcode fixed to true and registered function in onReadCode there is no possibility to scan multiple barcodes in the row.

    Steps to Reproduce

    After first invocation of the onReadCode there is no possibility to receive next events. The only way is to unmount camera and mount it again. Am I missing something? I was looking into native code and I didn't find any additional property.

    Environment

    • React Native Navigation version: 1.2.1
    • React Native version: 0.53.3
    • Platform(s): Android (not tested on iOS)
    • Device info: Device/debug/Galaxy J5/7.0
    Reviewed by jpudysz at 2018-03-21 12:38
  • 12. Bump async from 2.6.3 to 2.6.4 in /example

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-29 15:06
  • 13. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-29 15:01
  • 14. Barcode scanner does not work in some android devices

    Summary

    How did you test this change?

    I have tested it in real devices (ios and android). The issue was related to the implementation of com.google.mlkit:barcode-scanning. The current master version was upgraded from 16.0.3 to 17.0.1.

    Reviewed by cassioseffrin at 2022-04-22 19:10
  • 15. Barcode don't work on specific device: motorola moto g(9) play. Android 11

    Describe the bug onReadCode is not detecting reads on specific model motorola moto g(9) play. Android 11 This bug only happen in this device model. In a large number of devices including ios and android it's ok.

    To Reproduce Steps to reproduce the behavior:

    Just render a common camera component and wait for the bar code read.

    <CameraScreen
    			scanBarcode={true}
    			onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)}
    			showFrame={true}
    			laserColor='red'
    			frameColor='white' 
    />
    

    Expected behavior Detect the barcode read on all kinds of devices

    ** The output of: npx @react-native-community/cli doctor

    Common ✓ Node.js ✓ yarn

    • Version found: 2022.03.14.00
    • Version supported: 4.x

    Android ✓ JDK ✓ Android Studio - Required for building and installing your app on Android ✓ Android SDK - Required for building and installing your app on Android ✓ ANDROID_HOME

    iOS ✓ Xcode - Required for building and installing your app on iOS ✓ CocoaPods - Required for installing iOS dependencies ✓ ios-deploy - Required for installing your app on a physical device with the CLI

    Smartphone:

    • Device: motorola moto g(9) play.
    • Camera: fron:t 8MP / back: 48MP + 2MP + 2MP (don't work in both)
    • OS: android 11
    • react-native: 0.66.4
    • react-native-chart-kit: 6.11.0
    Reviewed by cassioseffrin at 2022-04-22 12:06
  • 16. Android onReadCode is only fired once

    Describe the bug Barcode scanning callback only runs once on Android. Works just fine on iOS. Library version: 12.1.0

    To Reproduce Steps to reproduce the behavior:

    1. Have a screen with Camera component like so
            <Camera
              style={{
                flex: 1,
                backgroundColor: 'transparent',
              }}
              cameraType={CameraType.Back}
              flashMode={'auto'}
              focusMode={'on'}
              zoomMode={'on'}
              scanBarcode={true}
              onReadCode={onScan}
            />
    
    1. Scan a QR/barcode
    2. Callback executed
    3. wait a few seconds
    4. try scanning any other QR code
    5. Callback not executed

    Expected behavior Callback gets executed multiple times.

    Smartphone (please complete the following information):

    • Device: Samsung Galaxy A12
    • OS: Android 11
    Reviewed by Epick362 at 2022-04-12 16:06
  • 17. Error when running react-native run-anroid

    Describe the bug when i was add this i got an error when running android

    Add Kotlin Support for Android

    1. Open and edit android/build.gradle

    Add the kotlin_version to buildscript.ext

    buildscript {
      ext {
            ...
            kotlin_version = '1.5.10'
      }
    

    Add google() to the buildscript.repositories and allprojects.repositories

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

    Add the Kotlin classpath to buildscript.dependencies

    dependencies {
        ...
        classpath("com.android.tools.build:gradle:7.0.2") // or recent
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version")
    }
    
    1. Open and edit android/app/build.gradle

    Add Kotlin imports

    apply plugin: "kotlin-android"
    apply plugin: "kotlin-android-extensions"
    

    To Reproduce Steps to reproduce the behavior:

    1. Add prop someProp="someValue"
    2. call cameraRef.current.capture()
    3. See error in console

    Expected behavior A clear and concise description of what you expected to happen.

    Screenshots If the issue is a visual glitch or UI issue please provide screen shots.

    Desktop (please complete the following information):

    • OS: [Windows 10]
    • Browser [e.g. chrome]
    • Version [e.g. 22]

    Smartphone (please complete the following information):

    • Device: [e.g. iPhone6]
    • OS: [e.g. iOS8.1]
    • Browser [e.g. stock browser, safari]
    • Version [e.g. 22]

    Additional context Add any other context about the problem here.

    See http://g.co/androidstudio/manifest-merger for more information about the manifest merger.

    Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

    You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

    See https://docs.gradle.org/7.3.3/userguide/command_line_interface.html#sec:command_line_warnings 23 actionable tasks: 17 executed, 6 up-to-date Warning: This version only understands SDK XML versions up to 2 but an SDK XML file of version 3 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.
    Warning: unexpected element (uri:"", local:"base-extension"). Expected elements are <{}codename>,<{}layoutlib>,<{}api-level> C:\Users\user01\Documents\Absensi-Apps\Scan\android\app\src\debug\AndroidManifest.xml Error: uses-sdk:minSdkVersion 21 cannot be smaller than version 23 declared in library [:react-native-camera-kit] C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\react-native-camera-kit\android\build\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 21 Suggestion: use a compatible library with a minSdk of at most 21, or increase this project's minSdk version to at least 23, or use tools:overrideLibrary="com.rncamerakit" to force usage (may lead to runtime failures)

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':app:processDebugMainManifest'.

    Manifest merger failed : uses-sdk:minSdkVersion 21 cannot be smaller than version 23 declared in library [:react-native-camera-kit] C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\react-native-camera-kit\android\build\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 21 Suggestion: use a compatible library with a minSdk of at most 21, or increase this project's minSdk version to at least 23, or use tools:overrideLibrary="com.rncamerakit" to force usage (may lead to runtime failures)

    • Try:

    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 32s

    error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 Warning: This version only understands SDK XML versions up to 2 but an SDK XML file of version 3 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times.
    Warning: unexpected element (uri:"", local:"base-extension"). Expected elements are <{}codename>,<{}layoutlib>,<{}api-level> C:\Users\user01\Documents\Absensi-Apps\Scan\android\app\src\debug\AndroidManifest.xml Error: uses-sdk:minSdkVersion 21 cannot be smaller than version 23 declared in library [:react-native-camera-kit] C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\react-native-camera-kit\android\build\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 21 Suggestion: use a compatible library with a minSdk of at most 21, or increase this project's minSdk version to at least 23, or use tools:overrideLibrary="com.rncamerakit" to force usage (may lead to runtime failures)

    FAILURE: Build failed with an exception.

    • What went wrong: Execution failed for task ':app:processDebugMainManifest'.

    Manifest merger failed : uses-sdk:minSdkVersion 21 cannot be smaller than version 23 declared in library [:react-native-camera-kit] C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\react-native-camera-kit\android\build\intermediates\merged_manifest\debug\AndroidManifest.xml as the library might be using APIs not available in 21 Suggestion: use a compatible library with a minSdk of at most 21, or increase this project's minSdk version to at least 23, or use tools:overrideLibrary="com.rncamerakit" to force usage (may lead to runtime failures)

    • Try:

    Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

    • Get more help at https://help.gradle.org

    BUILD FAILED in 32s

    at makeError (C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\execa\index.js:174:9)
    at C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\execa\index.js:278:16
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async runOnAllDevices (C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5)
    at async Command.handleAction (C:\Users\user01\Documents\Absensi-Apps\Scan\node_modules\@react-native-community\cli\build\index.js:192:9)
    

    info Run CLI with --verbose flag for more details. error Command failed with exit code 1.

    Reviewed by PeaceAntoHim at 2022-04-08 08:09
📷 A React Native component providing images selection from camera roll
📷  A React Native component providing images selection from camera roll

react-native-camera-roll-picker CameraRoll Picker component for React native Requires react-native >=0.43.0 Add to Project Install component through n

Mar 31, 2022
A fully fledged audio module created for music apps. Provides audio playback, external media controls, chromecast support, background mode and more!
A fully fledged audio module created for music apps. Provides audio playback, external media controls, chromecast support, background mode and more!

A fully-fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more! ⚠️ V2 Migration Guide

May 12, 2022
Native Video editing/trimming/compressing :movie_camera: library for React-Native
Native Video editing/trimming/compressing  :movie_camera: library for React-Native

react-native-video-processing Getting Started npm install react-native-video-processing --save yarn add react-native-video-processing You can check te

May 9, 2022
Audio recorder library for React Native

Record audio in iOS or Android React Native apps. MAINTENANCE STATUS This project is no longer actively maintained by me, the original author. I will

May 9, 2022
Cross-platform audio library for React Native
Cross-platform audio library for React Native

This is a cross-platform (Android and iOS) audio library for React Native. Both audio playback and recording is supported. In addition to basic functi

May 8, 2022
A text-to-speech library for React Native.

React Native Speech React Native Speech is a text-to-speech library for React Native. Documentation Install Usage Example Methods License Install npm

Apr 5, 2022
A modern and comprehensive CameraRoll/iCloud-library-API for React Native 📸 📹

react-native-photos-framework Example project NOTE: This is not a GUI-component, it's an API. The example project just shows off some of the the capab

Apr 19, 2022
Small audio player library for react native

react-native-audioplayer Small audio player library for react native ##Installation First you need to install react-native-audioplayer: npm install re

Oct 26, 2021
This repo has been moved to https://github.com/react-native-webrtc/react-native-incall-manager

react-native-incall-manager Handling media-routes/sensors/events during a audio/video chat on React Native Purpose: The purpose of this module is to h

Dec 22, 2021
React Native module for playing sound clips
React Native module for playing sound clips

react-native-sound React Native module for playing sound clips on iOS, Android, and Windows. Be warned, this software is alpha quality and may have bu

May 11, 2022
iOS & Android react native module to play an audio stream, with background support and media controls
iOS & Android react native module to play an audio stream, with background support and media controls

react-native-audio-streaming THIS PROJECT IS NOT MAINTAINED react-native-audio-streaming is not maintained anymore. The main purpose was to play shout

Mar 25, 2022
Media player for React Native

React-Native-Player Media Player for React-Native Only Android support now. Integrate Android Install via npm npm i react-native-player --save-dev Add

Mar 24, 2021
VLC Player for react-native

react-native-vlc-player Getting started $ npm install react-native-vlc-player --save Dependencies $ npm install react-native-vector-icons --save Manua

Mar 27, 2022
React Native VolumeView component
React Native VolumeView component

React Native VolumeSlider component MPVolumeView bridge to React Native (NOTE: MPVolumeView works only on physical devices) Default styles Custom styl

Jun 30, 2021
react-native-sound demo project for iOS and Android
react-native-sound demo project for iOS and Android

react-native-sound-demo react-native-sound demo project for iOS and Android. There are a series of basic test for different audio formats and location

Mar 31, 2022
🖼 A React Native component to display a gallery of images.
🖼 A React Native component to display a gallery of images.

react-native-interactive-image-gallery A React Native component to display a gallery of images. Getting started $ yarn addreact-native-interactive-ima

May 14, 2022
React native component for finding dominant colors in an image
React native component for finding dominant colors in an image

React native color grabber Given an image, returns dominant colors Install: npm install react-native-color-grabber --save Add node_modules/color-grabb

Dec 21, 2021
react-native-hue-player - HUE Player is intended to projects that need to deal with both offline/local and online/streaming audio.
react-native-hue-player - HUE Player is intended to projects that need to deal with both offline/local and online/streaming audio.

react-native-hue-player HUE Player is intended to projects that need to deal with both offline/local and online/streaming audio. Now you can play, pau

Sep 21, 2021
Get media file metadata in your React Native app

React Native Media Meta Get media file metadata in your React Native app Installation $ npm install react-native-media-meta --save $ react-native link

Feb 26, 2022