react-native-camera-kit

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','16:9','3:4'], // 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 flesh 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>')}
/>