Bump Reanimated from 3.19.1 to 4.3.1

src/components/ContextMenu/index.tsx

@@ -89,14 +89,12 @@ const SPRING_IN: WithSpringConfig = {
   mass: 0.75,
   damping: 300,
   stiffness: 1200,
-  restDisplacementThreshold: 0.01,
 }
 
 const SPRING_OUT: WithSpringConfig = {
   mass: IS_IOS ? 1.25 : 0.75,
   damping: 150,
   stiffness: 1000,
-  restDisplacementThreshold: 0.01,
 }
 
 /**

src/components/DraggableList/index.tsx

@@ -237,8 +237,8 @@ function SortableItem<T>({
   itemKey: string
   itemCount: number
   itemHeight: number
-  state: Animated.SharedValue<DragState>
-  dragY: Animated.SharedValue<number>
+  state: SharedValue<DragState>
+  dragY: SharedValue<number>
   scrollCompensation: SharedValue<number>
   isGestureActive: SharedValue<boolean>
   measureDone: SharedValue<boolean>

src/components/Layout/index.tsx

@@ -1,4 +1,4 @@
-import {forwardRef, memo, useContext, useMemo} from 'react'
+import {memo, useContext, useMemo} from 'react'
 import {
   type StyleProp,
   View,
@@ -6,6 +6,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import Animated, {
+  type AnimatedRef,
   type AnimatedScrollViewProps,
   useAnimatedStyle,
 } from 'react-native-reanimated'
@@ -73,67 +74,64 @@ export type ContentProps = AnimatedScrollViewProps & {
   style?: StyleProp<ViewStyle>
   contentContainerStyle?: StyleProp<ViewStyle>
   ignoreTabletLayoutOffset?: boolean
+  ref?: AnimatedRef<Animated.ScrollView>
 }
 
 /**
  * Default scroll view for simple pages
  */
-export const Content = memo(
-  forwardRef<Animated.ScrollView, ContentProps>(function Content(
-    {
-      children,
-      style,
-      contentContainerStyle,
-      ignoreTabletLayoutOffset,
-      ...props
-    },
-    ref,
-  ) {
-    const t = useTheme()
-    const {footerHeight} = useShellLayout()
-    const {isWithinSplitView} = useIsWithinSplitView()
+export const Content = memo(function Content({
+  children,
+  style,
+  contentContainerStyle,
+  ignoreTabletLayoutOffset,
+  ref,
+  ...props
+}: ContentProps) {
+  const t = useTheme()
+  const {footerHeight} = useShellLayout()
+  const {isWithinSplitView} = useIsWithinSplitView()
 
-    // note - if we ever make the footer transparent in any way,
-    // we'll need to change this to use contentInsets/scrollIndicatorInsets
-    // on iOS and contentContainerStyle padding on Android -sfn
-    const animatedStyle = useAnimatedStyle(() => {
-      return {
-        marginBottom: footerHeight.get(),
-      }
-    })
+  // note - if we ever make the footer transparent in any way,
+  // we'll need to change this to use contentInsets/scrollIndicatorInsets
+  // on iOS and contentContainerStyle padding on Android -sfn
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      marginBottom: footerHeight.get(),
+    }
+  })
 
-    return (
-      <Animated.ScrollView
-        ref={ref}
-        id="content"
-        automaticallyAdjustsScrollIndicatorInsets={false}
-        indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
-        style={[
-          a.w_full,
-          animatedStyle,
-          isWithinSplitView &&
-            web({
-              flex: 1,
-              overflowY: 'scroll',
-              scrollbarWidth: 'thin',
-              scrollbarColor: `${t.palette.contrast_100} transparent`,
-            }),
-          style,
-        ]}
-        contentContainerStyle={[contentContainerStyle]}
-        {...props}>
-        {IS_WEB ? (
-          <Center ignoreTabletLayoutOffset={ignoreTabletLayoutOffset}>
-            {/* @ts-expect-error web only -esb */}
-            {children}
-          </Center>
-        ) : (
-          children
-        )}
-      </Animated.ScrollView>
-    )
-  }),
-)
+  return (
+    <Animated.ScrollView
+      ref={ref}
+      id="content"
+      automaticallyAdjustsScrollIndicatorInsets={false}
+      indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
+      style={[
+        a.w_full,
+        animatedStyle,
+        isWithinSplitView &&
+          web({
+            flex: 1,
+            overflowY: 'scroll',
+            scrollbarWidth: 'thin',
+            scrollbarColor: `${t.palette.contrast_100} transparent`,
+          }),
+        style,
+      ]}
+      contentContainerStyle={[contentContainerStyle]}
+      {...props}>
+      {IS_WEB ? (
+        <Center ignoreTabletLayoutOffset={ignoreTabletLayoutOffset}>
+          {/* @ts-expect-error web only -esb */}
+          {children}
+        </Center>
+      ) : (
+        children
+      )}
+    </Animated.ScrollView>
+  )
+})
 
 /**
  * Utility component to center content within the screen

src/components/Lightbox/pager/ImagePager.tsx

@@ -60,13 +60,11 @@ const SLOW_SPRING: WithSpringConfig = {
   mass: IS_IOS ? 1.25 : 0.75,
   damping: 300,
   stiffness: 800,
-  restDisplacementThreshold: 0.001,
 }
 const FAST_SPRING: WithSpringConfig = {
   mass: IS_IOS ? 1.25 : 0.75,
   damping: 150,
   stiffness: 900,
-  restDisplacementThreshold: 0.001,
 }
 
 function canAnimate(lightbox: Lightbox): boolean {

src/components/Lightbox/types.ts

@@ -6,7 +6,6 @@
  *
  */
 
