Merge pull request Expensify#52825 from software-mansion-labs/chore/b…

…ump-reanimated

[NoQA] [Chore] Bump reanimated & update API to comply with react-compiler

ios/Podfile.lock

@@ -2503,7 +2503,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated (3.16.1):
+  - RNReanimated (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2523,10 +2523,10 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated (= 3.16.1)
-    - RNReanimated/worklets (= 3.16.1)
+    - RNReanimated/reanimated (= 3.16.3)
+    - RNReanimated/worklets (= 3.16.3)
     - Yoga
-  - RNReanimated/reanimated (3.16.1):
+  - RNReanimated/reanimated (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2546,9 +2546,9 @@ PODS:
     - ReactCodegen
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
-    - RNReanimated/reanimated/apple (= 3.16.1)
+    - RNReanimated/reanimated/apple (= 3.16.3)
     - Yoga
-  - RNReanimated/reanimated/apple (3.16.1):
+  - RNReanimated/reanimated/apple (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2569,7 +2569,7 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - RNReanimated/worklets (3.16.1):
+  - RNReanimated/worklets (3.16.3):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -3291,7 +3291,7 @@ SPEC CHECKSUMS:
   rnmapbox-maps: 460d6ff97ae49c7d5708c3212c6521697c36a0c4
   RNPermissions: 0b1429b55af59d1d08b75a8be2459f65a8ac3f28
   RNReactNativeHapticFeedback: 73756a3477a5a622fa16862a3ab0d0fc5e5edff5
-  RNReanimated: 2d728bad3a69119be89c3431ee0ccda026ecffdc
+  RNReanimated: 03ba2447d5a7789e2843df2ee05108d93b6441d6
   RNScreens: de6e57426ba0e6cbc3fb5b4f496e7f08cb2773c2
   RNShare: bd4fe9b95d1ee89a200778cc0753ebe650154bb0
   RNSound: 6c156f925295bdc83e8e422e7d8b38d33bc71852

package.json

@@ -161,7 +161,7 @@
     "react-native-plaid-link-sdk": "11.11.0",
     "react-native-qrcode-svg": "6.3.11",
     "react-native-quick-sqlite": "git+https://github.com/margelo/react-native-nitro-sqlite#99f34ebefa91698945f3ed26622e002bd79489e0",
-    "react-native-reanimated": "3.16.1",
+    "react-native-reanimated": "3.16.3",
     "react-native-release-profiler": "^0.2.1",
     "react-native-render-html": "6.3.1",
     "react-native-safe-area-context": "4.10.9",

src/components/Attachments/AttachmentCarousel/Pager/index.tsx

@@ -70,14 +70,13 @@ function AttachmentCarouselPager(
     const pageScrollHandler = usePageScrollHandler((e) => {
         'worklet';
 
-        // eslint-disable-next-line react-compiler/react-compiler
-        activePage.value = e.position;
-        isPagerScrolling.value = e.offset !== 0;
+        activePage.set(e.position);
+        isPagerScrolling.set(e.offset !== 0);
     }, []);
 
     useEffect(() => {
         setActivePageIndex(initialPage);
-        activePage.value = initialPage;
+        activePage.set(initialPage);
     }, [activePage, initialPage]);
 
     /** The `pagerItems` object that passed down to the context. Later used to detect current page, whether it's a single image gallery etc. */
@@ -106,7 +105,7 @@ function AttachmentCarouselPager(
     );
 
     const animatedProps = useAnimatedProps(() => ({
-        scrollEnabled: isScrollEnabled.value,
+        scrollEnabled: isScrollEnabled.get(),
     }));
 
     /**

src/components/Attachments/AttachmentCarousel/index.tsx

@@ -253,18 +253,18 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
             Gesture.Pan()
                 .enabled(canUseTouchScreen)
                 .onUpdate(({translationX}) => {
-                    if (!isScrollEnabled.value) {
+                    if (!isScrollEnabled.get()) {
                         return;
                     }
 
                     if (translationX !== 0) {
-                        isPagerScrolling.value = true;
+                        isPagerScrolling.set(true);
                     }
 
                     scrollTo(scrollRef, page * cellWidth - translationX, 0, false);
                 })
                 .onEnd(({translationX, velocityX}) => {
-                    if (!isScrollEnabled.value) {
+                    if (!isScrollEnabled.get()) {
                         return;
                     }
 
@@ -281,7 +281,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                         newIndex = Math.min(attachments.length - 1, Math.max(0, page + delta));
                     }
 
-                    isPagerScrolling.value = false;
+                    isPagerScrolling.set(false);
                     scrollTo(scrollRef, newIndex * cellWidth, 0, true);
                 })
                 // eslint-disable-next-line react-compiler/react-compiler

src/components/Attachments/AttachmentCarousel/useCarouselContextEvents.ts

@@ -35,12 +35,11 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction<bo
             scale.current = newScale;
 
             const newIsScrollEnabled = newScale === 1;
-            if (isScrollEnabled.value === newIsScrollEnabled) {
+            if (isScrollEnabled.get() === newIsScrollEnabled) {
                 return;
             }
 
-            // eslint-disable-next-line react-compiler/react-compiler
-            isScrollEnabled.value = newIsScrollEnabled;
+            isScrollEnabled.set(newIsScrollEnabled);
             onRequestToggleArrows(newIsScrollEnabled);
         },
         [isScrollEnabled, onRequestToggleArrows],
@@ -51,12 +50,12 @@ function useCarouselContextEvents(setShouldShowArrows: (show?: SetStateAction<bo
      * It is used to trigger touch events on the pager when the user taps on the MultiGestureCanvas/Lightbox.
      */
     const handleTap = useCallback(() => {
-        if (!isScrollEnabled.value) {
+        if (!isScrollEnabled.get()) {
             return;
         }
 
         onRequestToggleArrows();
-    }, [isScrollEnabled.value, onRequestToggleArrows]);
+    }, [isScrollEnabled, onRequestToggleArrows]);
 
     return {handleTap, handleScaleChange, scale, isScrollEnabled};
 }

src/components/Attachments/AttachmentView/AttachmentViewPdf/BaseAttachmentViewPdf.tsx

@@ -58,7 +58,7 @@ function BaseAttachmentViewPdf({
                 onPressProp(event);
             }
 
-            if (attachmentCarouselPagerContext !== null && isScrollEnabled?.value) {
+            if (attachmentCarouselPagerContext !== null && isScrollEnabled?.get()) {
                 attachmentCarouselPagerContext.onTap();
             }
         },

src/components/Attachments/AttachmentView/AttachmentViewPdf/index.android.tsx

@@ -32,32 +32,32 @@ function AttachmentViewPdf(props: AttachmentViewPdfProps) {
     const Pan = Gesture.Pan()
         .manualActivation(true)
         .onTouchesMove((evt) => {
-            if (offsetX.value !== 0 && offsetY.value !== 0 && isScrollEnabled && scale.value === 1) {
-                const translateX = Math.abs((evt.allTouches.at(0)?.absoluteX ?? 0) - offsetX.value);
-                const translateY = Math.abs((evt.allTouches.at(0)?.absoluteY ?? 0) - offsetY.value);
-                const allowEnablingScroll = !isPanGestureActive.value || isScrollEnabled.value;
+            if (offsetX.get() !== 0 && offsetY.get() !== 0 && isScrollEnabled && scale.get() === 1) {
+                const translateX = Math.abs((evt.allTouches.at(0)?.absoluteX ?? 0) - offsetX.get());
+                const translateY = Math.abs((evt.allTouches.at(0)?.absoluteY ?? 0) - offsetY.get());
+                const allowEnablingScroll = !isPanGestureActive.get() || isScrollEnabled.get();
 
                 // if the value of X is greater than Y and the pdf is not zoomed in,
                 // enable  the pager scroll so that the user
                 // can swipe to the next attachment otherwise disable it.
                 if (translateX > translateY && translateX > SCROLL_THRESHOLD && allowEnablingScroll) {
                     // eslint-disable-next-line react-compiler/react-compiler
-                    isScrollEnabled.value = true;
+                    isScrollEnabled.set(true);
                 } else if (translateY > SCROLL_THRESHOLD) {
-                    isScrollEnabled.value = false;
+                    isScrollEnabled.set(false);
                 }
             }
 
-            isPanGestureActive.value = true;
-            offsetX.value = evt.allTouches.at(0)?.absoluteX ?? 0;
-            offsetY.value = evt.allTouches.at(0)?.absoluteY ?? 0;
+            isPanGestureActive.set(true);
+            offsetX.set(evt.allTouches.at(0)?.absoluteX ?? 0);
+            offsetY.set(evt.allTouches.at(0)?.absoluteY ?? 0);
         })
         .onTouchesUp(() => {
-            isPanGestureActive.value = false;
+            isPanGestureActive.set(false);
             if (!isScrollEnabled) {
                 return;
             }
-            isScrollEnabled.value = scale.value === 1;
+            isScrollEnabled.set(scale.get() === 1);
         });
 
     const Content = useMemo(
@@ -69,7 +69,7 @@ function AttachmentViewPdf(props: AttachmentViewPdfProps) {
                     // The react-native-pdf's onScaleChanged event will sometimes give us scale values of e.g. 0.99... instead of 1,
                     // even though we're not pinching/zooming
                     // Rounding the scale value to 2 decimal place fixes this issue, since pinching will still be possible but very small pinches are ignored.
-                    scale.value = Math.round(newScale * 1e2) / 1e2;
+                    scale.set(Math.round(newScale * 1e2) / 1e2);
                 }}
             />
         ),

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx

@@ -50,24 +50,27 @@ function BaseAutoCompleteSuggestions<TSuggestion>({
     const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length;
 
     const animatedStyles = useAnimatedStyle(() => ({
-        opacity: fadeInOpacity.value,
-        ...StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value),
+        opacity: fadeInOpacity.get(),
+        ...StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.get()),
     }));
 
     useEffect(() => {
         if (measuredHeightOfSuggestionRows === prevRowHeightRef.current) {
-            // eslint-disable-next-line react-compiler/react-compiler
-            fadeInOpacity.value = withTiming(1, {
-                duration: 70,
-                easing: Easing.inOut(Easing.ease),
-            });
-            rowHeight.value = measuredHeightOfSuggestionRows;
+            fadeInOpacity.set(
+                withTiming(1, {
+                    duration: 70,
+                    easing: Easing.inOut(Easing.ease),
+                }),
+            );
+            rowHeight.set(measuredHeightOfSuggestionRows);
         } else {
-            fadeInOpacity.value = 1;
-            rowHeight.value = withTiming(measuredHeightOfSuggestionRows, {
-                duration: 100,
-                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-            });
+            fadeInOpacity.set(1);
+            rowHeight.set(
+                withTiming(measuredHeightOfSuggestionRows, {
+                    duration: 100,
+                    easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+                }),
+            );
         }
 
         prevRowHeightRef.current = measuredHeightOfSuggestionRows;
@@ -103,7 +106,7 @@ function BaseAutoCompleteSuggestions<TSuggestion>({
                     renderItem={renderItem}
                     keyExtractor={keyExtractor}
                     removeClippedSubviews={false}
-                    showsVerticalScrollIndicator={innerHeight > rowHeight.value}
+                    showsVerticalScrollIndicator={innerHeight > rowHeight.get()}
                     extraData={[highlightedSuggestionIndex, renderSuggestionMenuItem]}
                 />
             </ColorSchemeWrapper>