Add resize mode cover/contain

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: {

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)

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

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)

ios/ReactNativeCameraKit/CameraView.swift

@@ -33,6 +33,7 @@ class CameraView: UIView {
     // props
     // camera settings
     @objc var cameraType: CameraType = .back
+    @objc var resizeMode: ResizeMode = .cover
     @objc var flashMode: FlashMode = .auto
     @objc var torchMode: TorchMode = .off
     // ratio overlay
@@ -162,6 +163,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") {

ios/ReactNativeCameraKit/RealCamera.swift

@@ -27,6 +27,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)?
@@ -291,6 +292,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?) -> Void,
                         onError: @escaping (_ message: String) -> Void) {

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 }
 
@@ -128,7 +129,6 @@ class SimulatorCamera: CameraProtocol {
     func update(cameraType: CameraType) {
         DispatchQueue.main.async {
             self.mockPreview.cameraTypeLabel.text = "Camera type: \(cameraType)"
-
             self.mockPreview.randomize()
         }
     }
@@ -161,6 +161,13 @@ class SimulatorCamera: CameraProtocol {
             }
         }
     }
+
+    func update(resizeMode: ResizeMode) {
+        DispatchQueue.main.async {
+            self.mockPreview.resizeModeLabel.text = "Resize mode: \(resizeMode)"
+            self.mockPreview.randomize()
+        }
+    }
 
 
     func isBarcodeScannerEnabled(_ isEnabled: Bool,

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)
         }

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

src/Camera.d.ts

@@ -1,4 +1,4 @@
-import { CameraApi, FlashMode, FocusMode, ZoomMode, TorchMode, CameraType } from './types';
+import { CameraApi, FlashMode, FocusMode, ZoomMode, TorchMode, CameraType, ResizeMode } from './types';
 import { Orientation } from './index';
 
 export type OnReadCodeData = {
@@ -95,6 +95,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 */

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 };

src/types.ts

@@ -11,6 +11,8 @@ export type FocusMode = 'on' | 'off';
 
 export type ZoomMode = 'on' | 'off';
 
+export type ResizeMode = 'cover' | 'contain';
+
 export type CaptureData = {
   uri: string;
   name: string;