From 05c8f1862c6b27439340a83434ad4ab0331ce904 Mon Sep 17 00:00:00 2001 From: David Bertet Date: Fri, 2 Jun 2023 02:07:18 -0700 Subject: [PATCH 1/2] Improve type definition --- README.md | 116 +++++++++++++++--------- example/src/CameraExample.tsx | 2 +- example/src/CameraScreenExample.tsx | 2 +- src/Camera.android.tsx | 15 ++-- src/Camera.d.ts | 41 ++++++++- src/Camera.ios.tsx | 18 ++-- src/CameraScreen.tsx | 131 ++++++++++++++-------------- src/index.ts | 6 +- src/types.ts | 31 ++++++- 9 files changed, 226 insertions(+), 136 deletions(-) diff --git a/README.md b/README.md index be9219d560..e45fab7770 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Add the following usage descriptions to your `Info.plist` (usually found at: `io ### CameraScreen -Full screen camera component that holds camera state and provides camera controls +Full screen camera component that holds camera state and provides common camera controls. Works for most needs ```ts import { CameraScreen } from 'react-native-camera-kit'; @@ -84,29 +84,55 @@ import { CameraScreen } from 'react-native-camera-kit'; ```tsx this.onBottomButtonPressed(event)} flashImages={{ - // optional, images for flash state + // optional, images for flash state button on: require('path/to/image'), off: require('path/to/image'), auto: require('path/to/image'), }} + flashImageStyle={} // optional, ImageStyle applied to flashImages cameraFlipImage={require('path/to/image')} // optional, image for flipping camera button + cameraFlipImageStyle={} // optional, ImageStyle applied to cameraFlipImage captureButtonImage={require('path/to/image')} // optional, image capture button + captureButtonImageStyle={} // optional, ImageStyle applied to captureButtonImage torchOnImage={require('path/to/image')} // optional, image for toggling on flash light torchOffImage={require('path/to/image')} // optional, image for toggling off flash light + torchImageStyle={} // optional, ImageStyle applied to torchImage hideControls={false} // (default false) optional, hides camera controls showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session + cameraRatioOverlay // optional + allowCaptureRetake={false} // (default false) optional, ask for picture validation +/> +``` + +### Camera + +Barebones camera component if you need advanced/customized interface + +```ts +import { Camera, CameraType } from 'react-native-camera-kit'; +``` + +```tsx + (this.camera = ref)} + cameraType={CameraType.Back} // front/back(default) + flashMode='auto' /> ``` #### Barcode / QR Code Scanning -Additionally, the camera screen can be used for barcode scanning +Additionally, the Camera / CameraScreen can be used for barcode scanning ```tsx - ``` -### Camera - -Barebones camera component - -```ts -import { Camera, CameraType } from 'react-native-camera-kit'; -``` - -```tsx - (this.camera = ref)} - cameraType={CameraType.Back} // front/back(default) -/> -``` +### CameraScreen Props (Optional) + +| Props | Type | Description | +| ------------------------- | ------------------------------------ | ------------------------------------------------------------------------------------------ | +| All Camera Props | | | +| `actions` | Actions | Labels for the buttons visible on screen | +| `onBottomButtonPressed` | `(event: BottomPressedData) => void` | Callback called when a button is pressed. `BottomPressedData` contains the data to consume | +| `flashImages` | FlashImages | Images for flash state button. Default: none, button is hidden | +| `flashImageStyle` | ImageStyle | ImageStyle applied to flashImages | +| `cameraFlipImage` | ImageSourcePropType | Image for flipping camera button. Default: none, button is hidden | +| `cameraFlipImageStyle` | ImageStyle | ImageStyle applied to cameraFlipImage | +| `captureButtonImage` | ImageSourcePropType | Image for capture button. Default: none, button is hidden | +| `captureButtonImageStyle` | ImageStyle | ImageStyle applied to captureButtonImage | +| `torchOnImage` | ImageSourcePropType | Image for toggling on flash light. Default: none, button is hidden | +| `torchOffImage` | ImageSourcePropType | Image for toggling off flash light. Default: none, button is hidden | +| `torchImageStyle` | ImageStyle | ImageStyle applied to torchOnImage/torchOffImage | +| `hideControls` | Boolean | Hides camera controls Default: `false` | +| `showCapturedImageCount` | Boolean | Show count for photos taken during that capture session. Default: `false` | +| `cameraRatioOverlay` | CameraRatioOverlay | | +| `allowCaptureRetake` | Boolean | Ask for picture validation. Default: `false` | ### Camera Props (Optional) -| Props | Type | Description | -| ------------------------------ | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `flashMode` | `'on'`/`'off'`/`'auto'` | Camera flash mode. Default: `auto` | -| `focusMode` | `'on'`/`'off'` | Camera focus mode. Default: `on` | -| `zoomMode` | `'on'`/`'off'` | Enable pinch to zoom camera. Default: `on` | -| `torchMode` | `'on'`/`'off'` | Toggle flash light when camera is active. Default: `off` | -| `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. | -| `resetFocusWhenMotionDetected` | Boolean | **iOS only.** Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default `true`. | -| `onOrientationChange` | Function | Callback when physical device orientation changes. Returned event contains `orientation`. Ex: `onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}`. Use `import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... }` to understand the new value | - -### Barcode Props (Optional) - -| Props | Type | Description | -| -------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `scanBarcode` | Boolean | Enable barcode scanner. Default: `false` | -| `showFrame` | Boolean | Show frame in barcode scanner. Default: `false` | -| `laserColor` | Color | Color of barcode scanner laser visualization. Default: `red` | -| `frameColor` | Color | Color of barcode scanner frame visualization. Default: `yellow` | -| `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)}` | +| Props | Type | Description | +| ------------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ref` | Ref | Reference on the camera view | +| `style` | StyleProp\ | Style to apply on the camera view | +| `flashMode` | `'on'`/`'off'`/`'auto'` | Camera flash mode. Default: `auto` | +| `focusMode` | `'on'`/`'off'` | Camera focus mode. Default: `on` | +| `zoomMode` | `'on'`/`'off'` | Enable pinch to zoom camera. Default: `on` | +| `torchMode` | `'on'`/`'off'` | Toggle flash light when camera is active. Default: `off` | +| `cameraType` | CameraType.Back/CameraType.Front | Choose what camera to use. Default: `CameraType.Back` | +| `onOrientationChange` | Function | Callback when physical device orientation changes. Returned event contains `orientation`. Ex: `onOrientationChange={(event) => console.log(event.nativeEvent.orientation)}`. Use `import { Orientation } from 'react-native-camera-kit'; if (event.nativeEvent.orientation === Orientation.PORTRAIT) { ... }` to understand the new value | +| **iOS only** | +| `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 | Dismiss tap to focus after this many milliseconds. Default `0` (disabled). Example: `5000` is 5 seconds. | +| `resetFocusWhenMotionDetected` | Boolean | Dismiss tap to focus when focus area content changes. Native iOS feature, see documentation: https://developer.apple.com/documentation/avfoundation/avcapturedevice/1624644-subjectareachangemonitoringenabl?language=objc). Default `true`. | +| **Barcode only** | +| `scanBarcode` | Boolean | Enable barcode scanner. Default: `false` | +| `showFrame` | Boolean | Show frame in barcode scanner. Default: `false` | +| `laserColor` | Color | Color of barcode scanner laser visualization. Default: `red` | +| `frameColor` | Color | Color of barcode scanner frame visualization. Default: `yellow` | +| `onReadCode` | Function | Callback when scanner successfully reads barcode. Returned event contains `codeStringValue`. Default: `null`. Ex: `onReadCode={(event) => console.log(event.nativeEvent.codeStringValue)}` | ### Imperative API @@ -165,7 +196,7 @@ _Note: Must be called on a valid camera ref_ Capture image as JPEG. -A temporary file is created. You *must* move this file to a permanent location (e.g. the app's 'Documents' folder) if you need it beyond the current session of the app as it may be deleted when the user leaves the app. You can move files by using a file system library such as [react-native-fs](https://github.com/itinance/react-native-fs) or [expo-filesystem](https://docs.expo.io/versions/latest/sdk/filesystem/). +A temporary file is created. You _must_ move this file to a permanent location (e.g. the app's 'Documents' folder) if you need it beyond the current session of the app as it may be deleted when the user leaves the app. You can move files by using a file system library such as [react-native-fs](https://github.com/itinance/react-native-fs) or [expo-filesystem](https://docs.expo.io/versions/latest/sdk/filesystem/). (On Android we currently have an unsupported `outputPath` prop but it's subject to change at any time). Note that the reason you're getting a URL despite it being a file is because Android 10+ encourages URIs. To keep things consistent regardless of settings or platform we always send back a URI. @@ -176,6 +207,7 @@ const { uri } = await this.camera.capture(); ``` If you want to store it permanently, here's an example using [react-native-fs](https://github.com/itinance/react-native-fs): + ```ts import RNFS from 'react-native-fs'; // [...] diff --git a/example/src/CameraExample.tsx b/example/src/CameraExample.tsx index fb121df761..290b352c69 100644 --- a/example/src/CameraExample.tsx +++ b/example/src/CameraExample.tsx @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { View, StyleSheet } from 'react-native'; import Camera from '../../src/Camera'; -import { CameraType } from '../../src/CameraScreen'; +import { CameraType } from '../../src/types'; export default class CameraExample extends Component { render() { diff --git a/example/src/CameraScreenExample.tsx b/example/src/CameraScreenExample.tsx index 973c54cb21..0ea9522cc9 100644 --- a/example/src/CameraScreenExample.tsx +++ b/example/src/CameraScreenExample.tsx @@ -16,7 +16,7 @@ export default class CameraScreenExample extends Component { render() { return ( this.onBottomButtonPressed(event)} flashImages={{ on: require('../images/flashOn.png'), diff --git a/src/Camera.android.tsx b/src/Camera.android.tsx index 96c367a801..a69e58bcf2 100644 --- a/src/Camera.android.tsx +++ b/src/Camera.android.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import _update from 'lodash/update'; import _cloneDeep from 'lodash/cloneDeep'; import { requireNativeComponent, findNodeHandle, NativeModules, processColor } from 'react-native'; import { CameraApi } from './types'; +import { CameraProps } from './Camera'; const { RNCameraKitModule } = NativeModules; const NativeCamera = requireNativeComponent('CKCameraManager'); -const Camera = React.forwardRef((props: any, ref) => { +const Camera = React.forwardRef((props: CameraProps, ref) => { const nativeRef = React.useRef(); React.useImperativeHandle(ref, () => ({ @@ -16,7 +16,7 @@ const Camera = React.forwardRef((props: any, ref) => { // we must use the general module and tell it what View it's supposed to be using return await RNCameraKitModule.capture(options, findNodeHandle(nativeRef.current ?? null)); }, - setTorchMode: (mode = "off") => { + setTorchMode: (mode = 'off') => { RNCameraKitModule.setTorchMode(mode, findNodeHandle(nativeRef.current ?? null)); }, requestDeviceCameraAuthorization: () => { @@ -27,11 +27,10 @@ const Camera = React.forwardRef((props: any, ref) => { }, })); - const transformedProps = _cloneDeep(props); - _update(transformedProps, 'cameraOptions.ratioOverlayColor', (c) => processColor(c)); - _update(transformedProps, 'frameColor', (c) => processColor(c)); - _update(transformedProps, 'laserColor', (c) => processColor(c)); - _update(transformedProps, 'surfaceColor', (c) => processColor(c)); + const transformedProps: CameraProps = _cloneDeep(props); + transformedProps.ratioOverlayColor = processColor(props.ratioOverlayColor); + transformedProps.frameColor = processColor(props.frameColor); + transformedProps.laserColor = processColor(props.laserColor); return ( >; + style?: StyleProp; + // Behavior + flashMode?: FlashMode; + focusMode?: FocusMode; + zoomMode?: ZoomMode; + torchMode?: TorchMode; + cameraType?: CameraType; + onOrientationChange?: (event: OnOrientationChangeData) => void; + // Barcode only + scanBarcode?: boolean; + showFrame?: boolean; + laserColor?: number | string; + frameColor?: number | string; + onReadCode?: (event: OnReadCodeData) => void; + // Specific to iOS + ratioOverlay?: string; + ratioOverlayColor?: number | string; + resetFocusTimeout?: number; + resetFocusWhenMotionDetected?: boolean; +} + +declare const Camera: React.FC; + export default Camera; diff --git a/src/Camera.ios.tsx b/src/Camera.ios.tsx index 2a87a17571..3762e76d67 100644 --- a/src/Camera.ios.tsx +++ b/src/Camera.ios.tsx @@ -1,20 +1,20 @@ -import _update from 'lodash/update'; import _cloneDeep from 'lodash/cloneDeep'; import React from 'react'; import { requireNativeComponent, NativeModules, processColor } from 'react-native'; import { CameraApi } from './types'; +import { CameraProps } from './Camera'; const { CKCameraManager } = NativeModules; const NativeCamera = requireNativeComponent('CKCamera'); -const Camera = React.forwardRef((props: any, ref: any) => { +const Camera = React.forwardRef((props: CameraProps, ref: any) => { const nativeRef = React.useRef(); React.useImperativeHandle(ref, () => ({ capture: async () => { return await CKCameraManager.capture({}); }, - setTorchMode: (mode = "off") => { + setTorchMode: (mode = 'off') => { CKCameraManager.setTorchMode(mode); }, requestDeviceCameraAuthorization: async () => { @@ -25,16 +25,10 @@ const Camera = React.forwardRef((props: any, ref: any) => { }, })); - const transformedProps = _cloneDeep(props); - _update(transformedProps, 'cameraOptions.ratioOverlayColor', (c: any) => processColor(c)); + const transformedProps: CameraProps = _cloneDeep(props); + transformedProps.ratioOverlayColor = processColor(props.ratioOverlayColor); - return ( - - ); + return ; }); Camera.defaultProps = { diff --git a/src/CameraScreen.tsx b/src/CameraScreen.tsx index 78b80ee1a0..a3118147b4 100644 --- a/src/CameraScreen.tsx +++ b/src/CameraScreen.tsx @@ -13,73 +13,73 @@ import { ImageSourcePropType, } from 'react-native'; import _ from 'lodash'; -import Camera from './Camera'; - -const FLASH_MODE_AUTO = 'auto'; -const FLASH_MODE_ON = 'on'; -const FLASH_MODE_OFF = 'off'; +import Camera, { CameraProps } from './Camera'; +import { CameraApi, CameraType, CaptureData, FlashMode } from './types'; const { width, height } = Dimensions.get('window'); -export enum CameraType { - Front = 'front', - Back = 'back', -} - -export type ActionsT = { +type Actions = { leftButtonText?: string; - rightButtonText?: string; + leftCaptureRetakeButtonText?: string; }; -export type CameraRatioOverlayT = { +type CameraRatioOverlay = { ratios: string[]; }; -export type FlashImagesT = { - on: number | string; - off: number | string; - auto: number | string; +type FlashImages = { + on: ImageSourcePropType; + off: ImageSourcePropType; + auto: ImageSourcePropType; }; -export type Props = { - actions?: ActionsT; - flashImages?: FlashImagesT; - focusMode?: string; - zoomMode?: string; - ratioOverlay?: string; - ratioOverlayColor?: string; - allowCaptureRetake?: boolean; - cameraRatioOverlay?: CameraRatioOverlayT; - showCapturedImageCount?: boolean; +type BottomButtonTypes = 'left' | 'capture'; + +type BottomPressedData = { + type: BottomButtonTypes; + captureImages: CaptureData[]; + captureRetakeMode: boolean; + image?: CaptureData; +}; + +type CameraScreenProps = CameraProps & { + // Controls + actions?: Actions; + flashImages?: FlashImages; + flashImageStyle?: ImageStyle; + torchOnImage?: ImageSourcePropType; + torchOffImage?: ImageSourcePropType; + torchImageStyle?: ImageStyle; captureButtonImage?: ImageSourcePropType; captureButtonImageStyle?: ImageStyle; cameraFlipImage?: ImageSourcePropType; cameraFlipImageStyle?: ImageStyle; hideControls?: boolean; - showFrame?: boolean; - scanBarcode?: boolean; - laserColor?: string; - frameColor?: string; - torchOnImage?: any; - torchOffImage?: any; - cameraType?: CameraType; - torchImageStyle?: ImageStyle; - onReadCode?: (event: any) => void; - onBottomButtonPressed?: (event: any) => void; + onBottomButtonPressed?: (event: BottomPressedData) => void; + // Overlay + cameraRatioOverlay?: CameraRatioOverlay; + showCapturedImageCount?: boolean; + // Behavior + allowCaptureRetake?: boolean; +}; + +type FlashData = { + mode: FlashMode; + image?: ImageSourcePropType; }; type State = { - captureImages: any[]; - flashData: any; + captureImages: CaptureData[]; + flashData?: FlashData; torchMode: boolean; - ratios: any[]; + ratios: string[]; ratioArrayPosition: number; - imageCaptured: any; + imageCaptured?: CaptureData; captured: boolean; cameraType: CameraType; }; -export default class CameraScreen extends Component { +export default class CameraScreen extends Component { static propTypes = { allowCaptureRetake: PropTypes.bool, }; @@ -89,24 +89,24 @@ export default class CameraScreen extends Component { }; currentFlashArrayPosition: number; - flashArray: any[]; - camera: any; + flashArray: FlashData[]; + camera: CameraApi; - constructor(props: Props) { + constructor(props: CameraScreenProps) { super(props); this.currentFlashArrayPosition = 0; this.flashArray = [ { - mode: FLASH_MODE_AUTO, - image: _.get(props, 'flashImages.auto'), + mode: 'auto', + image: props.flashImages?.auto, }, { - mode: FLASH_MODE_ON, - image: _.get(props, 'flashImages.on'), + mode: 'on', + image: props.flashImages?.on, }, { - mode: FLASH_MODE_OFF, - image: _.get(props, 'flashImages.off'), + mode: 'off', + image: props.flashImages?.off, }, ]; @@ -116,20 +116,20 @@ export default class CameraScreen extends Component { torchMode: false, ratios: [], ratioArrayPosition: -1, - imageCaptured: false, + imageCaptured: undefined, captured: false, cameraType: CameraType.Back, }; } componentDidMount() { - let ratios: string | any[] = []; + let ratios: string[] = []; if (this.props.cameraRatioOverlay) { ratios = this.props.cameraRatioOverlay.ratios || []; } // eslint-disable-next-line react/no-did-mount-set-state this.setState({ - ratios: ratios || [], + ratios: ratios, ratioArrayPosition: ratios.length > 0 ? 0 : -1, }); } @@ -140,10 +140,11 @@ export default class CameraScreen extends Component { renderFlashButton() { return ( + this.state.flashData?.image && !this.isCaptureRetakeMode() && ( this.onSetFlash()}> @@ -154,6 +155,8 @@ export default class CameraScreen extends Component { renderTorchButton() { return ( + this.props.torchOnImage && + this.props.torchOffImage && !this.isCaptureRetakeMode() && ( this.onSetTorch()}> { !this.isCaptureRetakeMode() && ( this.onSwitchCameraPressed()}> @@ -196,14 +199,14 @@ export default class CameraScreen extends Component { renderCamera() { return ( - {this.isCaptureRetakeMode() ? ( + {this.isCaptureRetakeMode() && this.state.imageCaptured ? ( ) : ( (this.camera = cam)} + ref={(cam: CameraApi) => (this.camera = cam)} style={{ flex: 1, justifyContent: 'flex-end' }} cameraType={this.state.cameraType} - flashMode={this.state.flashData.mode} + flashMode={this.state.flashData?.mode} torchMode={this.state.torchMode ? 'on' : 'off'} focusMode={this.props.focusMode} zoomMode={this.props.zoomMode} @@ -271,24 +274,24 @@ export default class CameraScreen extends Component { ); } - sendBottomButtonPressedAction(type: string, captureRetakeMode: boolean, image: null) { + sendBottomButtonPressedAction(type: BottomButtonTypes, captureRetakeMode: boolean, image?: CaptureData) { if (this.props.onBottomButtonPressed) { this.props.onBottomButtonPressed({ type, captureImages: this.state.captureImages, captureRetakeMode, image }); } } - onButtonPressed(type: string) { + onBottomButtonPressed(type: BottomButtonTypes) { const captureRetakeMode = this.isCaptureRetakeMode(); if (captureRetakeMode) { if (type === 'left') { this.setState({ imageCaptured: undefined }); } } else { - this.sendBottomButtonPressedAction(type, captureRetakeMode, null); + this.sendBottomButtonPressedAction(type, captureRetakeMode, undefined); } } - renderBottomButton(type: string) { + renderBottomButton(type: 'left') { const showButton = true; if (showButton) { const buttonNameSuffix = this.isCaptureRetakeMode() ? 'CaptureRetakeButtonText' : 'ButtonText'; @@ -296,7 +299,7 @@ export default class CameraScreen extends Component { return ( this.onButtonPressed(type)} + onPress={() => this.onBottomButtonPressed(type)} > {buttonText} diff --git a/src/index.ts b/src/index.ts index 0d4effcd50..028369f1d3 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,8 +1,8 @@ import { NativeModules } from 'react-native'; import Camera from './Camera'; -import CameraScreen, { CameraType } from './CameraScreen'; -import type { CameraApi } from './types'; +import CameraScreen from './CameraScreen'; +import type { CameraApi, CameraType, CaptureData, FlashMode, FocusMode, TorchMode, ZoomMode } from './types'; const { CameraKit } = NativeModules; @@ -16,4 +16,4 @@ export const Orientation = { export default CameraKit; -export { Camera, CameraScreen, CameraType, CameraApi }; +export { Camera, CameraScreen, CameraType, TorchMode, FlashMode, FocusMode, ZoomMode, CameraApi, CaptureData }; diff --git a/src/types.ts b/src/types.ts index 3d567f84d4..24d6c8dad7 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,8 +1,31 @@ -type TorchMode = 'on'| 'off'; +export enum CameraType { + Front = 'front', + Back = 'back', +} + +export type TorchMode = 'on' | 'off'; + +export type FlashMode = 'on' | 'off' | 'auto'; + +export type FocusMode = 'on' | 'off'; + +export type ZoomMode = 'on' | 'off'; + +export type CaptureData = { + uri: string; + name: string; + // Android only + id?: string; + path?: string; + height?: number; + width?: number; + // iOS only + size?: number; +}; export type CameraApi = { - capture: () => Promise<{ uri: string }>, + capture: () => Promise; setTorchMode: (mode: TorchMode) => void; - requestDeviceCameraAuthorization: () => Promise, - checkDeviceCameraAuthorizationStatus: () => Promise, + requestDeviceCameraAuthorization: () => Promise; + checkDeviceCameraAuthorizationStatus: () => Promise; }; From 2c73e840b091b00a30de1b7be5471d7de7426dbd Mon Sep 17 00:00:00 2001 From: David Bertet Date: Fri, 2 Jun 2023 03:08:21 -0700 Subject: [PATCH 2/2] Forward/Use Camera props if sent to CameraScreen --- src/CameraScreen.tsx | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/CameraScreen.tsx b/src/CameraScreen.tsx index a3118147b4..e69f8ee82b 100644 --- a/src/CameraScreen.tsx +++ b/src/CameraScreen.tsx @@ -94,7 +94,6 @@ export default class CameraScreen extends Component { constructor(props: CameraScreenProps) { super(props); - this.currentFlashArrayPosition = 0; this.flashArray = [ { mode: 'auto', @@ -110,15 +109,19 @@ export default class CameraScreen extends Component { }, ]; + this.currentFlashArrayPosition = this.props.flashMode + ? this.flashArray.findIndex((flashData) => flashData.mode === this.props.flashMode) + : 0; + this.state = { captureImages: [], flashData: this.flashArray[this.currentFlashArrayPosition], - torchMode: false, + torchMode: this.props.torchMode === 'on' || false, ratios: [], ratioArrayPosition: -1, imageCaptured: undefined, captured: false, - cameraType: CameraType.Back, + cameraType: this.props.cameraType || CameraType.Back, }; } @@ -203,19 +206,13 @@ export default class CameraScreen extends Component { ) : ( (this.camera = cam)} style={{ flex: 1, justifyContent: 'flex-end' }} cameraType={this.state.cameraType} flashMode={this.state.flashData?.mode} torchMode={this.state.torchMode ? 'on' : 'off'} - focusMode={this.props.focusMode} - zoomMode={this.props.zoomMode} ratioOverlay={this.state.ratios[this.state.ratioArrayPosition]} - showFrame={this.props.showFrame} - scanBarcode={this.props.scanBarcode} - laserColor={this.props.laserColor} - frameColor={this.props.frameColor} - onReadCode={this.props.onReadCode} /> )}