Add mount stress test to CameraKit example app

example/src/App.tsx

@@ -1,20 +1,22 @@
 import React, { useState } from 'react';
-import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';
+import { StyleSheet, Text, View, TouchableOpacity, ScrollView, Button, Alert, TextInput } from 'react-native';
 
 import BarcodeScreenExample from './BarcodeScreenExample';
 import CameraExample from './CameraExample';
 
 const App = () => {
-  const [example, setExample] = useState<JSX.Element>();
+  const [example, setExample] = useState<any>(undefined);
+  const [testNo, setTestNo] = useState(0);
+  const [interval, setIntervalId] = useState<number | null>(null);
+  const [speed, setSpeed] = useState('1000');
+  const onBack = () => setExample(undefined);
 
   if (example) {
     return example;
   }
 
-  const onBack = () => setExample(undefined);
-
   return (
-    <ScrollView style={styles.scroll}>
+    <ScrollView style={styles.scroll} scrollEnabled={false}>
       <View style={styles.container}>
         <Text style={{ fontSize: 60 }}>🎈</Text>
         <Text style={styles.headerText}>React Native Camera Kit</Text>
@@ -24,6 +26,67 @@ const App = () => {
         <TouchableOpacity style={styles.button} onPress={() => setExample(<BarcodeScreenExample onBack={onBack} />)}>
           <Text style={styles.buttonText}>Barcode Scanner</Text>
         </TouchableOpacity>
+        <View>
+          <Text style={[styles.stressHeader, { marginTop: 12 }]}>Mount Stress Test</Text>
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {!testNo ? (
+              <>
+                <View style={styles.inputContainer}>
+                  <Text style={styles.inputLabel}>Speed (ms):</Text>
+                  <TextInput
+                    style={styles.input}
+                    value={speed}
+                    onChangeText={setSpeed}
+                    keyboardType="number-pad"
+                    placeholder="1000"
+                    placeholderTextColor="#999"
+                  />
+                </View>
+
+                <Button
+                  title="Start"
+                  onPress={() => {
+                    Alert.alert(
+                      '2 min or more',
+                      'The mount stress test should run for at least 2 minutes on an iPhone 17 Pro before you can declare it a success. You need to press the stop button yourself.',
+                      [
+                        {
+                          text: 'OK',
+                          onPress: () => {
+                            setIntervalId(
+                              setInterval(() => {
+                                setTestNo((prev) => {
+                                  const newR = prev + 1;
+                                  if (newR % 2 === 0) {
+                                    setExample(<CameraExample key={String(Math.random())} stress onBack={onBack} />);
+                                  } else {
+                                    setExample(undefined);
+                                  }
+                                  return newR;
+                                });
+                              }, parseInt(speed, 10) || 1000),
+                            );
+                          },
+                        },
+                      ],
+                    );
+                  }}
+                />
+              </>
+            ) : (
+              <Button
+                title="STOP STRESS TEST"
+                onPress={() => {
+                  setTestNo(0);
+                  if (interval) {
+                    clearInterval(interval);
+                    setIntervalId(null);
+                  }
+                }}
+              />
+            )}
+          </View>
+        </View>
       </View>
     </ScrollView>
   );
@@ -49,6 +112,11 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     marginBlockEnd: 24,
   },
+  stressHeader: {
+    color: 'white',
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
   button: {
     height: 60,
     borderRadius: 30,
@@ -62,4 +130,24 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontSize: 20,
   },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginVertical: 12,
+    minWidth: 170,
+  },
+  inputLabel: {
+    color: 'white',
+    fontSize: 16,
+    marginRight: 12,
+  },
+  input: {
+    flex: 1,
+    height: 40,
+    borderRadius: 8,
+    backgroundColor: '#333',
+    color: 'white',
+    paddingHorizontal: 12,
+    fontSize: 16,
+  },
 });

example/src/CameraExample.tsx

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { useState, useRef } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import { StyleSheet, Text, View, TouchableOpacity, Image, Animated, ScrollView } from 'react-native';
 import Camera from '../../src/Camera';
 import { type CameraApi, CameraType, type CaptureData } from '../../src/types';
