diff --git a/native/components/full-screen-view-modal.react.js b/native/components/full-screen-view-modal.react.js
--- a/native/components/full-screen-view-modal.react.js
+++ b/native/components/full-screen-view-modal.react.js
@@ -26,6 +26,9 @@
   Easing,
   withDecay,
   cancelAnimation,
+  useAnimatedStyle,
+  interpolate,
+  Extrapolate,
 } from 'react-native-reanimated';
 import {
   SafeAreaView,
@@ -52,17 +55,6 @@
 import type { UserProfileBottomSheetNavigationProp } from '../user-profile/user-profile-bottom-sheet-navigator.react.js';
 import { clampV2 } from '../utils/animation-utils.js';
 
-const {
-  Value,
-  Node,
-  Extrapolate,
-  add,
-  sub,
-  multiply,
-  divide,
-  interpolateNode,
-} = Animated;
-
 const defaultTimingConfig = {
   duration: 250,
   easing: Easing.out(Easing.ease),
@@ -109,127 +101,13 @@
   +onCloseButtonLayout: () => void,
   +onMediaIconsLayout: () => void,
   +close: () => void,
+  +contentViewContainerStyle: ViewStyle,
+  +animatedBackdropStyle: AnimatedViewStyle,
+  +animatedCloseButtonStyle: AnimatedViewStyle,
+  +animatedMediaIconsButtonStyle: AnimatedViewStyle,
 };
 
 class FullScreenViewModal extends React.PureComponent<Props> {
-  centerX: Value;
-  centerY: Value;
-  frameWidth: Value;
-  frameHeight: Value;
-  imageWidth: Value;
-  imageHeight: Value;
-
-  scale: Node;
-  x: Node;
-  y: Node;
-  backdropOpacity: Node;
-  imageContainerOpacity: Node;
-  actionLinksOpacity: Node;
-  closeButtonOpacity: Node;
-
-  constructor(props: Props) {
-    super(props);
-
-    const { imageWidth, imageHeight } = this;
-    const left = sub(this.centerX, divide(imageWidth, 2));
-    const top = sub(this.centerY, divide(imageHeight, 2));
-
-    const { initialCoordinates } = props.route.params;
-    const initialScale = divide(initialCoordinates.width, imageWidth);
-    const initialTranslateX = sub(
-      initialCoordinates.x + initialCoordinates.width / 2,
-      add(left, divide(imageWidth, 2)),
-    );
-    const initialTranslateY = sub(
-      initialCoordinates.y + initialCoordinates.height / 2,
-      add(top, divide(imageHeight, 2)),
-    );
-
-    const { overlayContext } = props;
-    invariant(overlayContext, 'FullScreenViewModal should have OverlayContext');
-    const navigationProgress = overlayContext.position;
-    invariant(
-      navigationProgress,
-      'position should be defined in FullScreenViewModal',
-    );
-
-    // The all-important outputs
-    const curScale = new Value(1);
-    const curX = new Value(0);
-    const curY = new Value(0);
-    const curBackdropOpacity = new Value(1);
-    const curCloseButtonOpacity = new Value(1);
-    const curActionLinksOpacity = new Value(1);
-
-    const updates: Array<Node> = [];
-    const updatedScale = [updates, curScale];
-    const updatedCurX = [updates, curX];
-    const updatedCurY = [updates, curY];
-    const updatedBackdropOpacity = [updates, curBackdropOpacity];
-    const updatedCloseButtonOpacity = [updates, curCloseButtonOpacity];
-    const updatedActionLinksOpacity = [updates, curActionLinksOpacity];
-
-    const reverseNavigationProgress = sub(1, navigationProgress);
-    this.scale = add(
-      multiply(reverseNavigationProgress, initialScale),
-      multiply(navigationProgress, updatedScale),
-    );
-    this.x = add(
-      multiply(reverseNavigationProgress, initialTranslateX),
-      multiply(navigationProgress, updatedCurX),
-    );
-    this.y = add(
-      multiply(reverseNavigationProgress, initialTranslateY),
-      multiply(navigationProgress, updatedCurY),
-    );
-    this.backdropOpacity = multiply(navigationProgress, updatedBackdropOpacity);
-    this.imageContainerOpacity = interpolateNode(navigationProgress, {
-      inputRange: [0, 0.1],
-      outputRange: [0, 1],
-      extrapolate: Extrapolate.CLAMP,
-    });
-    const buttonOpacity = interpolateNode(updatedBackdropOpacity, {
-      inputRange: [0.95, 1],
-      outputRange: [0, 1],
-      extrapolate: Extrapolate.CLAMP,
-    });
-    this.closeButtonOpacity = multiply(
-      navigationProgress,
-      buttonOpacity,
-      updatedCloseButtonOpacity,
-    );
-    this.actionLinksOpacity = multiply(
-      navigationProgress,
-      buttonOpacity,
-      updatedActionLinksOpacity,
-    );
-  }
-
-  get frame(): Dimensions {
-    const { width, safeAreaHeight } = this.props.dimensions;
-    return { width, height: safeAreaHeight };
-  }
-
-  get contentViewContainerStyle(): AnimatedViewStyle {
-    const { height, width } = this.props.contentDimensions;
-    const { height: frameHeight, width: frameWidth } = this.frame;
-    const top = (frameHeight - height) / 2 + this.props.dimensions.topInset;
-    const left = (frameWidth - width) / 2;
-    const { verticalBounds } = this.props.route.params;
-    return {
-      height,
-      width,
-      marginTop: top - verticalBounds.y,
-      marginLeft: left,
-      opacity: this.imageContainerOpacity,
-      transform: [
-        { translateX: this.x },
-        { translateY: this.y },
-        { scale: this.scale },
-      ],
-    };
-  }
-
   get contentContainerStyle(): ViewStyle {
     const { verticalBounds } = this.props.route.params;
     const fullScreenHeight = this.props.dimensions.height;
@@ -249,13 +127,6 @@
     const statusBar = this.props.isActive ? (
       <ConnectedStatusBar hidden />
     ) : null;
-    const backdropStyle = { opacity: this.backdropOpacity };
-    const closeButtonStyle = {
-      opacity: this.closeButtonOpacity,
-    };
-    const mediaIconsButtonStyle = {
-      opacity: this.actionLinksOpacity,
-    };
 
     let saveButton;
     if (saveContentCallback) {
@@ -289,7 +160,10 @@
     if (saveContentCallback || copyContentCallback) {
       mediaActionButtons = (
         <Animated.View
-          style={[styles.mediaIconsContainer, mediaIconsButtonStyle]}
+          style={[
+            styles.mediaIconsContainer,
+            this.props.animatedMediaIconsButtonStyle,
+          ]}
         >
           <View
             style={styles.mediaIconsRow}
@@ -306,16 +180,21 @@
     const view = (
       <Animated.View style={styles.container}>
         {statusBar}
-        <Animated.View style={[styles.backdrop, backdropStyle]} />
+        <Animated.View
+          style={[styles.backdrop, this.props.animatedBackdropStyle]}
+        />
         <View style={this.contentContainerStyle}>
-          <Animated.View style={this.contentViewContainerStyle}>
+          <Animated.View style={this.props.contentViewContainerStyle}>
             {children}
           </Animated.View>
         </View>
         <SafeAreaView style={styles.buttonsOverlay}>
           <View style={styles.fill}>
             <Animated.View
-              style={[styles.closeButtonContainer, closeButtonStyle]}
+              style={[
+                styles.closeButtonContainer,
+                this.props.animatedCloseButtonStyle,
+              ]}
             >
               <TouchableOpacity
                 onPress={this.props.close}
@@ -877,8 +756,6 @@
       },
     );
 
-    // TODO: use it later
-    // eslint-disable-next-line no-unused-vars
     const curBackdropOpacity = useDerivedValue(() => {
       if (pinchActive.value || roundedCurScale.value > 1) {
         return backdropReset.value;
@@ -947,6 +824,97 @@
       singleTapUpdate,
     ]);
 
+    invariant(overlayContext, 'FullScreenViewModal should have OverlayContext');
+    const navigationProgress = overlayContext.positionV2;
+    invariant(
+      navigationProgress,
+      'position should be defined in FullScreenViewModal',
+    );
+
+    const { contentDimensions } = props;
+    const { verticalBounds, initialCoordinates } = props.route.params;
+
+    const contentViewContainerStyle = useAnimatedStyle(() => {
+      const { height, width } = contentDimensions;
+      const {
+        safeAreaHeight: dimFrameHeight,
+        width: dimFrameWidth,
+        topInset,
+      } = dimensions;
+      const top = (dimFrameHeight - height) / 2 + topInset;
+      const left = (dimFrameWidth - width) / 2;
+
+      const initialScale = initialCoordinates.width / imageWidth.value;
+      const initialTranslateX =
+        initialCoordinates.x +
+        initialCoordinates.width / 2 -
+        (left + imageWidth.value / 2);
+      const initialTranslateY =
+        initialCoordinates.y +
+        initialCoordinates.height / 2 -
+        (top + imageHeight.value / 2);
+
+      const reverseNavigationProgress = 1 - navigationProgress.value;
+      const scale =
+        reverseNavigationProgress * initialScale +
+        navigationProgress.value * curScale.value;
+      const x =
+        reverseNavigationProgress * initialTranslateX +
+        navigationProgress.value * curX.value;
+      const y =
+        reverseNavigationProgress * initialTranslateY +
+        navigationProgress.value * curY.value;
+
+      const imageContainerOpacity = interpolate(
+        navigationProgress.value,
+        [0, 0.1],
+        [0, 1],
+        Extrapolate.CLAMP,
+      );
+
+      return {
+        height,
+        width,
+        marginTop: top - verticalBounds.y,
+        marginLeft: left,
+        opacity: imageContainerOpacity,
+        transform: [{ translateX: x }, { translateY: y }, { scale: scale }],
+      };
+    }, [contentDimensions, verticalBounds, initialCoordinates, dimensions]);
+
+    const animatedBackdropStyle = useAnimatedStyle(() => ({
+      opacity: navigationProgress.value * curBackdropOpacity.value,
+    }));
+
+    const buttonOpacity = useDerivedValue(() => {
+      return interpolate(
+        curBackdropOpacity.value,
+        [0.95, 1],
+        [0, 1],
+        Extrapolate.CLAMP,
+      );
+    });
+
+    const animatedCloseButtonStyle = useAnimatedStyle(() => {
+      const closeButtonOpacity =
+        navigationProgress.value *
+        buttonOpacity.value *
+        curCloseButtonOpacity.value;
+      return {
+        opacity: closeButtonOpacity,
+      };
+    });
+
+    const animatedMediaIconsButtonStyle = useAnimatedStyle(() => {
+      const actionLinksOpacity =
+        navigationProgress.value *
+        buttonOpacity.value *
+        curActionLinksOpacity.value;
+      return {
+        opacity: actionLinksOpacity,
+      };
+    });
+
     return (
       <FullScreenViewModal
         {...props}
@@ -961,6 +929,10 @@
         onCloseButtonLayout={onCloseButtonLayout}
         onMediaIconsLayout={onMediaIconsLayout}
         close={close}
+        contentViewContainerStyle={contentViewContainerStyle}
+        animatedBackdropStyle={animatedBackdropStyle}
+        animatedCloseButtonStyle={animatedCloseButtonStyle}
+        animatedMediaIconsButtonStyle={animatedMediaIconsButtonStyle}
       />
     );
   });