perf: remove useAnimatedReaction in favor of inline decision tree

Author: isekovanic

package/src/contexts/overlayContext/MessageOverlayHostLayer.tsx

@@ -11,7 +11,6 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, {
   clamp,
   runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -65,9 +64,6 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
   const topH = useSharedValue<Rect>(undefined);
   const bottomH = useSharedValue<Rect>(undefined);
   const closeCorrectionY = useSharedValue(0);
-  const topVisualY = useSharedValue(0);
-  const messageVisualY = useSharedValue(0);
-  const bottomVisualY = useSharedValue(0);
 
   const topInset = insets.top;
   // Due to edge-to-edge in combination with various libraries, Android sometimes reports
@@ -99,9 +95,6 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           topH.value = undefined;
           bottomH.value = undefined;
           closeCorrectionY.value = 0;
-          topVisualY.value = 0;
-          messageVisualY.value = 0;
-          bottomVisualY.value = 0;
         },
         setBottomH: (rect) => {
           bottomH.value = rect;
@@ -113,7 +106,7 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
           topH.value = rect;
         },
       }),
-    [bottomH, bottomVisualY, closeCorrectionY, messageH, messageVisualY, topH, topVisualY],
+    [bottomH, closeCorrectionY, messageH, topH],
   );
 
   useEffect(() => {
@@ -163,85 +156,27 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
     return solvedBottomTop - bottomH.value.y;
   });
 
-  useAnimatedReaction(
-    () => {
-      if (!topH.value) return undefined;
-      return isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-    },
-    (next, previous) => {
-      if (next === undefined) {
-        topVisualY.value = 0;
-        return;
-      }
-
-      if (previous === undefined) {
-        topVisualY.value = next;
-        return;
-      }
-
-      topVisualY.value = withSpring(next, { duration: DURATION });
-    },
-    [isActive, closing],
-  );
-
-  useAnimatedReaction(
-    () => {
-      if (!messageH.value) return undefined;
-      return isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
-    },
-    (next, previous) => {
-      if (next === undefined) {
-        messageVisualY.value = 0;
-        return;
-      }
-
-      if (previous === undefined) {
-        messageVisualY.value = next;
-        return;
-      }
-
-      messageVisualY.value = withSpring(next, { duration: DURATION });
-    },
-    [isActive, closing],
-  );
-
-  useAnimatedReaction(
-    () => {
-      if (!bottomH.value) return undefined;
-      return isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
-    },
-    (next, previous) => {
-      if (next === undefined) {
-        bottomVisualY.value = 0;
-        return;
-      }
-
-      if (previous === undefined) {
-        bottomVisualY.value = next;
-        return;
-      }
-
-      bottomVisualY.value = withSpring(next, { duration: DURATION });
-    },
-    [isActive, closing],
-  );
-
   const topItemStyle = useAnimatedStyle(() => {
     if (!topH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
     const horizontalPosition = I18nManager.isRTL ? { right: topH.value.x } : { left: topH.value.x };
     return {
       height: topH.value.h,
       opacity: 1,
       position: 'absolute',
       top: topH.value.y,
-      transform: [{ scale: backdrop.value }, { translateY: topVisualY.value }],
+      transform: [
+        { scale: backdrop.value },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
+      ],
       width: topH.value.w,
       ...horizontalPosition,
     };
   });
 
   const bottomItemStyle = useAnimatedStyle(() => {
     if (!bottomH.value) return { opacity: 0, height: 0, width: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : bottomShiftY.value) : 0;
     const horizontalPosition = I18nManager.isRTL
       ? { right: bottomH.value.x }
       : { left: bottomH.value.x };
@@ -250,20 +185,24 @@ export const MessageOverlayHostLayer = ({ BackgroundComponent }: MessageOverlayH
       opacity: 1,
       position: 'absolute',
       top: bottomH.value.y,
-      transform: [{ scale: backdrop.value }, { translateY: bottomVisualY.value }],
+      transform: [
+        { scale: backdrop.value },
+        { translateY: withSpring(translateY, { duration: DURATION }) },
+      ],
       width: bottomH.value.w,
       ...horizontalPosition,
     };
   });
 
   const hostStyle = useAnimatedStyle(() => {
     if (!messageH.value) return { height: 0 };
+    const translateY = isActive ? (closing ? closeCorrectionY.value : messageShiftY.value) : 0;
     return {
       height: messageH.value.h,
       left: messageH.value.x,
       position: 'absolute',
       top: messageH.value.y,
-      transform: [{ translateY: messageVisualY.value }],
+      transform: [{ translateY: withSpring(translateY, { duration: DURATION }) }],
       width: messageH.value.w,
     };
   });