Add resize mode cover/contain (#644)

* Add resize mode cover/contain * Add resize to simulator, change type enum and add listener for resize * Add resize to camera example * Add description of resizeMode to readme * Add description of resizeMode to readme * Update ios/ReactNativeCameraKit/CameraView.swift --------- Co-authored-by: Seph Soliman <[email protected]>
teslamotors · Apr 30, 2024 · 80c517d · 80c517d
1 parent eb96b53
commit 80c517d
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 43 deletions.
diff --git a/README.md b/README.md
diff --git a/example/images/resize.png b/example/images/resize.png
diff --git a/example/src/CameraExample.tsx b/example/src/CameraExample.tsx
@@ -36,6 +36,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
   const [showImageUri, setShowImageUri] = useState<string>('');
   const [zoom, setZoom] = useState<number | undefined>();
   const [orientationAnim] = useState(new Animated.Value(3));
+  const [resize, setResize] = useState<'contain' | 'cover'>('contain');
 
   // iOS will error out if capturing too fast,
   // so block capturing until the current capture is done
@@ -65,6 +66,14 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
     setFlashData(flashArray[newPosition]);
   };
 
+  const onSetResize = () => {
+    if (resize === 'contain') {
+      setResize('cover');
+    } else {
+      setResize('contain');
+    }
+  };
+
   const onSetTorch = () => {
     setTorchMode(!torchMode);
   };
@@ -91,13 +100,37 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
     console.log('image', image);
   };
 
-  function CaptureButton({ onPress, children }: { onPress: () => void, children?: React.ReactNode }) {
-    const w = 80, brdW = 4, spc = 6;
-    const cInner = 'white', cOuter = 'white';
+  function CaptureButton({ onPress, children }: { onPress: () => void; children?: React.ReactNode }) {
+    const w = 80,
+      brdW = 4,
+      spc = 6;
+    const cInner = 'white',
+      cOuter = 'white';
     return (
       <TouchableOpacity onPress={onPress} style={{ width: w, height: w }}>
-        <View style={{ position: 'absolute', left: 0, top: 0, width: w, height: w, borderColor: cOuter, borderWidth: brdW, borderRadius: w / 2 }} />
-        <View style={{ position: 'absolute', left: brdW + spc, top: brdW + spc, width: w - ((brdW + spc) * 2), height: w - ((brdW + spc) * 2), backgroundColor: cInner, borderRadius: (w - ((brdW + spc) * 2)) / 2 }} />
+        <View
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: w,
+            height: w,
+            borderColor: cOuter,
+            borderWidth: brdW,
+            borderRadius: w / 2,
+          }}
+        />
+        <View
+          style={{
+            position: 'absolute',
+            left: brdW + spc,
+            top: brdW + spc,
+            width: w - (brdW + spc) * 2,
+            height: w - (brdW + spc) * 2,
+            backgroundColor: cInner,
+            borderRadius: (w - (brdW + spc) * 2) / 2,
+          }}
+        />
         {children}
       </TouchableOpacity>
     );
@@ -111,7 +144,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
     inputRange: [1, 4],
     outputRange: ['180deg', '-90deg'],
   });