@@ -33,7 +33,7 @@ function median(values: number[]): number {
   return sortedValues.length % 2 ? sortedValues[half] : (sortedValues[half - 1] + sortedValues[half]) / 2;
 }
 
-const CameraExample = ({ onBack }: { onBack: () => void }) => {
+const CameraExample = ({ onBack, stress }: { onBack: () => void; stress?: boolean }) => {
   const cameraRef = useRef<CameraApi>(null);
   const [currentFlashArrayPosition, setCurrentFlashArrayPosition] = useState(0);
   const [captureImages, setCaptureImages] = useState<CaptureData[]>([]);
@@ -46,6 +46,15 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
   const [orientationAnim] = useState(new Animated.Value(3));
   const [resize, setResize] = useState<'contain' | 'cover'>('contain');
 
+  // zoom to random positions every 10ms:
+  useEffect(() => {
+    if (stress !== true) return;
+    const interval = setInterval(() => {
+      setZoom(Math.random() * 10);
+    }, 500);
+    return () => clearInterval(interval);
+  }, [stress]);
+
   // iOS will error out if capturing too fast,
   // so block capturing until the current capture is done
   // This also minimizes issues of delayed capturing
@@ -107,7 +116,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
       if (!image) return;
 
       setCaptured(true);
-      setCaptureImages(prev => [...prev, image]);
+      setCaptureImages((prev) => [...prev, image]);
       console.log('image', image);
       times.push(Date.now() - start);
     }
@@ -215,10 +224,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
 
       <View style={styles.cameraContainer}>
         {showImageUri ? (
-          <ScrollView
-            maximumZoomScale={10}
-            contentContainerStyle={{ flexGrow: 1 }}
-          >
+          <ScrollView maximumZoomScale={10} contentContainerStyle={{ flexGrow: 1 }}>
             <Image source={{ uri: showImageUri }} style={styles.cameraPreview} />
           </ScrollView>
         ) : (
@@ -237,6 +243,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
             }}
             torchMode={torchMode ? 'on' : 'off'}
             shutterPhotoSound
+            iOsSleepBeforeStarting={100}
             maxPhotoQualityPrioritization="speed"
             onCaptureButtonPressIn={() => {
               console.log('capture button pressed in');
@@ -299,8 +306,7 @@ const CameraExample = ({ onBack }: { onBack: () => void }) => {
                 } else {
                   setShowImageUri(captureImages[captureImages.length - 1].uri);
                 }
-              }}
-            >
+              }}>
               <Image source={{ uri: captureImages[captureImages.length - 1].uri }} style={styles.thumbnail} />
             </TouchableOpacity>
           )}

ios/ReactNativeCameraKit/CKCameraManager.mm

@@ -22,6 +22,7 @@ @interface RCT_EXTERN_MODULE(CKCameraManager, RCTViewManager)
 RCT_EXPORT_VIEW_PROPERTY(ratioOverlay, NSString)
 RCT_EXPORT_VIEW_PROPERTY(ratioOverlayColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(resizeMode, CKResizeMode)
+RCT_EXPORT_VIEW_PROPERTY(iOsSleepBeforeStarting, NSNumber)
 
 RCT_EXPORT_VIEW_PROPERTY(scanBarcode, BOOL)
 RCT_EXPORT_VIEW_PROPERTY(onReadCode, RCTDirectEventBlock)

ios/ReactNativeCameraKit/CKCameraViewComponentView.mm

@@ -242,6 +242,10 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
         _view.maxZoom = newProps.maxZoom > -1 ? @(newProps.maxZoom) : nil;
         [changedProps addObject:@"maxZoom"];
     }
