33acc12955 | ||
---|---|---|
android | ||
example | ||
img | ||
ios/lib | ||
src | ||
.flowconfig | ||
.gitignore | ||
.npmignore | ||
.watchmanconfig | ||
LICENSE | ||
README.md | ||
index.android.js | ||
index.ios.js | ||
package.json |
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>')}
/>