-  const uiRotationStyle = rotateUi ? {transform: [{ rotate: uiRotation }]} : undefined;
+  const uiRotationStyle = rotateUi ? { transform: [{ rotate: uiRotation }] } : undefined;
 
   function rotateUiTo(rotationValue: number) {
     Animated.timing(orientationAnim, {
@@ -128,12 +161,20 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
       <SafeAreaView style={styles.topButtons}>
         {flashData.image && (
           <TouchableOpacity style={styles.topButton} onPress={onSetFlash}>
-            <Animated.Image source={flashData.image} resizeMode="contain" style={[styles.topButtonImg, uiRotationStyle]} />
+            <Animated.Image
+              source={flashData.image}
+              resizeMode="contain"
+              style={[styles.topButtonImg, uiRotationStyle]}
+            />
           </TouchableOpacity>
         )}
 
         <TouchableOpacity style={styles.topButton} onPress={onSwitchCameraPressed}>
-          <Animated.Image source={require('../images/cameraFlipIcon.png')} resizeMode="contain" style={[styles.topButtonImg, uiRotationStyle]} />
+          <Animated.Image
+            source={require('../images/cameraFlipIcon.png')}
+            resizeMode="contain"
+            style={[styles.topButtonImg, uiRotationStyle]}
+          />
         </TouchableOpacity>
 
         <TouchableOpacity style={styles.topButton} onPress={() => setZoom(1)}>
@@ -149,6 +190,14 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
             style={[styles.topButtonImg, uiRotationStyle]}
           />
         </TouchableOpacity>
+
+        <TouchableOpacity style={styles.topButton} onPress={onSetResize}>
+          <Animated.Image
+            source={require('../images/resize.png')}
+            resizeMode="contain"
+            style={[styles.topButtonImg, uiRotationStyle]}
+          />
+        </TouchableOpacity>
       </SafeAreaView>
 
       <View style={styles.cameraContainer}>
@@ -160,6 +209,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
             style={styles.cameraPreview}
             cameraType={cameraType}
             flashMode={flashData?.mode}
+            resizeMode={resize}
             resetFocusWhenMotionDetected
             zoom={zoom}
             maxZoom={10}
@@ -265,7 +315,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   cameraPreview: {
-    aspectRatio: 3 / 4,
+    flex: 1,
     width: '100%',
   },
   bottomButtons: {

diff --git a/ios/ReactNativeCameraKit/CKCameraManager.m b/ios/ReactNativeCameraKit/CKCameraManager.m
@@ -20,6 +20,7 @@ @interface RCT_EXTERN_MODULE(CKCameraManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(torchMode, CKTorchMode)
 RCT_EXPORT_VIEW_PROPERTY(ratioOverlay, NSString)
 RCT_EXPORT_VIEW_PROPERTY(ratioOverlayColor, UIColor)
+RCT_EXPORT_VIEW_PROPERTY(resizeMode, CKResizeMode)
 
 RCT_EXPORT_VIEW_PROPERTY(scanBarcode, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onReadCode, RCTDirectEventBlock)

diff --git a/ios/ReactNativeCameraKit/CKTypes+RCTConvert.m b/ios/ReactNativeCameraKit/CKTypes+RCTConvert.m
@@ -41,4 +41,9 @@ @implementation RCTConvert (CKTypes)
     @"off": @(CKZoomModeOff)
 }), CKZoomModeOn, integerValue)
 
+RCT_ENUM_CONVERTER(CKResizeMode, (@{
+    @"cover": @(CKResizeModeCover),
+    @"contain": @(CKResizeModeContain)
+}), CKResizeModeCover, integerValue)
+
 @end
diff --git a/ios/ReactNativeCameraKit/CameraProtocol.swift b/ios/ReactNativeCameraKit/CameraProtocol.swift
@@ -18,6 +18,7 @@ protocol CameraProtocol: AnyObject, FocusInterfaceViewDelegate {
     func update(onZoom: RCTDirectEventBlock?)
     func update(zoom: Double?)
     func update(maxZoom: Double?)
+    func update(resizeMode: ResizeMode)
 
     func zoomPinchStart()
     func zoomPinchChange(pinchScale: CGFloat)

diff --git a/ios/ReactNativeCameraKit/CameraView.swift b/ios/ReactNativeCameraKit/CameraView.swift
@@ -33,6 +33,7 @@ class CameraView: UIView {
     // props
     // camera settings
     @objc var cameraType: CameraType = .back
+    @objc var resizeMode: ResizeMode = .contain
     @objc var flashMode: FlashMode = .auto
     @objc var torchMode: TorchMode = .off
     // ratio overlay
@@ -163,6 +164,10 @@ class CameraView: UIView {
         if changedProps.contains("onZoom") {
             camera.update(onZoom: onZoom)
         }
+
+        if changedProps.contains("resizeMode") {
+            camera.update(resizeMode: resizeMode)
+        }
 
         // Ratio overlay
         if changedProps.contains("ratioOverlay") {

diff --git a/ios/ReactNativeCameraKit/RealCamera.swift b/ios/ReactNativeCameraKit/RealCamera.swift
@@ -30,6 +30,7 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
     private let photoOutput = AVCapturePhotoOutput()
     private let metadataOutput = AVCaptureMetadataOutput()
 
+    private var resizeMode: ResizeMode = .contain
     private var flashMode: FlashMode = .auto
     private var torchMode: TorchMode = .off
     private var resetFocus: (() -> Void)?
@@ -295,6 +296,17 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
         }
     }
 
+    func update(resizeMode: ResizeMode) {
+        DispatchQueue.main.async {
+            switch resizeMode {
+            case .cover:
+                self.cameraPreview.previewLayer.videoGravity = .resizeAspectFill
+            case .contain:
+                self.cameraPreview.previewLayer.videoGravity = .resizeAspect
+            }
+        }
+    }
+
     func capturePicture(onWillCapture: @escaping () -> Void,
                         onSuccess: @escaping (_ imageData: Data, _ thumbnailData: Data?, _ dimensions: CMVideoDimensions) -> Void,
                         onError: @escaping (_ message: String) -> Void) {

diff --git a/ios/ReactNativeCameraKit/SimulatorCamera.swift b/ios/ReactNativeCameraKit/SimulatorCamera.swift
@@ -17,6 +17,7 @@ class SimulatorCamera: CameraProtocol {
     private var wideAngleZoomFactor: Double = 2.0
     private var zoom: Double?
     private var maxZoom: Double?
+    private var resizeMode: ResizeMode = .contain
 
     var previewView: UIView { mockPreview }
 
@@ -127,7 +128,6 @@ class SimulatorCamera: CameraProtocol {
     func update(cameraType: CameraType) {
         DispatchQueue.main.async {
             self.mockPreview.cameraTypeLabel.text = "Camera type: \(cameraType)"
-
             self.mockPreview.randomize()
         }
     }
@@ -161,6 +161,14 @@ class SimulatorCamera: CameraProtocol {
         }
     }
 
+    func update(resizeMode: ResizeMode) {
+        DispatchQueue.main.async {
+            self.mockPreview.resizeModeLabel.text = "Resize mode: \(resizeMode)"
+            self.mockPreview.randomize()
+        }
+    }
+
+
     func isBarcodeScannerEnabled(_ isEnabled: Bool,
                                  supportedBarcodeTypes: [CodeFormat],
                                  onBarcodeRead: ((_ barcode: String,_ codeFormat:CodeFormat) -> Void)?) {}

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 resizeModeLabel = UILabel()
 
     var balloonLayer = CALayer()
 
@@ -30,7 +31,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].forEach {
+        [zoomLabel, focusAtLabel, torchModeLabel, flashModeLabel, cameraTypeLabel, resizeModeLabel].forEach {
             $0.numberOfLines = 0
             stackView.addArrangedSubview($0)
         }

diff --git a/ios/ReactNativeCameraKit/Types.swift b/ios/ReactNativeCameraKit/Types.swift
@@ -105,6 +105,19 @@ public enum ZoomMode: Int, CustomStringConvertible {
     }
 }
 
+@objc(CKResizeMode)
+public enum ResizeMode: Int, CustomStringConvertible {
+    case cover
+    case contain
+
+    public var description: String {
+        switch self {
+        case .cover: return "cover"
+        case .contain: return "contain"
+        }
+    }
+}
+
 @objc(CKSetupResult)
 enum SetupResult: Int {
     case notStarted

diff --git a/src/Camera.d.ts b/src/Camera.d.ts
@@ -1,4 +1,4 @@
-import { CameraApi, FlashMode, FocusMode, ZoomMode, TorchMode, CameraType, CodeFormat } from './types';
+import { CameraApi, FlashMode, FocusMode, ZoomMode, TorchMode, CameraType, CodeFormat, ResizeMode } from './types';
 import { Orientation } from './index';
 
 export type OnReadCodeData = {
@@ -96,6 +96,7 @@ export interface CameraProps {
   ratioOverlayColor?: number | string;
   resetFocusTimeout?: number;
   resetFocusWhenMotionDetected?: boolean;
+  resizeMode?: ResizeMode;
   /** **iOS Only**. Throttle how often the barcode scanner triggers a new scan */
   scanThrottleDelay?: number;
   /** **Android only**. Play a shutter capture sound when capturing a photo */

diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,7 @@
 import { NativeModules } from 'react-native';
 
 import Camera from './Camera';
-import { CameraApi, CameraType, CaptureData, FlashMode, FocusMode, TorchMode, ZoomMode } from './types';
+import { CameraApi, CameraType, CaptureData, FlashMode, FocusMode, TorchMode, ZoomMode, ResizeMode } from './types';
 
 const { CameraKit } = NativeModules;
 
@@ -15,4 +15,4 @@ export const Orientation = {
 
 export default CameraKit;
 
-export { Camera, CameraType, TorchMode, FlashMode, FocusMode, ZoomMode, CameraApi, CaptureData };
+export { Camera, CameraType, TorchMode, FlashMode, FocusMode, ZoomMode, CameraApi, CaptureData, ResizeMode };
diff --git a/src/types.ts b/src/types.ts
@@ -13,6 +13,8 @@ export type FocusMode = 'on' | 'off';
 
 export type ZoomMode = 'on' | 'off';
 
+export type ResizeMode = 'cover' | 'contain';
+
 export type CaptureData = {
   uri: string;
   name: string;