[BREAKGLASS] Append-only mirror of github.com/bluewallet/react-native-camera-kit
Go to file
Guy Carmeli 1e7e298ca5 Add dirtyImages property to GalleryView
This change is needed since when editing an image and the corresponding
uri doesn’t change, the images thumbnail wouldn't redraw.
2016-11-23 17:27:18 +02:00
android Add dirtyImages property to GalleryView 2016-11-23 17:27:18 +02:00
example fix example project dependencies 2016-11-20 17:34:01 +02:00
img update README.md 2016-08-01 16:06:09 +03:00
ios/lib added disableSelectionIcons 2016-11-21 12:11:05 +02:00
src Add dirtyImages property to GalleryView 2016-11-23 17:27:18 +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
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
LICENSE Create LICENSE 2016-04-14 14:39:54 +03:00
package.json 4.0.1 2016-11-21 16:41:27 +02:00
README.md Merge pull request #5 from ptomasroos/patch-1 2016-09-25 10:08:06 +03:00

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>')}
/>