From 7dafa09114034b41195f30fd8b52724495e9b476 Mon Sep 17 00:00:00 2001 From: aarongrider Date: Tue, 5 Jan 2021 13:29:25 -0800 Subject: [PATCH 1/3] Remove extra imperative references --- src/Camera.ios.tsx | 19 +------------------ 1 file changed, 1 insertion(+), 18 deletions(-) diff --git a/src/Camera.ios.tsx b/src/Camera.ios.tsx index d8ebed2..90013c5 100644 --- a/src/Camera.ios.tsx +++ b/src/Camera.ios.tsx @@ -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); From 2594fd4f03c0dd2e227b5ce4ac836bbd2e3f2bb2 Mon Sep 17 00:00:00 2001 From: aarongrider Date: Tue, 5 Jan 2021 15:39:04 -0800 Subject: [PATCH 2/3] Implement zoom mode toggle for Android --- README.md | 4 ++-- android/src/main/java/com/rncamerakit/CKCamera.kt | 9 +-------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 8d9c9e9..ad798f2 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ import { Camera } from 'react-native-camera-kit'; ```jsx this.camera = ref} + ref={(ref) => (this.camera = ref)} type={CameraType.Back} // front/back(default) style={{ flex: 1 }} /> @@ -68,7 +68,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. | diff --git a/android/src/main/java/com/rncamerakit/CKCamera.kt b/android/src/main/java/com/rncamerakit/CKCamera.kt index bdd077f..60b82c5 100644 --- a/android/src/main/java/com/rncamerakit/CKCamera.kt +++ b/android/src/main/java/com/rncamerakit/CKCamera.kt @@ -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) { From 0cb607e51b7547823dc81cd771284da3f8954f0a Mon Sep 17 00:00:00 2001 From: aarongrider Date: Tue, 5 Jan 2021 16:06:42 -0800 Subject: [PATCH 3/3] Update readme --- README.md | 75 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 51 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index ad798f2..2f454d3 100644 --- a/README.md +++ b/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 + 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 + 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'; @@ -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'; - - 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