A high performance, easy to use, rock solid camera library for React Native apps.
Go to file
Ran Greenberg 74ec3e09da custom button in the grid now will open the camera screen (iOS only) 2017-02-28 15:43:33 +02:00
android Android: Add support for custom-button on-press JS callback + refactoring and cleanup 2017-02-28 15:00:26 +02:00
example custom button in the grid now will open the camera screen (iOS only) 2017-02-28 15:43:33 +02:00
img update README.md 2016-08-01 16:06:09 +03:00
ios/lib add custom button support 2017-02-28 15:29:52 +02:00
src Merge branch 'master' of https://github.com/wix/react-native-camera-kit 2017-02-28 15:30:39 +02:00
.flowconfig Camera kit initial commit 2016-04-14 10:44:00 +03:00
.gitignore pruned gitignored commited files 2016-08-23 16:06:59 +03:00
.npmignore npmignore 2016-08-21 17:50:42 +03:00
.watchmanconfig Camera kit initial commit 2016-04-14 10:44:00 +03:00
LICENSE Create LICENSE 2016-04-14 14:39:54 +03:00
README.md Merge pull request #5 from ptomasroos/patch-1 2016-09-25 10:08:06 +03:00
index.android.js Android Camera component 2016-07-04 14:10:21 +03:00
index.ios.js changes for android new branch 2016-06-29 16:12:53 +03:00
package.json 5.0.0 2017-02-26 12:00:11 +02:00

README.md

react-native-camera-kit

Native camera control.

Install

Install using npm:

npm install react-native-camera-kit --save

####IOS

  • Locate the module lib folder in your node modules: PROJECT_DIR/node_modules/react-native-camera-kit/lib
  • Drag the ReactNativeCameraKit.xcodeproj project file into your project
  • Add libReactNativeCameraKit.a to all your target Linked Frameworks and Libraries (prone to be forgotten)

####Android Add

        include ':rncamerakit'
        project(':rncamerakit').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera-kit/android/')

to your project's settings.gradle

Then add

        compile project(":rncamerakit")

to your app app/build.gradle in the dependencies section.

Then in MainActivity.java add:

        import com.wix.RNCameraKit.RNCameraKitPackage;

and in getPackages add

        new RNCameraKitPackage() 

to the list

How to use

###CameraKitCamera inside the render function

<CameraKitCamera
        ref={(cam) => {
        					this.camera = cam;
        					}
        		}
        style={{flex: 1, backgroundColor:'white'}}
        cameraOptions={{
                    flashMode: 'auto',             // 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
                    }}
/>

###CameraKitCamera cameraOptions

Attribute type values description
flashMode [String] 'on'/'off'/'auto' camera flash mode (default is auto)
focusMode [String] 'on'/'off' camera focus mode (default is on)
zoomMode [String] 'on'/'off'/ camera zoom mode
ratioOverlay [Array] 'number':'number' overlay ontop of the camera view (crop the image to the selected size) Example: ['16:9', '1:1', '3:4']
ratioOverlayColor [Color] '#ffffff77' any color with alpha (default is '#ffffff77')

###CameraKitCamera API

####checkDeviceCameraAuthorizationStatus

const isCameraAuthorized = await CameraKitCamera.checkDeviceCameraAuthorizationStatus();

return values:

AVAuthorizationStatusAuthorized returns true

AVAuthorizationStatusNotDetermined returns -1

otherwise, returns false

####requestDeviceCameraAuthorization

const isUserAuthorizedCamera = await CameraKitCamera.requestDeviceCameraAuthorization();

AVAuthorizationStatusAuthorized returns true

otherwise, returns false

####capture Capture image

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

####setFlashMode

Set flash mode (auto/on/off)

const success = await this.camera.setFlashMode(newFlashData.mode);

####changeCamera

Change to fornt/rear camera

const success = await this.camera.changeCamera();

###CameraKitGalleryView

Native Gallery View (based on UICollectionView)

README in progress :)

<CameraKitGalleryView
          ref={(gallery) => {
              this.gallery = gallery;
             }}
          style={{flex: 1, marginTop: 20}}
          minimumInteritemSpacing={10}
          minimumLineSpacing={10}
          albumName={<ALBUM_NAME>}
          columnCount={3}
          onTapImage={(event) => {
              //result.nativeEvent.selected - ALL selected images Photos Framework ids
          }}
          selectedImages={<MAINTAIN_SELECETED_IMAGES>}
          selectedImageIcon={require('<IMAGE_FILE_PATH>'))}
          unSelectedImageIcon={require('<IMAGE_FILE_PATH>')}
/>