From 0228634bb56e77a9154d83d8c592767adecf74cb Mon Sep 17 00:00:00 2001 From: Seph Soliman Date: Wed, 26 May 2021 16:51:07 -0700 Subject: [PATCH 1/2] Add 'onOrientationChange' event handler to iOS as well --- ios/ReactNativeCameraKit/CKCamera.m | 36 ++++++++++++++++++++-- ios/ReactNativeCameraKit/CKCameraManager.m | 1 + 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/ios/ReactNativeCameraKit/CKCamera.m b/ios/ReactNativeCameraKit/CKCamera.m index 68315e7..df02e4c 100644 --- a/ios/ReactNativeCameraKit/CKCamera.m +++ b/ios/ReactNativeCameraKit/CKCamera.m @@ -116,6 +116,7 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ @property (nonatomic) CKCameraZoomMode zoomMode; @property (nonatomic, strong) NSString* ratioOverlay; @property (nonatomic, strong) UIColor *ratioOverlayColor; +@property (nonatomic, strong) RCTDirectEventBlock onOrientationChange; @property (nonatomic) BOOL isAddedOberver; @@ -151,7 +152,7 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ - (void)removeFromSuperview { - + [[NSNotificationCenter defaultCenter] removeObserver:self name:UIDeviceOrientationDidChangeNotification object:[UIDevice currentDevice]]; dispatch_async( self.sessionQueue, ^{ if ( self.setupResult == CKSetupResultSuccess ) { [self.session stopRunning]; @@ -169,6 +170,13 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ // Create the AVCaptureSession. self.session = [[AVCaptureSession alloc] init]; + // Listen to orientation changes + [[UIDevice currentDevice] beginGeneratingDeviceOrientationNotifications]; + [[NSNotificationCenter defaultCenter] + addObserver:self selector:@selector(orientationChanged:) + name:UIDeviceOrientationDidChangeNotification + object:[UIDevice currentDevice]]; + // Fit camera preview inside of viewport self.session.sessionPreset = AVCaptureSessionPresetPhoto; @@ -301,7 +309,31 @@ RCT_ENUM_CONVERTER(CKCameraZoomMode, (@{ } } --(void)setupCaptureSession { +- (void) orientationChanged:(NSNotification *)notification +{ + if (!self.onOrientationChange) { + return; + } + + // PORTRAIT: 0, // ⬆️ + // LANDSCAPE_LEFT: 1, // ⬅️ + // PORTRAIT_UPSIDE_DOWN: 2, // ⬇️ + // LANDSCAPE_RIGHT: 3, // ➡️ + + UIDevice * device = notification.object; + UIDeviceOrientation orientation = device.orientation; + if (orientation == UIDeviceOrientationPortrait) { + self.onOrientationChange(@{@"orientation": @0}); + } else if (orientation == UIDeviceOrientationLandscapeLeft) { + self.onOrientationChange(@{@"orientation": @1}); + } else if (orientation == UIDeviceOrientationPortraitUpsideDown) { + self.onOrientationChange(@{@"orientation": @2}); + } else if (orientation == UIDeviceOrientationLandscapeRight) { + self.onOrientationChange(@{@"orientation": @3}); + } +} + +- (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. // Why not do all of this on the main queue? diff --git a/ios/ReactNativeCameraKit/CKCameraManager.m b/ios/ReactNativeCameraKit/CKCameraManager.m index 9f3e18a..c2941f3 100644 --- a/ios/ReactNativeCameraKit/CKCameraManager.m +++ b/ios/ReactNativeCameraKit/CKCameraManager.m @@ -26,6 +26,7 @@ RCT_EXPORT_VIEW_PROPERTY(ratioOverlay, NSString) RCT_EXPORT_VIEW_PROPERTY(ratioOverlayColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(onReadCode, RCTDirectEventBlock) +RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(showFrame, BOOL) RCT_EXPORT_VIEW_PROPERTY(laserColor, UIColor) RCT_EXPORT_VIEW_PROPERTY(frameColor, UIColor) From 4249927da15081eaee1515741e2cc791c322044a Mon Sep 17 00:00:00 2001 From: Seph Soliman Date: Wed, 26 May 2021 17:01:13 -0700 Subject: [PATCH 2/2] Updated docs, exported constants --- README.md | 1 + src/Camera.android.tsx | 4 ---- src/index.ts | 8 ++++++++ 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 236c4e7..1b2d731 100644 --- a/README.md +++ b/README.md @@ -146,6 +146,7 @@ import { Camera, CameraType } from 'react-native-camera-kit'; | `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`. | | `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. _**Note:** This only work on real devices. It will hang indefinitly on simulators._ | | `saveToCameraRollWithPhUrl` | Boolean | iOS only. If true, speeds up photo taking by about 5-50ms (measured on iPhone X) by only returning a [rn-cameraroll-compatible](https://github.com/react-native-community/react-native-cameraroll/blob/a09af08f0a46a98b29f6ad470e59d3dc627864a2/ios/RNCAssetsLibraryRequestHandler.m#L36) `ph://..` URL instead of a regular `file://..` URL. | | +| `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) diff --git a/src/Camera.android.tsx b/src/Camera.android.tsx index 3419350..1a7adbe 100644 --- a/src/Camera.android.tsx +++ b/src/Camera.android.tsx @@ -34,8 +34,4 @@ const Camera = React.forwardRef((props, ref) => { />); }); -const { PORTRAIT, PORTRAIT_UPSIDE_DOWN, LANDSCAPE_LEFT, LANDSCAPE_RIGHT } = RNCameraKitModule.getConstants(); - -export { PORTRAIT, PORTRAIT_UPSIDE_DOWN, LANDSCAPE_LEFT, LANDSCAPE_RIGHT }; - export default Camera; diff --git a/src/index.ts b/src/index.ts index 4d58c8a..16b4ae2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -5,6 +5,14 @@ import CameraScreen, { CameraType } from './CameraScreen'; const { CameraKit } = NativeModules; +// Start with portrait/pointing up, increment while moving counter-clockwise +export const Orientation = { + PORTRAIT: 0, // ⬆️ + LANDSCAPE_LEFT: 1, // ⬅️ + PORTRAIT_UPSIDE_DOWN: 2, // ⬇️ + LANDSCAPE_RIGHT: 3, // ➡️ +}; + export default CameraKit; export { Camera, CameraScreen, CameraType };