update reanimated (#7500) (#7502)

* update reanimated

* fix reanimated types

(cherry picked from commit 68939c9)

Co-authored-by: Elias Nahum <[email protected]>

app/components/post_list/post_list.tsx

@@ -4,7 +4,7 @@
 import {FlatList} from '@stream-io/flat-list-mvcp';
 import React, {type ReactElement, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {DeviceEventEmitter, type ListRenderItemInfo, type NativeScrollEvent, type NativeSyntheticEvent, Platform, type StyleProp, StyleSheet, type ViewStyle} from 'react-native';
-import Animated from 'react-native-reanimated';
+import Animated, {type AnimatedStyle} from 'react-native-reanimated';
 
 import {fetchPosts, fetchPostThread} from '@actions/remote/post';
 import CombinedUserActivity from '@components/post_list/combined_user_activity';
@@ -27,7 +27,7 @@ import type PostModel from '@typings/database/models/servers/post';
 type Props = {
     appsEnabled: boolean;
     channelId: string;
-    contentContainerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
     currentTimezone: string | null;
     currentUserId: string;
     currentUsername: string;
@@ -354,6 +354,8 @@ const PostList = ({
                     onScroll={onScroll}
                     onScrollToIndexFailed={onScrollToIndexFailed}
                     onViewableItemsChanged={onViewableItemsChanged}
+
+                    // @ts-expect-error old style ref
                     ref={listRef}
                     removeClippedSubviews={true}
                     renderItem={renderItem}

app/components/profile_picture/image.tsx

@@ -92,6 +92,8 @@ const Image = ({author, forwardRef, iconSize, size, source, url}: Props) => {
         return (
             <AnimatedFastImage
                 key={pictureUrl}
+
+                // @ts-expect-error TS expects old type ref
                 ref={forwardRef}
                 style={fIStyle}
                 source={imgSource}

app/components/progressive_image/index.tsx

@@ -120,6 +120,8 @@ const ProgressiveImage = ({
         if (showHighResImage && imageUri) {
             image = (
                 <AnimatedFastImage
+
+                    // @ts-expect-error old style ref
                     ref={forwardRef}
                     nativeID={`image-${id}`}
                     resizeMode={resizeMode}
@@ -138,6 +140,8 @@ const ProgressiveImage = ({
     } else if (imageUri) {
         image = (
             <AnimatedFastImage
+
+                // @ts-expect-error old style ref
                 ref={forwardRef}
                 nativeID={`image-${id}`}
                 resizeMode={resizeMode}

app/components/progressive_image/thumbnail.tsx

@@ -25,6 +25,8 @@ const Thumbnail = ({onError, opacity, style, source, tintColor}: ThumbnailProps)
                 onError={onError}
                 resizeMode='cover'
                 source={source}
+
+                // @ts-expect-error style is supported but TS complains
                 style={style}
                 testID='progressive_image.miniPreview'
             />

app/context/gallery/index.tsx

@@ -1,14 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useEffect, useLayoutEffect} from 'react';
-import Animated, {makeMutable, runOnUI} from 'react-native-reanimated';
+import {useEffect, useLayoutEffect} from 'react';
+import Animated, {makeMutable, runOnUI, type AnimatedRef} from 'react-native-reanimated';
 
 import type {GalleryManagerSharedValues} from '@typings/screens/gallery';
 
 export interface GalleryManagerItem {
     index: number;
-    ref: React.RefObject<unknown>;
+    ref: AnimatedRef<any>;
 }
 
 export interface GalleryManagerItems {
@@ -79,7 +79,7 @@ class Gallery {
         })();
     }
 
-    public registerItem(index: number, ref: React.RefObject<unknown>) {
+    public registerItem(index: number, ref: AnimatedRef<any>) {
         if (this.items.has(index)) {
             return;
         }

app/hooks/header.ts

@@ -95,7 +95,7 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
                 return;
             }
 
-            if (ctx.dragging || autoScroll.value || snapping.value) {
+            if (ctx?.dragging || autoScroll.value || snapping.value) {
                 scrollValue.value = e.contentOffset.y;
             } else {
                 // here we want to ensure that the scroll position
@@ -105,25 +105,29 @@ export const useCollapsibleHeader = <T>(isLargeTitle: boolean, onSnap?: (offset:
             }
         },
         onEndDrag: (e, ctx) => {
-            if (ctx.start !== undefined) {
+            if (ctx?.start !== undefined) {
                 const dir = e.contentOffset.y < ctx.start ? 'down' : 'up';
                 const offset = Math.abs(e.contentOffset.y);
                 snapIfNeeded(dir, offset);
             }
         },
         onMomentumBegin: (e, ctx) => {
-            ctx.momentum = e.contentOffset.y < (ctx.start || 0) ? 'down' : 'up';
+            if (ctx) {
+                ctx.momentum = e.contentOffset.y < (ctx.start || 0) ? 'down' : 'up';
+            }
         },
         onMomentumEnd: (e, ctx) => {
-            ctx.start = undefined;
-            ctx.dragging = false;
-            if (ctx.momentum === 'down') {
-                const offset = Math.abs(e.contentOffset.y);
-
-                if (onSnap && offset < largeHeight) {
-                    runOnJS(onSnap)(0);
+            if (ctx) {
+                ctx.start = undefined;
+                ctx.dragging = false;
+                if (ctx.momentum === 'down') {
+                    const offset = Math.abs(e.contentOffset.y);
+
+                    if (onSnap && offset < largeHeight) {
+                        runOnJS(onSnap)(0);
+                    }
+                    ctx.momentum = undefined;
                 }
-                ctx.momentum = undefined;
             }
         },
     }, [insets, defaultHeight, largeHeight, animatedRef]);

app/screens/channel/channel_post_list/channel_post_list.tsx

@@ -19,10 +19,11 @@ import EphemeralStore from '@store/ephemeral_store';
 import Intro from './intro';
 
 import type PostModel from '@typings/database/models/servers/post';
+import type {AnimatedStyle} from 'react-native-reanimated';
 
 type Props = {
     channelId: string;
-    contentContainerStyle?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<AnimatedStyle<ViewStyle>>;
     isCRTEnabled: boolean;
     lastViewedAt: number;
     nativeID: string;

app/screens/gallery/gallery.tsx

@@ -4,7 +4,7 @@
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState} from 'react';
 import {BackHandler} from 'react-native';
 import FastImage, {type ImageStyle} from 'react-native-fast-image';
-import Animated, {runOnJS, runOnUI, useAnimatedReaction} from 'react-native-reanimated';
+import Animated, {runOnJS, runOnUI, useAnimatedReaction, type AnimatedStyle} from 'react-native-reanimated';
 
 import {useGallery} from '@context/gallery';
 import {freezeOtherScreens, measureItem} from '@utils/gallery';
@@ -148,7 +148,7 @@ const Gallery = forwardRef<GalleryRef, GalleryProps>(({
             return (
                 <AnimatedImage
                     source={{uri: item.posterUri}}
-                    style={info.itemStyles as ImageStyle}
+                    style={info.itemStyles as AnimatedStyle<ImageStyle>}
                 />
             );
         }

app/screens/gallery/header/index.tsx

@@ -4,7 +4,7 @@
 import React, {useMemo} from 'react';
 import {type StyleProp, StyleSheet, useWindowDimensions, View, type ViewStyle} from 'react-native';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
+import Animated, {type AnimatedStyle} from 'react-native-reanimated';
 import {SafeAreaView, type Edge, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import CompassIcon from '@components/compass_icon';
@@ -16,7 +16,7 @@ import {typography} from '@utils/typography';
 type Props = {
     index: number;
     onClose: () => void;
-    style: StyleProp<ViewStyle>;
+    style: StyleProp<AnimatedStyle<ViewStyle>>;
     total: number;
 }
 

app/screens/gallery/video_renderer/index.tsx

@@ -170,6 +170,8 @@ const VideoRenderer = ({height, index, initialIndex, item, isPageActive, onShoul
     return (
         <>
             <AnimatedVideo
+
+                // @ts-expect-error old style ref
                 ref={videoRef}
                 source={source}
                 paused={paused}

app/screens/home/recent_mentions/recent_mentions.tsx

@@ -182,6 +182,8 @@ const RecentMentionsScreen = ({appsEnabled, customEmojiNames, mentions, currentT
                         <RoundedHeaderContext/>
                     </Animated.View>
                     <AnimatedFlatList
+
+                        // @ts-expect-error old style ref
                         ref={scrollRef}
                         contentContainerStyle={paddingTop}
                         ListEmptyComponent={renderEmptyList()}

app/screens/home/saved_messages/saved_messages.tsx

@@ -184,6 +184,8 @@ function SavedMessages({appsEnabled, posts, currentTimezone, customEmojiNames, i
                         <RoundedHeaderContext/>
                     </Animated.View>
                     <AnimatedFlatList
+
+                        // @ts-expect-error old style ref
                         ref={scrollRef}
                         contentContainerStyle={paddingTop}
                         ListEmptyComponent={emptyList}

app/screens/home/search/search.tsx

@@ -6,7 +6,7 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {FlatList, type LayoutChangeEvent, Platform, StyleSheet, type ViewStyle, KeyboardAvoidingView} from 'react-native';
 import HWKeyboardEvent from 'react-native-hw-keyboard-event';
-import Animated, {useAnimatedStyle, useDerivedValue, withTiming} from 'react-native-reanimated';
+import Animated, {useAnimatedStyle, useDerivedValue, withTiming, type AnimatedStyle} from 'react-native-reanimated';
 import {type Edge, SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
 
 import {getPosts} from '@actions/local/post';
@@ -233,7 +233,7 @@ const SearchScreen = ({teamId, teams}: Props) => {
         handleSearch(newTeamId, lastSearchedValue);
     }, [lastSearchedValue, handleSearch]);
 
-    const initialContainerStyle: ViewStyle = useMemo(() => {
+    const initialContainerStyle: AnimatedStyle<ViewStyle> = useMemo(() => {
         return {
             paddingTop: scrollPaddingTop,
             flexGrow: 1,
@@ -396,6 +396,8 @@ const SearchScreen = ({teamId, teams}: Props) => {
                             removeClippedSubviews={false}
                             scrollToOverflowEnabled={true}
                             overScrollMode='always'
+
+                            // @ts-expect-error old style ref
                             ref={scrollRef}
                             renderItem={renderInitialOrLoadingItem}
                         />

app/screens/user_profile/title/avatar.tsx

@@ -42,6 +42,8 @@ const UserProfileAvatar = ({enablePostIconOverride, forwardRef, imageSize, user,
         return (
             <View style={styles.avatar}>
                 <AnimatedFastImage
+
+                    // @ts-expect-error TS expects old type ref
                     ref={forwardRef}
                     style={styles.avatar}
                     source={{uri: userIconOverride}}

app/utils/gallery/index.ts

@@ -4,7 +4,7 @@
 import React from 'react';
 import {DeviceEventEmitter, Keyboard, NativeModules, Platform} from 'react-native';
 import {Navigation, type Options, type OptionsLayout} from 'react-native-navigation';
-import {measure} from 'react-native-reanimated';
+import {measure, type AnimatedRef} from 'react-native-reanimated';
 
 import {Events, Screens} from '@constants';
 import {allOrientations, showOverlay} from '@screens/navigation';
@@ -100,7 +100,7 @@ export const getShouldRender = (index: number, activeIndex: number, diffValue =
     return true;
 };
 
-export function measureItem(ref: React.RefObject<any>, sharedValues: GalleryManagerSharedValues) {
+export function measureItem(ref: AnimatedRef<any>, sharedValues: GalleryManagerSharedValues) {
     'worklet';
 
     try {

ios/Podfile.lock

@@ -528,7 +528,7 @@ PODS:
     - React-Core
   - RNReactNativeHapticFeedback (2.0.3):
     - React-Core
-  - RNReanimated (3.3.0):
+  - RNReanimated (3.4.2):
     - DoubleConversion
     - FBLazyVector
     - FBReactNativeSpec
@@ -987,7 +987,7 @@ SPEC CHECKSUMS:
   RNLocalize: 5944c97d2fe8150913a51ddd5eab4e23a82bd80d
   RNPermissions: cf3a9da0e6e6772e66282ca7338e198885ac70e7
   RNReactNativeHapticFeedback: afa5bf2794aecbb2dba2525329253da0d66656df
-  RNReanimated: 9976fbaaeb8a188c36026154c844bf374b3b7eeb
+  RNReanimated: 49cdb63e767bb7e743ff4c12f7d85722c0d008f2
   RNRudderSdk: 70865f8d0746d7e78e27df98c148d1ca0205c551
   RNScreens: d037903436160a4b039d32606668350d2a808806
   RNSentry: 9f0447b3ce13806f544903748de423259ead8552

package.json

@@ -78,7 +78,7 @@
     "react-native-navigation": "7.33.4",
     "react-native-notifications": "4.3.5",
     "react-native-permissions": "3.8.0",
-    "react-native-reanimated": "3.3.0",
+    "react-native-reanimated": "3.4.2",
     "react-native-safe-area-context": "4.5.3",
     "react-native-screens": "3.21.0",
     "react-native-section-list-get-item-layout": "2.2.3",

patches/react-native-reanimated+3.3.0.patch → patches/react-native-reanimated+3.4.2.patch

@@ -1,8 +1,25 @@
+diff --git a/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts b/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
+index 67c921b..cbb6f83 100644
+--- a/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
++++ b/node_modules/react-native-reanimated/lib/typescript/reanimated2/hook/utils.d.ts
+@@ -9,7 +9,11 @@ interface Handlers<T, TContext extends Context> {
+     [key: string]: Handler<T, TContext> | undefined;
+ }
+ type useEventType = <T extends object>(handler: (e: T) => void, eventNames?: string[], rebuild?: boolean) => (e: NativeSyntheticEvent<T>) => void;
+-export declare const useEvent: useEventType;
++export declare function useEvent<T, K>(
++    handler: T,
++    events: string[],
++    rebuild: boolean,
++): K;
+ type useHandlerType = <T, TContext extends Context = Record<string, never>>(handlers: Handlers<T, TContext>, deps?: DependencyList) => {
+     context: TContext;
+     doDependenciesDiffer: boolean;
 diff --git a/node_modules/react-native-reanimated/src/reanimated2/mutables.ts b/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
-index 90de1f1..ae59355 100644
+index 6c4213d..e3cc49c 100644
 --- a/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
 +++ b/node_modules/react-native-reanimated/src/reanimated2/mutables.ts
-@@ -95,25 +95,25 @@ export function makeMutable<T>(
+@@ -94,25 +94,25 @@ export function makeMutable<T>(
        }
        return value;
      },