+    if (oldViewProps.iOsSleepBeforeStarting != newProps.iOsSleepBeforeStarting) {
+        _view.iOsSleepBeforeStarting = newProps.iOsSleepBeforeStarting >= 0 ? @(newProps.iOsSleepBeforeStarting) : nil;
+        [changedProps addObject:@"iOsSleepBeforeStarting"];
+    }
     float barcodeWidth = newProps.barcodeFrameSize.width;
     float barcodeHeight = newProps.barcodeFrameSize.height;
     if (barcodeWidth != [_view.barcodeFrameSize[@"width"] floatValue] || barcodeHeight != [_view.barcodeFrameSize[@"height"] floatValue]) {

ios/ReactNativeCameraKit/CameraProtocol.swift

@@ -17,6 +17,7 @@ protocol CameraProtocol: AnyObject, FocusInterfaceViewDelegate {
     func update(cameraType: CameraType)
     func update(onOrientationChange: RCTDirectEventBlock?)
     func update(onZoom: RCTDirectEventBlock?)
+    func update(iOsSleepBeforeStartingMs: Int?)
     func update(zoom: Double?)
     func update(maxZoom: Double?)
     func update(resizeMode: ResizeMode)

ios/ReactNativeCameraKit/CameraView.swift

@@ -22,7 +22,7 @@
     // scanner
     private var lastBarcodeDetectedTime: TimeInterval = 0
     private var scannerInterfaceView: ScannerInterfaceView
 
     // camera
     private var ratioOverlayView: RatioOverlayView?
 
@@ -58,11 +58,12 @@
     @objc public var zoomMode: ZoomMode = .on
     @objc public var zoom: NSNumber?
     @objc public var maxZoom: NSNumber?
+    @objc public var iOsSleepBeforeStarting: NSNumber?
 
     @objc public var onCaptureButtonPressIn: RCTDirectEventBlock?
     @objc public var onCaptureButtonPressOut: RCTDirectEventBlock?
 
     var eventInteraction: Any? = nil
 
     // MARK: - Setup
 
@@ -82,6 +83,8 @@
         if hasPropBeenSetup && hasPermissionBeenGranted && !hasCameraBeenSetup {
            let convertedAllowedTypes = convertAllowedBarcodeTypes()
 
+            camera.update(iOsSleepBeforeStartingMs: iOsSleepBeforeStarting?.intValue)
+
             hasCameraBeenSetup = true
             #if targetEnvironment(macCatalyst)
             // Force front camera on Mac Catalyst during initial setup
@@ -143,10 +146,10 @@
         focusInterfaceView.delegate = camera
 
         handleCameraPermission()
 
         configureHardwareInteraction()
     }
 
     private func configureHardwareInteraction() {
         #if !targetEnvironment(macCatalyst)
         // Create a new capture event interaction with a handler that captures a photo.
@@ -178,7 +181,7 @@
         super.reactSetFrame(frame)
         self.updateSubviewsBounds(frame)
     }
 
     @objc public func updateSubviewsBounds(_ frame: CGRect) {
         camera.previewView.frame = bounds
 
@@ -286,6 +289,9 @@
         }
 
         // Others
+        if changedProps.contains("iOsSleepBeforeStarting") {
+            camera.update(iOsSleepBeforeStartingMs: iOsSleepBeforeStarting?.intValue)
+        }
         if changedProps.contains("focusMode") {
             focusInterfaceView.update(focusMode: focusMode)
         }
@@ -430,7 +436,7 @@
         return temporaryFileURL
     }
 
     private func onBarcodeRead(barcode: String, codeFormat:CodeFormat) {
         // Throttle barcode detection
         let now = Date.timeIntervalSinceReferenceDate
         guard lastBarcodeDetectedTime + Double(scanThrottleDelay) / 1000 < now else {
@@ -439,7 +445,7 @@
 
         lastBarcodeDetectedTime = now
 
         onReadCode?(["codeStringValue": barcode,"codeFormat":codeFormat.rawValue])
     }
 
     private func convertAllowedBarcodeTypes() -> [CodeFormat] {
@@ -460,4 +466,4 @@
             camera.zoomPinchChange(pinchScale: pinchRecognizer.scale)
         }
     }
 }

ios/ReactNativeCameraKit/RealCamera.swift

@@ -21,7 +21,7 @@
     private let session = AVCaptureSession()
     // Communicate with the session and other session objects on this queue.
     private let sessionQueue = DispatchQueue(label: "com.tesla.react-native-camera-kit")
-
+    
     // utilities
     private var setupResult: SetupResult = .notStarted
     private var isSessionRunning: Bool = false
