Add mount stress test to CameraKit example app

scarlac · scarlac · commit f5e3bc98e9e9 · 2026-01-05T14:33:04.000-08:00
Introduces a mount stress test feature in the example app, allowing repeated mounting and unmounting of the CameraExample component at a configurable interval. Updates CameraExample to support a 'stress' mode that triggers image capture and random zoom changes on mount.
diff --git a/README.md b/README.md
diff --git a/example/src/App.tsx b/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,
+  },
 });
diff --git a/example/src/CameraExample.tsx b/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>
           )}
diff --git a/ios/ReactNativeCameraKit/CKCameraManager.mm b/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)
diff --git a/ios/ReactNativeCameraKit/CKCameraViewComponentView.mm b/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]) {
diff --git a/ios/ReactNativeCameraKit/CameraProtocol.swift b/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)
diff --git a/ios/ReactNativeCameraKit/CameraView.swift b/ios/ReactNativeCameraKit/CameraView.swift
@@ -58,6 +58,7 @@ public class CameraView: UIView {
     @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?
@@ -82,6 +83,8 @@ public class CameraView: UIView {
         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
@@ -286,6 +289,9 @@ public class CameraView: UIView {
         }
 
         // Others
+        if changedProps.contains("iOsSleepBeforeStarting") {
+            camera.update(iOsSleepBeforeStartingMs: iOsSleepBeforeStarting?.intValue)
+        }
         if changedProps.contains("focusMode") {
             focusInterfaceView.update(focusMode: focusMode)
         }
diff --git a/ios/ReactNativeCameraKit/RealCamera.swift b/ios/ReactNativeCameraKit/RealCamera.swift
@@ -21,7 +21,7 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
     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 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
     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 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
             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()
             }
 
@@ -207,6 +214,12 @@ class RealCamera: NSObject, CameraProtocol, AVCaptureMetadataOutputObjectsDelega
         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)
diff --git a/ios/ReactNativeCameraKit/SimulatorCamera.swift b/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)"
diff --git a/src/Camera.ios.tsx b/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;
 
diff --git a/src/CameraProps.ts b/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;
diff --git a/src/specs/CameraNativeComponent.ts b/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>;
