diff --git a/native/media/camera-modal.react.js b/native/media/camera-modal.react.js
--- a/native/media/camera-modal.react.js
+++ b/native/media/camera-modal.react.js
@@ -19,7 +19,6 @@
 import Orientation from 'react-native-orientation-locker';
 import type { Orientations } from 'react-native-orientation-locker';
 import Reanimated, {
-  EasingNode as ReanimatedEasingNode,
   Easing as ReanimatedEasing,
   useAnimatedReaction,
   useAnimatedStyle,
@@ -30,6 +29,8 @@
   cancelAnimation,
   runOnJS,
   interpolate,
+  Extrapolate,
+  type SharedValue,
 } from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -54,15 +55,9 @@
 import { colors } from '../themes/colors.js';
 import { type DeviceCameraInfo } from '../types/camera.js';
 import type { NativeMethods } from '../types/react-native.js';
-import {
-  AnimatedView,
-  type ViewStyle,
-  type AnimatedViewStyle,
-} from '../types/styles.js';
+import { type ViewStyle, type AnimatedViewStyle } from '../types/styles.js';
 import { clampV2 } from '../utils/animation-utils.js';
 
-const { Value, Extrapolate, interpolateNode, timing } = Reanimated;
-
 const maxZoom = 16;
 const zoomUpdateFactor = (() => {
   if (Platform.OS === 'ios') {
@@ -79,7 +74,7 @@
 
 const stagingModeAnimationConfig = {
   duration: 150,
-  easing: ReanimatedEasingNode.inOut(ReanimatedEasingNode.ease),
+  easing: ReanimatedEasing.inOut(ReanimatedEasing.ease),
 };
 const sendButtonAnimationConfig = {
   duration: 150,
@@ -179,13 +174,13 @@
   +onFlashButtonLayout: () => void,
   +cancelFocusAnimation: () => void,
   +focusIndicatorStyle: ViewStyle,
+  +stagingModeProgress: SharedValue<number>,
+  +overlayStyle: ViewStyle,
 };
 
 class CameraModal extends React.PureComponent<Props> {
-  stagingModeProgress: Value = new Value(0);
   sendButtonProgress: Animated.Value = new Animated.Value(0);
   sendButtonStyle: ViewStyle;
-  overlayStyle: AnimatedViewStyle;
 
   constructor(props: Props) {
     super(props);
@@ -198,16 +193,6 @@
       opacity: this.sendButtonProgress,
       transform: [{ scale: sendButtonScale }],
     };
-
-    const overlayOpacity = interpolateNode(this.stagingModeProgress, {
-      inputRange: [0, 0.01, 1],
-      outputRange: [0, 0.5, 0],
-      extrapolate: Extrapolate.CLAMP,
-    });
-    this.overlayStyle = {
-      ...styles.overlay,
-      opacity: overlayOpacity,
-    };
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -226,12 +211,12 @@
 
     if (this.props.stagingMode && !prevProps.stagingMode) {
       this.props.cancelFocusAnimation();
-      timing(this.stagingModeProgress, {
-        ...stagingModeAnimationConfig,
-        toValue: 1,
-      }).start();
+      this.props.stagingModeProgress.value = withTiming(
+        1,
+        stagingModeAnimationConfig,
+      );
     } else if (!this.props.stagingMode && prevProps.stagingMode) {
-      this.stagingModeProgress.setValue(0);
+      this.props.stagingModeProgress.value = 0;
     }
 
     if (this.props.pendingPhotoCapture && !prevProps.pendingPhotoCapture) {
@@ -416,7 +401,7 @@
         >
           {this.renderCamera}
         </RNCamera>
-        <AnimatedView style={this.overlayStyle} pointerEvents="none" />
+        <Reanimated.View style={this.props.overlayStyle} pointerEvents="none" />
       </Reanimated.View>
     );
   }
@@ -1051,6 +1036,25 @@
       startFocusAnimation,
     ]);
 
+    const stagingModeProgress = useSharedValue(0);
+
+    const overlayAnimatedStyle = useAnimatedStyle(() => {
+      const overlayOpacity = interpolate(
+        stagingModeProgress.value,
+        [0, 0.01, 1],
+        [0, 0.5, 0],
+        Extrapolate.CLAMP,
+      );
+      return {
+        opacity: overlayOpacity,
+      };
+    });
+
+    const overlayStyle = React.useMemo(
+      () => [styles.overlay, overlayAnimatedStyle],
+      [overlayAnimatedStyle],
+    );
+
     return (
       <CameraModal
         {...props}
@@ -1092,6 +1096,8 @@
         onFlashButtonLayout={onFlashButtonLayout}
         cancelFocusAnimation={cancelFocusAnimation}
         focusIndicatorStyle={focusIndicatorStyle}
+        stagingModeProgress={stagingModeProgress}
+        overlayStyle={overlayStyle}
       />
     );
   });