feat: orientation lock

lukebars · lukebars · commit 47284db25618 · 2025-06-10T13:08:01.000+03:00
diff --git a/README.md b/README.md
@@ -184,6 +184,7 @@ Additionally, the Camera can be used for barcode scanning
 | `onZoom`                       | Function                         | Callback when user makes a pinch gesture, regardless of what the `zoom` prop was set to. Returned event contains `zoom`. Ex: `onZoom={(e) => console.log(e.nativeEvent.zoom)}`.                                                                                                                                                                                                                                                                            |
 | `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`                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `orientation`                   | `'portrait'`/`'landscape'`/`'auto'` | Lock camera orientation to portrait, landscape, or auto-detect device orientation. Default: `auto`                                                                                                                                                                                                                                                                                                                                                                                                      |
 | `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                                                                                                                  |
 | **Android only**               |
 | `onError`                      | Function                         | Android only. Callback when camera fails to initialize. Ex: `onError={(e) => console.log(e.nativeEvent.errorMessage)}`.                                                                                                                                                                                                                                                                                                                                    |
diff --git a/android/src/main/java/com/rncamerakit/CKCamera.kt b/android/src/main/java/com/rncamerakit/CKCamera.kt
@@ -102,6 +102,7 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
     private var maxZoom: Double? = null
     private var zoomStartedAt = 1.0f
     private var pinchGestureStartedAt = 0.0f
+    private var orientationMode: String? = null
 
     // Barcode Props
     private var scanBarcode: Boolean = false
@@ -192,15 +193,33 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
                 override fun onOrientationChanged(orientation: Int) {
                     val imageCapture = imageCapture ?: return
                     var newOrientation: Int = imageCapture.targetRotation
-                    if (orientation >= 315 || orientation < 45) {
-                        newOrientation = Surface.ROTATION_0
-                    } else if (orientation in 225..314) {
-                        newOrientation = Surface.ROTATION_90
-                    } else if (orientation in 135..224) {
-                        newOrientation = Surface.ROTATION_180
-                    } else if (orientation in 45..134) {
-                        newOrientation = Surface.ROTATION_270
-                    }
+                    
+                    if (orientationMode != null && orientationMode != "auto") {
+                        if (orientationMode == "portrait") {
+                            if (orientation >= 225 || orientation < 45) {
+                                newOrientation = Surface.ROTATION_0
+                            } else if (orientation in 45..224) {
+                                newOrientation = Surface.ROTATION_180
+                            }
+                        } else if (orientationMode == "landscape") {
+                            if (orientation >= 225 || orientation < 45) {
+                                newOrientation = Surface.ROTATION_90
+                            } else if (orientation in 45..224) {
+                                newOrientation = Surface.ROTATION_270
+                            }
+                        }
+                    } else {
+                        if (orientation >= 315 || orientation < 45) {
+                            newOrientation = Surface.ROTATION_0
+                        } else if (orientation in 225..314) {
+                            newOrientation = Surface.ROTATION_90
+                        } else if (orientation in 135..224) {
+                            newOrientation = Surface.ROTATION_180
+                        } else if (orientation in 45..134) {
+                            newOrientation = Surface.ROTATION_270
+                        }
+                    }                    
+
                     if (newOrientation != imageCapture.targetRotation) {
                         imageCapture.targetRotation = newOrientation
                         onOrientationChange(newOrientation)
@@ -424,7 +443,11 @@ class CKCamera(context: ThemedReactContext) : FrameLayout(context), LifecycleObs
     }
 
     fun setShutterPhotoSound(enabled: Boolean) {
-        shutterPhotoSound = enabled;
+        shutterPhotoSound = enabled
+    }
+
+    fun setOrientation(orientation: String?) {
+        orientationMode = orientation
     }
 
     fun capture(options: Map<String, Any>, promise: Promise) {
diff --git a/android/src/main/java/com/rncamerakit/CKCameraManager.kt b/android/src/main/java/com/rncamerakit/CKCameraManager.kt
@@ -143,6 +143,11 @@ class CKCameraManager : SimpleViewManager<CKCamera>(), CKCameraManagerInterface<
         view.setShutterPhotoSound(enabled);
     }
 
+    @ReactProp(name = "orientation")
+    override fun setOrientation(view: CKCamera, orientation: String?) {
+        view.setOrientation(orientation)
+    }
+
     // Methods only available on iOS
     override fun setRatioOverlay(view: CKCamera?, value: String?) = Unit
 
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/CKCameraManagerDelegate.java b/android/src/paper/java/com/facebook/react/viewmanagers/CKCameraManagerDelegate.java
@@ -60,6 +60,9 @@ public void setProperty(T view, String propName, @Nullable Object value) {
       case "frameColor":
         mViewManager.setFrameColor(view, ColorPropConverter.getColor(value, view.getContext()));
         break;
+      case "orientation":
+        mViewManager.setOrientation(view, value == null ? null : (String) value);
+        break;
       case "ratioOverlay":
         mViewManager.setRatioOverlay(view, value == null ? null : (String) value);
         break;
diff --git a/android/src/paper/java/com/facebook/react/viewmanagers/CKCameraManagerInterface.java b/android/src/paper/java/com/facebook/react/viewmanagers/CKCameraManagerInterface.java
@@ -22,6 +22,7 @@ public interface CKCameraManagerInterface<T extends View> {
   void setMaxZoom(T view, double value);
   void setTorchMode(T view, @Nullable String value);
   void setCameraType(T view, @Nullable String value);
+  void setOrientation(T view, @Nullable String value);
   void setScanBarcode(T view, boolean value);
   void setShowFrame(T view, boolean value);
   void setLaserColor(T view, @Nullable Integer value);
diff --git a/ios/ReactNativeCameraKit/CKCameraManager.m b/ios/ReactNativeCameraKit/CKCameraManager.m
@@ -32,6 +32,7 @@ @interface RCT_EXTERN_MODULE(CKCameraManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(barcodeFrameSize, NSDictionary)
 
 RCT_EXPORT_VIEW_PROPERTY(onOrientationChange, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(orientation, NSString)
 RCT_EXPORT_VIEW_PROPERTY(onCaptureButtonPressIn, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onCaptureButtonPressOut, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onZoom, RCTDirectEventBlock)
diff --git a/ios/ReactNativeCameraKit/CKCameraViewComponentView.mm b/ios/ReactNativeCameraKit/CKCameraViewComponentView.mm
@@ -237,6 +237,11 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
         _view.maxZoom = maxZoom;
         [changedProps addObject:@"maxZoom"];
     }
+    id orientation = CKConvertFollyDynamicToId(newProps.orientation);
+    if (orientation != nil) {
+        _view.orientation = orientation;
+        [changedProps addObject:@"orientation"];
+    }
     float barcodeWidth = newProps.barcodeFrameSize.width;
     float barcodeHeight = newProps.barcodeFrameSize.height;
     if (barcodeWidth != [_view.barcodeFrameSize[@"width"] floatValue] || barcodeHeight != [_view.barcodeFrameSize[@"height"] floatValue]) {
diff --git a/ios/ReactNativeCameraKit/CameraProtocol.swift b/ios/ReactNativeCameraKit/CameraProtocol.swift
@@ -14,6 +14,7 @@ protocol CameraProtocol: AnyObject, FocusInterfaceViewDelegate {
     func update(torchMode: TorchMode)
     func update(flashMode: FlashMode)
     func update(cameraType: CameraType)
+    func update(orientation: OrientationMode)
     func update(onOrientationChange: RCTDirectEventBlock?)
     func update(onZoom: RCTDirectEventBlock?)
     func update(zoom: Double?)
diff --git a/ios/ReactNativeCameraKit/CameraView.swift b/ios/ReactNativeCameraKit/CameraView.swift
@@ -52,6 +52,7 @@ public class CameraView: UIView {
 
     // other
     @objc public var onOrientationChange: RCTDirectEventBlock?
+    @objc public var orientation: NSString?
     @objc public var onZoom: RCTDirectEventBlock?
     @objc public var resetFocusTimeout = 0
     @objc public var resetFocusWhenMotionDetected = false
@@ -88,6 +89,10 @@ public class CameraView: UIView {
             #else
             camera.setup(cameraType: cameraType, supportedBarcodeType: scanBarcode && onReadCode != nil ? supportedBarcodeType : [])
             #endif
+            
+            // Apply initial orientation lock after camera setup
+            let orientationMode = convertOrientationStringToMode(orientation as String?)
+            camera.update(orientation: orientationMode)
         }
     }
 
@@ -288,6 +293,12 @@ public class CameraView: UIView {
         if changedProps.contains("maxZoom") {
             camera.update(maxZoom: maxZoom?.doubleValue)
         }
+
+        if changedProps.contains("orientation") {
+            let orientationMode = convertOrientationStringToMode(orientation as String?)
+            camera.update(orientation: orientationMode)
+        }
+
     }
 
     // MARK: Public
@@ -317,6 +328,18 @@ public class CameraView: UIView {
 
     // MARK: - Private Helper
 
+    private func convertOrientationStringToMode(_ orientationString: String?) -> OrientationMode {
+        guard let orientationString = orientationString else { return .auto }
+        switch orientationString {
+        case "portrait":
+            return .portrait
+        case "landscape":
+            return .landscape
+        default:
+            return .auto
+        }
+    }
+
     private func update(zoomMode: ZoomMode) {
         if zoomMode == .on {
             if zoomGestureRecognizer == nil {
diff --git a/ios/ReactNativeCameraKit/RealCamera.swift b/ios/ReactNativeCameraKit/RealCamera.swift
@@ -44,7 +44,8 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
     private var lastOnZoom: Double?
     private var zoom: Double?
     private var maxZoom: Double?
-
+    private var orientation: OrientationMode = .auto
+    
     private var deviceOrientation = UIDeviceOrientation.unknown
     private var motionManager: CMMotionManager?
 
@@ -266,6 +267,14 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
         }
     }
 
+    func update(orientation: OrientationMode) {
+        self.orientation = orientation
+
+        DispatchQueue.main.async {
+            self.setVideoOrientationToInterfaceOrientation()
+        }
+    }
+
     func update(flashMode: FlashMode) {
         self.flashMode = flashMode
     }
@@ -337,11 +346,44 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
          the main thread and session configuration is done on the session queue.
          */
         DispatchQueue.main.async {
-            let videoPreviewLayerOrientation =
-                self.videoOrientation(from: self.deviceOrientation) ?? self.cameraPreview.previewLayer.connection?.videoOrientation
+            let videoPreviewLayerOrientation: AVCaptureVideoOrientation
+            
+            // Check if orientation is locked to a specific mode
+            if self.orientation != .auto {
+                // Get current device/interface orientation for intelligent selection
+                var currentInterfaceOrientation: UIInterfaceOrientation
+                if #available(iOS 13.0, *) {
+                    currentInterfaceOrientation = self.previewView.window?.windowScene?.interfaceOrientation ?? .portrait
+                } else {
+                    currentInterfaceOrientation = UIApplication.shared.statusBarOrientation
+                }
+                
+                switch self.orientation {
+                case .portrait:
+                    if currentInterfaceOrientation == .portraitUpsideDown {
+                        videoPreviewLayerOrientation = .portraitUpsideDown
+                    } else {
+                        videoPreviewLayerOrientation = .portrait
+                    }
+                case .landscape:
+                    if currentInterfaceOrientation == .landscapeRight {
+                        videoPreviewLayerOrientation = .landscapeRight
+                    } else {
+                        videoPreviewLayerOrientation = .landscapeLeft
+                    }
+                default:
+                    // Fallback to auto behavior
+                    videoPreviewLayerOrientation =
+                        self.videoOrientation(from: self.deviceOrientation) ?? self.cameraPreview.previewLayer.connection?.videoOrientation ?? .portrait
+                }
+            } else {
+                // Use device orientation or fallback to preview layer orientation
+                videoPreviewLayerOrientation =
+                    self.videoOrientation(from: self.deviceOrientation) ?? self.cameraPreview.previewLayer.connection?.videoOrientation ?? .portrait
+            }
 
             self.sessionQueue.async {
-                if let photoOutputConnection = self.photoOutput.connection(with: .video), let videoPreviewLayerOrientation {
+                if let photoOutputConnection = self.photoOutput.connection(with: .video) {
                     photoOutputConnection.videoOrientation = videoPreviewLayerOrientation
                 }
 
@@ -694,6 +736,43 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
 
     private func setVideoOrientationToInterfaceOrientation() {
         #if !targetEnvironment(macCatalyst)
+        if self.orientation != .auto {
+            let targetOrientation: AVCaptureVideoOrientation
+            
+            // Get current device/interface orientation for intelligent selection
+            var currentInterfaceOrientation: UIInterfaceOrientation
+            if #available(iOS 13.0, *) {
+                currentInterfaceOrientation = self.previewView.window?.windowScene?.interfaceOrientation ?? .portrait
+            } else {
+                currentInterfaceOrientation = UIApplication.shared.statusBarOrientation
+            }
+            
+            switch self.orientation {
+            case .portrait:
+            // Lock to portrait, choose best portrait orientation based on current state
+                if currentInterfaceOrientation == .portraitUpsideDown {
+                    targetOrientation = .portraitUpsideDown
+                } else {
+                    targetOrientation = .portrait
+                }
+            case .landscape:
+            // Lock to landscape, choose best landscape orientation based on current state
+                if currentInterfaceOrientation == .landscapeRight {
+                    targetOrientation = .landscapeRight
+                } else {
+                    targetOrientation = .landscapeLeft
+                }
+            default:
+            // Fallback to auto behavior
+                targetOrientation = self.videoOrientation(from: currentInterfaceOrientation)
+            }
+
+        
+            self.cameraPreview.previewLayer.connection?.videoOrientation = targetOrientation
+            return
+        }
+        
+        // Use device/interface orientation if not locked (auto mode)
         var interfaceOrientation: UIInterfaceOrientation
         if #available(iOS 13.0, *) {
             interfaceOrientation = self.previewView.window?.windowScene?.interfaceOrientation ?? .portrait
diff --git a/ios/ReactNativeCameraKit/SimulatorCamera.swift b/ios/ReactNativeCameraKit/SimulatorCamera.swift
@@ -32,6 +32,7 @@ class SimulatorCamera: CameraProtocol {
     func setup(cameraType: CameraType, supportedBarcodeType: [CodeFormat]) {
         DispatchQueue.main.async {
             self.mockPreview.cameraTypeLabel.text = "Camera type: \(cameraType)"
+            self.mockPreview.orientationLabel.text = "Orientation: auto"
         }
 
         // Listen to orientation changes
@@ -136,6 +137,19 @@ class SimulatorCamera: CameraProtocol {
         }
     }
 
+    func update(orientation: OrientationMode) {
+        DispatchQueue.main.async {
+            switch orientation {
+            case .auto:
+                self.mockPreview.orientationLabel.text = "Orientation: auto"
+            case .portrait:
+                self.mockPreview.orientationLabel.text = "Orientation: locked to portrait"
+            case .landscape:
+                self.mockPreview.orientationLabel.text = "Orientation: locked to landscape"
+            }
+        }
+    }
+
     func update(maxZoom: Double?) {
         self.maxZoom = maxZoom
     }
diff --git a/ios/ReactNativeCameraKit/SimulatorPreviewView.swift b/ios/ReactNativeCameraKit/SimulatorPreviewView.swift
@@ -11,6 +11,7 @@ class SimulatorPreviewView: UIView {
     let torchModeLabel = UILabel()
     let flashModeLabel = UILabel()
     let cameraTypeLabel = UILabel()
+    let orientationLabel = UILabel()
     let resizeModeLabel = UILabel()
 
     var balloonLayer = CALayer()
@@ -31,7 +32,7 @@ class SimulatorPreviewView: UIView {
         stackView.translatesAutoresizingMaskIntoConstraints = false
         stackView.topAnchor.constraint(equalTo: safeAreaLayoutGuide.topAnchor).isActive = true
         stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
-        [zoomLabel, focusAtLabel, torchModeLabel, flashModeLabel, cameraTypeLabel, resizeModeLabel].forEach {
+        [zoomLabel, focusAtLabel, torchModeLabel, flashModeLabel, cameraTypeLabel, resizeModeLabel, orientationLabel].forEach {
             $0.numberOfLines = 0
             stackView.addArrangedSubview($0)
         }
diff --git a/ios/ReactNativeCameraKit/Types.swift b/ios/ReactNativeCameraKit/Types.swift
@@ -149,6 +149,21 @@ enum SetupResult: Int {
     case sessionConfigurationFailed
 }
 
+@objc(CKOrientationMode)
+public enum OrientationMode: Int, CustomStringConvertible {
+    case auto
+    case portrait
+    case landscape
+
+    public var description: String {
+        switch self {
+        case .auto: return "auto"
+        case .portrait: return "portrait"  
+        case .landscape: return "landscape"
+        }
+    }
+}
+
 enum Orientation: Int {
     case portrait = 0 // ⬆️
     case landscapeLeft = 1 // ⬅️
diff --git a/src/CameraProps.ts b/src/CameraProps.ts
@@ -7,6 +7,7 @@ import {
   type TorchMode,
   type ResizeMode,
   type CodeFormat,
+  type OrientationMode,
 } from './types';
 import { Orientation } from './index';
 
@@ -77,6 +78,7 @@ export interface CameraProps extends ViewProps {
   maxZoom?: number;
   torchMode?: TorchMode;
   cameraType?: CameraType;
+  orientation?: OrientationMode;
   onOrientationChange?: (event: OnOrientationChangeData) => void;
   /**
    * Callback triggered when user pinches to zoom and on startup.
diff --git a/src/specs/CameraNativeComponent.ts b/src/specs/CameraNativeComponent.ts
@@ -30,6 +30,7 @@ export interface NativeProps extends ViewProps {
   maxZoom?: Double;
   torchMode?: string;
   cameraType?: string;
+  orientation?: string;
   onOrientationChange?: DirectEventHandler<OnOrientationChangeData>;
   onZoom?: DirectEventHandler<OnZoom>;
   onError?: DirectEventHandler<{errorMessage: string }>;
diff --git a/src/types.ts b/src/types.ts
@@ -28,6 +28,8 @@ export type ZoomMode = 'on' | 'off';
 
 export type ResizeMode = 'cover' | 'contain';
 
+export type OrientationMode = 'auto' | 'portrait' | 'landscape';
+
 export type CaptureData = {
   uri: string;
   name: string;
