From b909d01dfc87da4d2fd575681045c6367e5522b3 Mon Sep 17 00:00:00 2001 From: aarongrider Date: Sat, 9 Jan 2021 13:12:53 -0800 Subject: [PATCH 1/2] Add torch mode --- README.md | 3 ++ .../src/main/java/com/rncamerakit/CKCamera.kt | 16 ++++++- .../java/com/rncamerakit/CKCameraManager.kt | 5 +++ example/images/torchOff@3x.png | Bin 0 -> 2660 bytes example/images/torchOn@3x.png | Bin 0 -> 1379 bytes example/src/BarcodeScreenExample.tsx | 4 +- example/src/CameraExample.tsx | 1 + example/src/CameraScreenExample.tsx | 2 + ios/ReactNativeCameraKit/CKCamera.h | 22 +++++----- ios/ReactNativeCameraKit/CKCamera.m | 3 -- ios/ReactNativeCameraKit/CKCameraManager.m | 1 + src/CameraScreen.tsx | 40 +++++++++++------- 12 files changed, 64 insertions(+), 33 deletions(-) create mode 100644 example/images/torchOff@3x.png create mode 100644 example/images/torchOn@3x.png diff --git a/README.md b/README.md index ad407e1..04835db 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,8 @@ import { CameraScreen } from 'react-native-camera-kit'; }} cameraFlipImage={require('path/to/image')} captureButtonImage={require('path/to/image')} + torchOnImage={require('path/to/image')} + torchOffImage={require('path/to/image')} showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session /> ``` @@ -114,6 +116,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'` | 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. | diff --git a/android/src/main/java/com/rncamerakit/CKCamera.kt b/android/src/main/java/com/rncamerakit/CKCamera.kt index 394a62b..eff17ea 100644 --- a/android/src/main/java/com/rncamerakit/CKCamera.kt +++ b/android/src/main/java/com/rncamerakit/CKCamera.kt @@ -375,7 +375,6 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs val imageCapture = imageCapture ?: return val camera = camera ?: return when (mode) { - "torch" -> camera.cameraControl.enableTorch(true) "on" -> { camera.cameraControl.enableTorch(false) imageCapture.flashMode = ImageCapture.FLASH_MODE_ON @@ -391,6 +390,21 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs } } + fun setTorchMode(mode: String?) { + val camera = camera ?: return + when (mode) { + "on" -> { + camera.cameraControl.enableTorch(true) + } + "off" -> { + camera.cameraControl.enableTorch(false) + } + else -> { // 'auto' and any wrong values + camera.cameraControl.enableTorch(false) + } + } + } + fun setAutoFocus(mode: String = "on") { autoFocus = mode when(mode) { diff --git a/android/src/main/java/com/rncamerakit/CKCameraManager.kt b/android/src/main/java/com/rncamerakit/CKCameraManager.kt index 8024188..ffcca12 100644 --- a/android/src/main/java/com/rncamerakit/CKCameraManager.kt +++ b/android/src/main/java/com/rncamerakit/CKCameraManager.kt @@ -61,6 +61,11 @@ class CKCameraManager : SimpleViewManager() { view.setFlashMode(mode) } + @ReactProp(name = "torchMode") + fun setTorchMode(view: CKCamera, mode: String?) { + view.setTorchMode(mode) + } + @ReactProp(name = "focusMode") fun setFocusMode(view: CKCamera, mode: String) { view.setAutoFocus(mode) diff --git a/example/images/torchOff@3x.png b/example/images/torchOff@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..ada83b1b37861e1b5260375f386bc0e6af78a2d6 GIT binary patch literal 2660 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 literal 0 HcmV?d00001 diff --git a/example/src/BarcodeScreenExample.tsx b/example/src/BarcodeScreenExample.tsx index 4a601a3..02a4d2e 100644 --- a/example/src/BarcodeScreenExample.tsx +++ b/example/src/BarcodeScreenExample.tsx @@ -38,8 +38,8 @@ export default class BarcodeScreenExample extends Component { }} scanBarcode showFrame - laserColor={'yellow'} - frameColor={'yellow'} + laserColor={'red'} + frameColor={'green'} surfaceColor={'black'} onReadCode={(event) => { this.setState({ example: CheckingScreen, value: event.nativeEvent.codeStringValue }); diff --git a/example/src/CameraExample.tsx b/example/src/CameraExample.tsx index feadb27..7ff9482 100644 --- a/example/src/CameraExample.tsx +++ b/example/src/CameraExample.tsx @@ -14,6 +14,7 @@ export default class CameraExample extends Component { flashMode="auto" // on/off/auto(default) focusMode="on" // off/on(default) zoomMode="on" // off/on(default) + torchMode="off" // on/off(default) ratioOverlay="1:1" // optional ratioOverlayColor="#00000077" // optional resetFocusTimeout={0} diff --git a/example/src/CameraScreenExample.tsx b/example/src/CameraScreenExample.tsx index 7d6f7b5..973c54c 100644 --- a/example/src/CameraScreenExample.tsx +++ b/example/src/CameraScreenExample.tsx @@ -25,6 +25,8 @@ export default class CameraScreenExample extends Component { }} cameraFlipImage={require('../images/cameraFlipIcon.png')} captureButtonImage={require('../images/cameraButton.png')} + torchOnImage={require('../images/torchOn.png')} + torchOffImage={require('../images/torchOff.png')} showCapturedImageCount /> ); diff --git a/ios/ReactNativeCameraKit/CKCamera.h b/ios/ReactNativeCameraKit/CKCamera.h index 2da0b8e..5fed471 100644 --- a/ios/ReactNativeCameraKit/CKCamera.h +++ b/ios/ReactNativeCameraKit/CKCamera.h @@ -22,18 +22,6 @@ typedef NS_ENUM(NSInteger, CKCameraType) { @end -typedef NS_ENUM(NSInteger, CKCameraTorchMode) { - CKCameraTorchModeAuto, - CKCameraTorchModeOn, - CKCameraTorchModeOff -}; - -@interface RCTConvert(CKCameraTorchMode) - -+ (CKCameraTorchMode)CKCameraTorchMode:(id)json; - -@end - typedef NS_ENUM(NSInteger, CKCameraFlashMode) { CKCameraFlashModeAuto, CKCameraFlashModeOn, @@ -46,6 +34,16 @@ typedef NS_ENUM(NSInteger, CKCameraFlashMode) { @end +typedef NS_ENUM(NSInteger, CKCameraTorchMode) { + CKCameraTorchModeOn, + CKCameraTorchModeOff +}; + +@interface RCTConvert(CKCameraTorchMode) + ++ (CKCameraTorchMode)CKCameraTorchMode:(id)json; + +@end typedef NS_ENUM(NSInteger, CKCameraFocusMode) { CKCameraFocusModeOn, diff --git a/ios/ReactNativeCameraKit/CKCamera.m b/ios/ReactNativeCameraKit/CKCamera.m index cfb9d33..83a6dfe 100644 --- a/ios/ReactNativeCameraKit/CKCamera.m +++ b/ios/ReactNativeCameraKit/CKCamera.m @@ -33,12 +33,9 @@ RCT_ENUM_CONVERTER(CKCameraType, (@{ @implementation RCTConvert(CKCameraTorchMode) RCT_ENUM_CONVERTER(CKCameraTorchMode, (@{ - @"auto": @(AVCaptureTorchModeAuto), @"on": @(AVCaptureTorchModeOn), @"off": @(AVCaptureTorchModeOff) }), AVCaptureTorchModeAuto, integerValue) - - @end @implementation RCTConvert(CKCameraFlashMode) diff --git a/ios/ReactNativeCameraKit/CKCameraManager.m b/ios/ReactNativeCameraKit/CKCameraManager.m index 1fdf6ce..bea56d9 100644 --- a/ios/ReactNativeCameraKit/CKCameraManager.m +++ b/ios/ReactNativeCameraKit/CKCameraManager.m @@ -19,6 +19,7 @@ RCT_EXPORT_MODULE() RCT_EXPORT_VIEW_PROPERTY(cameraType, CKCameraType) RCT_EXPORT_VIEW_PROPERTY(flashMode, CKCameraFlashMode) +RCT_EXPORT_VIEW_PROPERTY(torchMode, CKCameraTorchMode) RCT_EXPORT_VIEW_PROPERTY(focusMode, CKCameraFocusMode) RCT_EXPORT_VIEW_PROPERTY(zoomMode, CKCameraZoomMode) RCT_EXPORT_VIEW_PROPERTY(ratioOverlay, NSString) diff --git a/src/CameraScreen.tsx b/src/CameraScreen.tsx index f54485c..cdd9400 100644 --- a/src/CameraScreen.tsx +++ b/src/CameraScreen.tsx @@ -17,8 +17,6 @@ import Camera from './Camera'; const FLASH_MODE_AUTO = 'auto'; const FLASH_MODE_ON = 'on'; const FLASH_MODE_OFF = 'off'; -const TORCH_MODE_ON = 'on'; -const TORCH_MODE_OFF = 'off'; const OFFSET_FRAME = 30; const FRAME_HEIGHT = 200; @@ -47,6 +45,8 @@ export type Props = { laserColor: any, frameColor: any, surfaceColor: any, + torchOnImage: any, + torchOffImage: any, onReadCode: (any) => void; onBottomButtonPressed: (any) => void; } @@ -54,7 +54,7 @@ export type Props = { type State = { captureImages: any[], flashData: any, - torchData: boolean, + torchMode: boolean, ratios: any[], ratioArrayPosition: number, imageCaptured: any, @@ -97,7 +97,7 @@ export default class CameraScreen extends Component { this.state = { captureImages: [], flashData: this.flashArray[this.currentFlashArrayPosition], - torchData: false, + torchMode: false, ratios: [], ratioArrayPosition: -1, imageCaptured: false, @@ -105,10 +105,6 @@ export default class CameraScreen extends Component { scannerOptions: {}, cameraType: CameraType.Back, }; - - this.onSetFlash = this.onSetFlash.bind(this); - this.onSetTorch = this.onSetTorch.bind(this); - this.onSwitchCameraPressed = this.onSwitchCameraPressed.bind(this); } componentDidMount() { @@ -154,11 +150,25 @@ export default class CameraScreen extends Component { ); } + renderTorchButton() { + return ( + !this.isCaptureRetakeMode() && ( + this.onSetTorch()}> + + + ) + ); + } + renderSwitchCameraButton() { return ( this.props.cameraFlipImage && !this.isCaptureRetakeMode() && ( - + this.onSwitchCameraPressed()}> { {this.renderFlashButton()} {this.renderSwitchCameraButton()} + {this.renderTorchButton()} ) ); @@ -191,6 +202,7 @@ export default class CameraScreen extends Component { 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]} @@ -303,20 +315,18 @@ export default class CameraScreen extends Component { } onSwitchCameraPressed() { - const direction = this.state.type === CameraType.Back ? CameraType.Front : CameraType.Back; - this.setState({ type: direction }); + const direction = this.state.cameraType === CameraType.Back ? CameraType.Front : CameraType.Back; + this.setState({ cameraType: direction }); } - async onSetFlash() { + onSetFlash() { this.currentFlashArrayPosition = (this.currentFlashArrayPosition + 1) % 3; const newFlashData = this.flashArray[this.currentFlashArrayPosition]; this.setState({ flashData: newFlashData }); } onSetTorch() { - const newTorchData = !this.state.torchData; - this.setState({ torchData: newTorchData }); - newTorchData ? this.camera.setTorchMode(TORCH_MODE_ON) : this.camera.setTorchMode(TORCH_MODE_OFF); + this.setState({ torchMode: !this.state.torchMode }); } async onCaptureImagePressed() { From 95781c9be2b86e02dc23b050486d4648989f1cec Mon Sep 17 00:00:00 2001 From: aarongrider Date: Mon, 11 Jan 2021 11:16:40 -0800 Subject: [PATCH 2/2] Fix color props and update api --- README.md | 9 +-- .../src/main/java/com/rncamerakit/CKCamera.kt | 3 +- example/src/BarcodeScreenExample.tsx | 8 +-- ios/ReactNativeCameraKit/CKCamera.m | 66 +++++++++---------- ios/ReactNativeCameraKit/CKCameraManager.m | 4 +- src/CameraScreen.tsx | 28 +------- 6 files changed, 43 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 04835db..57c0719 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,7 @@ import { CameraScreen } from 'react-native-camera-kit'; captureButtonImage={require('path/to/image')} torchOnImage={require('path/to/image')} torchOffImage={require('path/to/image')} + hideControls={false} // (default false) optional, hides camera controls showCapturedImageCount={false} // (default false) optional, show count for photos taken during that capture session /> ``` @@ -82,14 +83,10 @@ Additionally, the camera screen can be used for barcode scanning ... // 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 + laserColor='red' // (default red) optional, color of laser in scanner frame + frameColor='white' // (default white) optional, color of border of scanner frame /> ``` diff --git a/android/src/main/java/com/rncamerakit/CKCamera.kt b/android/src/main/java/com/rncamerakit/CKCamera.kt index eff17ea..57c8e34 100644 --- a/android/src/main/java/com/rncamerakit/CKCamera.kt +++ b/android/src/main/java/com/rncamerakit/CKCamera.kt @@ -192,7 +192,7 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs orientationListener!!.enable() // Contain camera feed image within component bounds, centered - viewFinder.scaleType = PreviewView.ScaleType.FIT_CENTER + viewFinder.scaleType = PreviewView.ScaleType.FILL_CENTER // Tap to focus viewFinder.setOnTouchListener { _, event -> @@ -391,6 +391,7 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs } fun setTorchMode(mode: String?) { + val imageCapture = imageCapture ?: return val camera = camera ?: return when (mode) { "on" -> { diff --git a/example/src/BarcodeScreenExample.tsx b/example/src/BarcodeScreenExample.tsx index 02a4d2e..bd08eab 100644 --- a/example/src/BarcodeScreenExample.tsx +++ b/example/src/BarcodeScreenExample.tsx @@ -38,16 +38,12 @@ export default class BarcodeScreenExample extends Component { }} scanBarcode showFrame - laserColor={'red'} - frameColor={'green'} - surfaceColor={'black'} + laserColor="red" + frameColor="white" onReadCode={(event) => { this.setState({ example: CheckingScreen, value: event.nativeEvent.codeStringValue }); }} hideControls - // offsetForScannerFrame = {10} - // heightForScannerFrame = {300} - colorForScannerFrame={'blue'} /> ); } diff --git a/ios/ReactNativeCameraKit/CKCamera.m b/ios/ReactNativeCameraKit/CKCamera.m index 83a6dfe..8e4f2aa 100644 --- a/ios/ReactNativeCameraKit/CKCamera.m +++ b/ios/ReactNativeCameraKit/CKCamera.m @@ -99,13 +99,12 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ @property (nonatomic) UIBackgroundTaskIdentifier backgroundRecordingID; // scanner options -@property (nonatomic, strong) NSDictionary *scannerOptions; @property (nonatomic) BOOL showFrame; -@property (nonatomic) UIView *greenScanner; +@property (nonatomic) UIView *scannerView; @property (nonatomic, strong) RCTDirectEventBlock onReadCode; - @property (nonatomic) CGFloat frameOffset; -@property (nonatomic) CGFloat heightFrame; +@property (nonatomic) CGFloat frameHeight; +@property (nonatomic, strong) UIColor *laserColor; @property (nonatomic, strong) UIColor *frameColor; @property (nonatomic) UIView * dataReadingFrame; @@ -205,6 +204,11 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ self.zoomMode = CKCameraZoomModeOn; self.flashMode = CKCameraFlashModeAuto; self.focusMode = CKCameraFocusModeOn; + + self.frameColor = [UIColor whiteColor]; + self.laserColor = [UIColor redColor]; + self.frameOffset = 30; + self.frameHeight = 200; } return self; @@ -285,6 +289,18 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ } } +- (void)setLaserColor:(UIColor *)color { + if (color != nil) { + _laserColor = color; + } +} + +- (void)setFrameColor:(UIColor *)color { + if (color != nil) { + _frameColor = color; + } +} + -(void)setupCaptureSession { // Setup the capture session. // In general it is not safe to mutate an AVCaptureSession or any of its inputs, outputs, or connections from multiple threads at the same time. @@ -881,29 +897,15 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ } } -- (void)setScannerOptions:(NSDictionary *)scannerOptions { - if (scannerOptions[offsetForScannerFrame]) { - self.frameOffset = [scannerOptions[offsetForScannerFrame] floatValue]; - } - if (scannerOptions[heightForScannerFrame]) { - self.heightFrame = [scannerOptions[heightForScannerFrame] floatValue]; - } - if (scannerOptions[colorForFrame]) { - UIColor *acolor = [RCTConvert UIColor:scannerOptions[colorForFrame]]; - self.frameColor = (acolor) ? acolor : [UIColor whiteColor]; - } -} - - (void)addFrameForScanner { CGFloat frameWidth = self.bounds.size.width - 2 * self.frameOffset; if (!self.dataReadingFrame) { - self.dataReadingFrame = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frameWidth, self.heightFrame)]; // + self.dataReadingFrame = [[UIView alloc] initWithFrame:CGRectMake(0, 0, frameWidth, self.frameHeight)]; // self.dataReadingFrame.center = self.center; self.dataReadingFrame.backgroundColor = [UIColor clearColor]; [self createCustomFramesForView:self.dataReadingFrame]; [self addSubview:self.dataReadingFrame]; - [self startAnimatingScanner:self.dataReadingFrame]; [self addVisualEffects:self.dataReadingFrame.frame]; @@ -952,7 +954,6 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ UIView * cornerView = [[UIView alloc] initWithFrame:CGRectMake(x, y, width, height)]; cornerView.backgroundColor = self.frameColor; [frameView addSubview:cornerView]; - } } @@ -961,38 +962,37 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ topView.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.4]; [self addSubview:topView]; - UIView *leftSideView = [[UIView alloc] initWithFrame:CGRectMake(0, inputRect.origin.y, self.frameOffset, self.heightFrame)]; //paddingForScanner scannerHeight + UIView *leftSideView = [[UIView alloc] initWithFrame:CGRectMake(0, inputRect.origin.y, self.frameOffset, self.frameHeight)]; //paddingForScanner scannerHeight leftSideView.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.4]; [self addSubview:leftSideView]; - UIView *rightSideView = [[UIView alloc] initWithFrame:CGRectMake(inputRect.size.width + self.frameOffset, inputRect.origin.y, self.frameOffset, self.heightFrame)]; + UIView *rightSideView = [[UIView alloc] initWithFrame:CGRectMake(inputRect.size.width + self.frameOffset, inputRect.origin.y, self.frameOffset, self.frameHeight)]; rightSideView.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.4]; [self addSubview:rightSideView]; - UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, inputRect.origin.y + self.heightFrame, self.frame.size.width, - self.frame.size.height - inputRect.origin.y - self.heightFrame)]; + UIView *bottomView = [[UIView alloc] initWithFrame:CGRectMake(0, inputRect.origin.y + self.frameHeight, self.frame.size.width, + self.frame.size.height - inputRect.origin.y - self.frameHeight)]; bottomView.backgroundColor = [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.4]; [self addSubview:bottomView]; - } - (void)startAnimatingScanner:(UIView *)inputView { - if (!self.greenScanner) { - self.greenScanner = [[UIView alloc] initWithFrame:CGRectMake(2, 0, inputView.frame.size.width - 4, 2)]; - self.greenScanner.backgroundColor = [UIColor whiteColor]; + if (!self.scannerView) { + self.scannerView = [[UIView alloc] initWithFrame:CGRectMake(2, 0, inputView.frame.size.width - 4, 2)]; + self.scannerView.backgroundColor = self.laserColor; } - if (self.greenScanner.frame.origin.y != 0) { - [self.greenScanner setFrame:CGRectMake(2, 0, inputView.frame.size.width - 4, 2)]; + if (self.scannerView.frame.origin.y != 0) { + [self.scannerView setFrame:CGRectMake(2, 0, inputView.frame.size.width - 4, 2)]; } - [inputView addSubview:self.greenScanner]; + [inputView addSubview:self.scannerView]; [UIView animateWithDuration:3 delay:0 options:(UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat) animations:^{ CGFloat middleX = inputView.frame.size.width / 2; - self.greenScanner.center = CGPointMake(middleX, inputView.frame.size.height - 1); + self.scannerView.center = CGPointMake(middleX, inputView.frame.size.height - 1); } completion:^(BOOL finished) {}]; } - (void)stopAnimatingScanner { - [self.greenScanner removeFromSuperview]; + [self.scannerView removeFromSuperview]; } //Observer actions diff --git a/ios/ReactNativeCameraKit/CKCameraManager.m b/ios/ReactNativeCameraKit/CKCameraManager.m index bea56d9..9f3e18a 100644 --- a/ios/ReactNativeCameraKit/CKCameraManager.m +++ b/ios/ReactNativeCameraKit/CKCameraManager.m @@ -26,9 +26,9 @@ RCT_EXPORT_VIEW_PROPERTY(ratioOverlay, NSString) RCT_EXPORT_VIEW_PROPERTY(ratioOverlayColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(onReadCode, RCTDirectEventBlock) - -RCT_EXPORT_VIEW_PROPERTY(scannerOptions, NSDictionary) RCT_EXPORT_VIEW_PROPERTY(showFrame, BOOL) +RCT_EXPORT_VIEW_PROPERTY(laserColor, UIColor) +RCT_EXPORT_VIEW_PROPERTY(frameColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(resetFocusTimeout, NSInteger) RCT_EXPORT_VIEW_PROPERTY(resetFocusWhenMotionDetected, BOOL) RCT_EXPORT_VIEW_PROPERTY(saveToCameraRoll, BOOL) diff --git a/src/CameraScreen.tsx b/src/CameraScreen.tsx index cdd9400..b2c6e62 100644 --- a/src/CameraScreen.tsx +++ b/src/CameraScreen.tsx @@ -9,7 +9,6 @@ import { Dimensions, Platform, SafeAreaView, - processColor, } from 'react-native'; import _ from 'lodash'; import Camera from './Camera'; @@ -17,8 +16,6 @@ import Camera from './Camera'; const FLASH_MODE_AUTO = 'auto'; const FLASH_MODE_ON = 'on'; const FLASH_MODE_OFF = 'off'; -const OFFSET_FRAME = 30; -const FRAME_HEIGHT = 200; const { width, height } = Dimensions.get('window'); @@ -33,18 +30,13 @@ export type Props = { allowCaptureRetake: boolean, cameraRatioOverlay: any, showCapturedImageCount?: boolean, - scannerOptions: any, - offsetForScannerFrame: any, - heightForScannerFrame: any, - colorForScannerFrame: any, + captureButtonImage: any, cameraFlipImage: any, hideControls: any, showFrame: any, - captureButtonImage: any, scanBarcode: any, laserColor: any, frameColor: any, - surfaceColor: any, torchOnImage: any, torchOffImage: any, onReadCode: (any) => void; @@ -59,7 +51,6 @@ type State = { ratioArrayPosition: number, imageCaptured: any, captured: boolean, - scannerOptions: any, cameraType: CameraType, } @@ -102,19 +93,16 @@ export default class CameraScreen extends Component { ratioArrayPosition: -1, imageCaptured: false, captured: false, - scannerOptions: {}, cameraType: CameraType.Back, }; } componentDidMount() { - const scannerOptions = this.getScannerOptions(); let ratios = []; if (this.props.cameraRatioOverlay) { ratios = this.props.cameraRatioOverlay.ratios || []; } this.setState({ - scannerOptions, ratios: ratios || [], ratioArrayPosition: ratios.length > 0 ? 0 : -1, }); @@ -124,18 +112,6 @@ export default class CameraScreen extends Component { return !!(this.props.allowCaptureRetake && !_.isUndefined(this.state.imageCaptured)); } - getScannerOptions() { - const scannerOptions = this.props.scannerOptions || {}; - scannerOptions.offsetFrame = this.props.offsetForScannerFrame || OFFSET_FRAME; - scannerOptions.frameHeight = this.props.heightForScannerFrame || FRAME_HEIGHT; - if (this.props.colorForScannerFrame) { - scannerOptions.colorForFrame = processColor(this.props.colorForScannerFrame); - } else { - scannerOptions.colorForFrame = processColor('white'); - } - return scannerOptions; - } - renderFlashButton() { return ( !this.isCaptureRetakeMode() && ( @@ -211,9 +187,7 @@ export default class CameraScreen extends Component { scanBarcode={this.props.scanBarcode} laserColor={this.props.laserColor} frameColor={this.props.frameColor} - surfaceColor={this.props.surfaceColor} onReadCode={this.props.onReadCode} - scannerOptions={this.state.scannerOptions} /> )}