A high performance, easy to use, rock solid camera library for React Native apps.
Go to file
Amit Davidi 1754c12cdd Android: Add support in selection image positioning and size-type 2017-03-01 09:19:58 +02:00
android Android: Add support in selection image positioning and size-type 2017-03-01 09:19:58 +02:00
example Android: Integrate press handlers to dispatch example logs 2017-02-28 17:32: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 Android: Add support in selection image positioning and size-type 2017-03-01 09:19:58 +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 add dev dependency 2017-02-28 15:56:41 +02:00
yarn.lock add yarn install to root dir 2017-02-28 15:57:30 +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>')}
/>