@@ -45,6 +45,7 @@
     private var lastOnZoom: Double?
     private var zoom: Double?
     private var maxZoom: Double?
+    private var sleepBeforeStartingMs: Int = 100
 
     // orientation
     private var deviceOrientation = UIDeviceOrientation.unknown
@@ -127,6 +128,12 @@
             self.addObservers()
 
             if self.setupResult == .success {
+                let delay = self.sleepBeforeStartingMs
+                // Guard against calling startRunning while commitConfiguration is still finishing.
+                // See README iOsSleepBeforeStarting for details about preventing occasional crashes.
+                if delay > 0 {
+                    Thread.sleep(forTimeInterval: Double(delay) / 1000.0)
+                }
                 self.session.startRunning()
             }
 
@@ -171,7 +178,7 @@
         self.update(zoom: self.zoom)
     }
 
     func update(zoom z: Double?) {
         sessionQueue.async {
             self.zoom = z == -1 ? nil : z
             guard let videoDevice = self.videoDeviceInput?.device else { return }
@@ -207,6 +214,12 @@
         self.onZoomCallback = onZoom
     }
 
+    func update(iOsSleepBeforeStartingMs: Int?) {
+        let defaultDelayMs = 100
+        let providedDelay = iOsSleepBeforeStartingMs ?? defaultDelayMs
+        sleepBeforeStartingMs = max(0, providedDelay)
+    }
+
     func focus(at touchPoint: CGPoint, focusBehavior: FocusBehavior) {
         DispatchQueue.main.async {
             let devicePoint = self.cameraPreview.previewLayer.captureDevicePointConverted(fromLayerPoint: touchPoint)

ios/ReactNativeCameraKit/SimulatorCamera.swift

@@ -66,6 +66,10 @@ class SimulatorCamera: CameraProtocol {
         self.onZoom = onZoom
     }
 
+    func update(iOsSleepBeforeStartingMs: Int?) {
+        // No-op on simulator; startup delay only applies to real devices.
+    }
+
     func setVideoDevice(zoomFactor: Double) {
         self.videoDeviceZoomFactor = zoomFactor
         self.mockPreview.zoomLabel.text = "Zoom: \(zoomFactor)"

src/Camera.ios.tsx

@@ -14,6 +14,7 @@ const Camera = React.forwardRef<CameraApi, CameraProps>((props, ref) => {
   props.zoom = props.zoom ?? -1;
   props.maxZoom = props.maxZoom ?? -1;
   props.scanThrottleDelay = props.scanThrottleDelay ?? -1;
+  props.iOsSleepBeforeStarting = props.iOsSleepBeforeStarting ?? -1;
 
   props.allowedBarcodeTypes = props.allowedBarcodeTypes ?? supportedCodeFormats;
 

src/CameraProps.ts

@@ -113,6 +113,8 @@ export interface CameraProps extends ViewProps {
   scanThrottleDelay?: number;
   /** **iOS Only**. 'speed' provides 60-80% faster image capturing */
   maxPhotoQualityPrioritization?: 'balanced' | 'quality' | 'speed';
+  /** **iOS Only**. Delay in milliseconds before the camera session starts; default `100`. Set to `0` to skip. Helpful to ensure `session.commitConfiguration()` finishes before `session.startRunning()`, reducing occasional startup crashes when toggling cameras repeatedly. */
+  iOsSleepBeforeStarting?: number;
   /** **Android only**. Play a shutter capture sound when capturing a photo */
   shutterPhotoSound?: boolean;
   onCaptureButtonPressIn?: ({ nativeEvent: {} }) => void;

src/specs/CameraNativeComponent.ts

@@ -46,6 +46,7 @@ export interface NativeProps extends ViewProps {
   resetFocusWhenMotionDetected?: boolean;
   resizeMode?: string;
   scanThrottleDelay?: WithDefault<Int32, -1>;
+  iOsSleepBeforeStarting?: WithDefault<Int32, -1>;
   barcodeFrameSize?: { width?: WithDefault<Float, 300>; height?: WithDefault<Float, 150> };
   shutterPhotoSound?: boolean;
   onOrientationChange?: DirectEventHandler<OnOrientationChangeData>;