-import {type Component} from 'react'
 import {type TransformsStyle} from 'react-native'
 import {
   type AnimatedRef,
@@ -29,7 +28,7 @@ export type ImageSource = {
   thumbUri: string
   thumbDimensions: Dimensions | null
   thumbRect: MeasuredDimensions | null
-  thumbRef?: AnimatedRef<Component> | null
+  thumbRef?: AnimatedRef | null
   thumbBorderRadius?: number
   alt?: string
   type: 'image' | 'circle-avi' | 'rect-avi'

src/components/ProgressGuide/Toast.tsx

@@ -119,7 +119,8 @@ export const ProgressGuideToast = forwardRef<
       left = right = (winDim.width - 380) / 2
     }
     return {
-      position: IS_WEB ? 'fixed' : 'absolute',
+      // position: fixed is web only
+      position: (IS_WEB ? 'fixed' : 'absolute') as 'absolute',
       top: 0,
       left,
       right,
@@ -134,12 +135,7 @@ export const ProgressGuideToast = forwardRef<
   return (
     isOpen && (
       <Portal>
-        <Animated.View
-          style={[
-            // @ts-ignore position: fixed is web only
-            containerStyle,
-            animatedStyle,
-          ]}>
+        <Animated.View style={[containerStyle, animatedStyle]}>
           <Pressable
             style={[
               t.atoms.bg,

src/components/dms/MessageItem.tsx

@@ -8,6 +8,7 @@ import {
   type ViewStyle,
 } from 'react-native'
 import Animated, {
+  type AnimatedStyle,
   FadeIn,
   FadeOut,
   interpolateColor,
@@ -643,7 +644,7 @@ function BlockedPlaceholder({
   style,
 }: {
   profile: Shadow<ChatBskyActorDefs.ProfileViewBasic>
-  style?: StyleProp<ViewStyle>
+  style?: AnimatedStyle<ViewStyle>
 }) {
   const {t: l} = useLingui()
   const t = useTheme()

src/view/com/composer/Composer.tsx

@@ -25,6 +25,7 @@ import {KeyboardAvoidingView} from 'react-native-keyboard-controller'
 import ProgressCircle from 'react-native-progress/Circle'
 import Animated, {
   type AnimatedRef,
+  type AnimatedStyle,
   Easing,
   FadeIn,
   FadeOut,
@@ -1794,7 +1795,7 @@ function ComposerTopBar({
   isEditingDraft: boolean
   canSaveDraft: boolean
   textLength: number
-  topBarAnimatedStyle: StyleProp<ViewStyle>
+  topBarAnimatedStyle: AnimatedStyle<ViewStyle>
   children?: React.ReactNode
 }) {
   const t = useTheme()
@@ -2029,7 +2030,7 @@ function ComposerPills({
   thread: ThreadDraft
   post: PostDraft
   dispatch: (action: ComposerAction) => void
-  bottomBarAnimatedStyle: StyleProp<ViewStyle>
+  bottomBarAnimatedStyle: AnimatedStyle<ViewStyle>
 }) {
   const t = useTheme()
   const media = post.embed.media