Merge pull request #344 from aarongrider/api-fixes
Misc fixes and improvements
This commit is contained in:
Aaron Grider
GitHub
commit
f621232fe6
79
README.md
79
README.md
@ -46,9 +46,54 @@ cd ios && pod install && cd ..
|
||||
- `yarn bootstrap`
|
||||
- `yarn example ios` or `yarn example android`
|
||||
|
||||
## APIs
|
||||
## Components
|
||||
|
||||
### Camera - Base Camera component
|
||||
### CameraScreen
|
||||
|
||||
Full screen camera component that holds camera state and provides camera controls
|
||||
|
||||
```js
|
||||
import { CameraScreen } from 'react-native-camera-kit';
|
||||
```
|
||||
|
||||
```jsx
|
||||
<CameraScreen
|
||||
actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
|
||||
onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
|
||||
cameraOptions={{ flashMode: 'auto', focusMode: 'on', zoomMode: 'on' }}
|
||||
flashImages={{
|
||||
on: require('path/to/image'),
|
||||
off: require('path/to/image'),
|
||||
auto: require('path/to/image'),
|
||||
}}
|
||||
cameraFlipImage={require('path/to/image')}
|
||||
captureButtonImage={require('path/to/image')}
|
||||
/>
|
||||
```
|
||||
|
||||
#### Barcode / QR Code Scanning
|
||||
|
||||
Additionally, the camera screen can be used for barcode scanning
|
||||
|
||||
```js
|
||||
<CameraScreen
|
||||
...
|
||||
// Barcode props
|
||||
scanBarcode={true}
|
||||
laserColor={'blue'}
|
||||
frameColor={'yellow'}
|
||||
onReadCode={(event) => Alert.alert('Qr code found')} //optional
|
||||
hideControls={false} //(default false) optional, hide buttons and additional controls on top and bottom of screen
|
||||
showFrame={true} //(default false) optional, show frame with transparent layer (qr code or barcode will be read on this area ONLY), start animation for scanner,that stoped when find any code. Frame always at center of the screen
|
||||
offsetForScannerFrame={10} //(default 30) optional, offset from left and right side of the screen
|
||||
heightForScannerFrame={300} //(default 200) optional, change height of the scanner frame
|
||||
colorForScannerFrame={'red'} //(default white) optional, change colot of the scanner frame
|
||||
/>
|
||||
```
|
||||
|
||||
### Camera
|
||||
|
||||
Barebones camera component
|
||||
|
||||
```js
|
||||
import { Camera } from 'react-native-camera-kit';
|
||||
@ -56,7 +101,7 @@ import { Camera } from 'react-native-camera-kit';
|
||||
|
||||
```jsx
|
||||
<Camera
|
||||
ref={(ref) => this.camera = ref}
|
||||
ref={(ref) => (this.camera = ref)}
|
||||
type={CameraType.Back} // front/back(default)
|
||||
style={{ flex: 1 }}
|
||||
/>
|
||||
@ -68,7 +113,7 @@ import { Camera } from 'react-native-camera-kit';
|
||||
| ------------------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `flashMode` | `'on'`/`'off'`/`'auto'` | Camera flash mode. Default: `auto` |
|
||||
| `focusMode` | `'on'`/`'off'` | Camera focus mode. Default: `on` |
|
||||
| `zoomMode` | `'on'`/`'off'` | iOS only. Enable pinch to zoom camera. Default: `on` |
|
||||
| `zoomMode` | `'on'`/`'off'` | Enable pinch to zoom camera. Default: `on` |
|
||||
| `ratioOverlay` | `['int':'int', ...]` | Show a guiding overlay in the camera preview for the selected ratio. Does not crop image as of v9.0. Example: `['16:9', '1:1', '3:4']` |
|
||||
| `ratioOverlayColor` | Color | Any color with alpha. Default: `'#ffffff77'` |
|
||||
| `resetFocusTimeout` | Number | iOS only. Dismiss tap to focus after this many milliseconds. Default `0` (disabled). Example: `5000` is 5 seconds. |
|
||||
@ -87,9 +132,11 @@ import { Camera } from 'react-native-camera-kit';
|
||||
| `surfaceColor` | Color | Color of barcode scanner surface visualization. Default: `blue` |
|
||||
| `onReadCode` | Function | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)}` |
|
||||
|
||||
### Camera API
|
||||
### Imperative API
|
||||
|
||||
#### capture({ ... }) - must have the wanted camera capture reference
|
||||
_Note: Must be called on a valid camera ref_
|
||||
|
||||
#### capture({ ... })
|
||||
|
||||
Capture image (`{ saveToCameraRoll: boolean }`). Using the camera roll is slower than using regular files stored in your app. On an iPhone X in debug mode, on a real phone, we measured around 100-150ms processing time to save to the camera roll.
|
||||
|
||||
@ -121,26 +168,6 @@ const isUserAuthorizedCamera = await Camera.requestDeviceCameraAuthorization();
|
||||
|
||||
otherwise, returns `false`
|
||||
|
||||
## QR Code
|
||||
|
||||
```js
|
||||
import { CameraScreen } from 'react-native-camera-kit';
|
||||
|
||||
<CameraScreen
|
||||
actions={{ rightButtonText: 'Done', leftButtonText: 'Cancel' }}
|
||||
onBottomButtonPressed={(event) => this.onBottomButtonPressed(event)}
|
||||
scanBarcode={true}
|
||||
laserColor={'blue'}
|
||||
frameColor={'yellow'}
|
||||
onReadCode={(event) => Alert.alert('Qr code found')} //optional
|
||||
hideControls={false} //(default false) optional, hide buttons and additional controls on top and bottom of screen
|
||||
showFrame={true} //(default false) optional, show frame with transparent layer (qr code or barcode will be read on this area ONLY), start animation for scanner,that stoped when find any code. Frame always at center of the screen
|
||||
offsetForScannerFrame={10} //(default 30) optional, offset from left and right side of the screen
|
||||
heightForScannerFrame={300} //(default 200) optional, change height of the scanner frame
|
||||
colorForScannerFrame={'red'} //(default white) optional, change colot of the scanner frame
|
||||
/>;
|
||||
```
|
||||
|
||||
## Contributing
|
||||
|
||||
- Pull Requests are welcome, if you open a pull request we will do our best to get to it in a timely manner
|
||||
|
||||
@ -134,6 +134,7 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
|
||||
|
||||
val onScaleGestureListener = object: ScaleGestureDetector.SimpleOnScaleGestureListener() {
|
||||
override fun onScale(detector: ScaleGestureDetector?): Boolean {
|
||||
if (zoomMode == "off") return true
|
||||
val cameraControl = camera?.cameraControl ?: return true
|
||||
val zoom = camera?.cameraInfo?.zoomState?.value?.zoomRatio ?: return true
|
||||
val scaleFactor = detector?.scaleFactor ?: return true
|
||||
@ -386,14 +387,6 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
|
||||
|
||||
fun setZoomMode(mode: String = "on") {
|
||||
zoomMode = mode
|
||||
when(mode) {
|
||||
"on" -> {
|
||||
// TODO: Add gesture detector
|
||||
}
|
||||
"off" -> {
|
||||
// TODO: Remove gesture detector
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
fun setScanBarcode(enabled: Boolean) {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import * as _ from 'lodash';
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { requireNativeComponent, NativeModules, processColor } from 'react-native';
|
||||
|
||||
const { CKCameraManager } = NativeModules;
|
||||
@ -8,14 +8,6 @@ const NativeCamera = requireNativeComponent('CKCamera');
|
||||
function Camera(props, ref) {
|
||||
const nativeRef = React.useRef();
|
||||
|
||||
useEffect(() => {
|
||||
CKCameraManager.changeCamera();
|
||||
}, [props.type]);
|
||||
|
||||
useEffect(() => {
|
||||
CKCameraManager.setFlashMode(props.flashMode);
|
||||
}, [props.flashMode]);
|
||||
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
capture: async () => {
|
||||
return await CKCameraManager.capture({});
|
||||
@ -26,15 +18,6 @@ function Camera(props, ref) {
|
||||
checkDeviceCameraAuthorizationStatus: async () => {
|
||||
return await CKCameraManager.checkDeviceCameraAuthorizationStatus();
|
||||
},
|
||||
changeCamera: async () => {
|
||||
return await CKCameraManager.changeCamera();
|
||||
},
|
||||
setFlashMode: async (flashMode = 'auto') => {
|
||||
return await CKCameraManager.setFlashMode(flashMode);
|
||||
},
|
||||
setTorchMode: async (torchMode = '') => {
|
||||
return await CKCameraManager.setTorchMode(torchMode);
|
||||
},
|
||||
}));
|
||||
|
||||
const transformedProps = _.cloneDeep(props);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user