remove deprecated reanimated apis/types

remove deprecated useWorkletCallback

remove deprecated Animated.SharedValue and Animated.AnimateProps

replaced with SharedValue and AnimatedProps

remove deprecated easingfunction

example/src/screens/integrations/map/Weather.tsx

@@ -10,8 +10,8 @@ import { ShowcaseLabel, useShowcaseTheme } from '@gorhom/showcase-template';
 import { MIDDLE_SNAP_POINT } from './LocationListBottomSheet';
 
 interface WeatherProps {
-  animatedPosition: Animated.SharedValue<number>;
-  animatedIndex: Animated.SharedValue<number>;
+  animatedPosition: SharedValue<number>;
+  animatedIndex: SharedValue<number>;
 }
 
 const SPACE = 8;

src/components/bottomSheet/BottomSheet.tsx

@@ -18,9 +18,9 @@ import Animated, {
   Extrapolate,
   runOnUI,
   cancelAnimation,
-  useWorkletCallback,
   WithSpringConfig,
   WithTimingConfig,
+  type SharedValue,
 } from 'react-native-reanimated';
 import { State } from 'react-native-gesture-handler';
 import {
@@ -203,7 +203,7 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
     });
     const animatedContainerOffset = useReactiveSharedValue(
       _providedContainerOffset ?? INITIAL_CONTAINER_OFFSET
-    ) as Animated.SharedValue<Insets>;
+    ) as SharedValue<Insets>;
     const animatedHandleHeight = useReactiveSharedValue(
       _providedHandleHeight ?? INITIAL_HANDLE_HEIGHT
     );
@@ -528,7 +528,7 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
     /**
      * Calculate the next position based on keyboard state.
      */
-    const getNextPosition = useWorkletCallback(
+    const getNextPosition = useCallback(
       function getNextPosition() {
         'worklet';
         const currentIndex = animatedCurrentIndex.value;
@@ -663,7 +663,8 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
     //#endregion
 
     //#region animation
-    const stopAnimation = useWorkletCallback(() => {
+    const stopAnimation = useCallback(() => {
+      'worklet';
       cancelAnimation(animatedPosition);
       isForcedClosing.value = false;
       animatedAnimationSource.value = ANIMATION_SOURCE.NONE;
@@ -674,8 +675,9 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
       animatedAnimationSource,
       animatedAnimationState,
     ]);
-    const animateToPositionCompleted = useWorkletCallback(
+    const animateToPositionCompleted = useCallback(
       function animateToPositionCompleted(isFinished?: boolean) {
+        'worklet';
         isForcedClosing.value = false;
 
         if (!isFinished) {
@@ -695,15 +697,24 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
         animatedAnimationState.value = ANIMATION_STATE.STOPPED;
         animatedNextPosition.value = INITIAL_VALUE;
         animatedNextPositionIndex.value = INITIAL_VALUE;
-      }
+      },
+      [
+        animatedAnimationSource,
+        animatedAnimationState,
+        animatedCurrentIndex,
+        animatedNextPosition,
+        animatedNextPositionIndex,
+        isForcedClosing,
+      ]
     );
-    const animateToPosition: AnimateToPositionType = useWorkletCallback(
+    const animateToPosition: AnimateToPositionType = useCallback(
       function animateToPosition(
         position: number,
         source: ANIMATION_SOURCE,
         velocity: number = 0,
         configs?: WithTimingConfig | WithSpringConfig
       ) {
+        'worklet';
         if (
           position === animatedPosition.value ||
           position === undefined ||
@@ -772,8 +783,9 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
      *
      * @param targetPosition position to be set.
      */
-    const setToPosition = useWorkletCallback(
+    const setToPosition = useCallback(
       function setToPosition(targetPosition: number) {
+        'worklet';
         if (
           targetPosition === animatedPosition.value ||
           targetPosition === undefined ||
@@ -877,11 +889,12 @@ const BottomSheetComponent = forwardRef<BottomSheetMethods, BottomSheetProps>(
         animatedNextPositionIndex,
       ]
     );
-    const handleSnapToPosition = useWorkletCallback(
+    const handleSnapToPosition = useCallback(
       function handleSnapToPosition(
         position: number | string,
         animationConfigs?: WithSpringConfig | WithTimingConfig
       ) {
+        'worklet';
         print({
           component: BottomSheet.name,
           method: handleSnapToPosition.name,

src/components/bottomSheetContainer/types.d.ts

@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
 import type { Insets, StyleProp, ViewStyle } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type { BottomSheetProps } from '../bottomSheet/types';
 
 export interface BottomSheetContainerProps
   extends Partial<
     Pick<BottomSheetProps, 'topInset' | 'bottomInset' | 'detached'>
   > {
-  containerHeight: Animated.SharedValue<number>;
-  containerOffset: Animated.SharedValue<Insets>;
+  containerHeight: SharedValue<number>;
+  containerOffset: SharedValue<Insets>;
   shouldCalculateHeight?: boolean;
   style?: StyleProp<ViewStyle>;
   children: ReactNode;

src/components/bottomSheetDebugView/BottomSheetDebugView.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { View } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import ReText from './ReText';
 import { styles } from './styles';
 
 interface BottomSheetDebugViewProps {
-  values: Record<string, Animated.SharedValue<number | boolean> | number>;
+  values: Record<string, SharedValue<number | boolean> | number>;
 }
 
 const BottomSheetDebugView = ({ values }: BottomSheetDebugViewProps) => {

src/components/bottomSheetDebugView/ReText.tsx

@@ -3,12 +3,14 @@ import { TextProps as RNTextProps, TextInput } from 'react-native';
 import Animated, {
   useAnimatedProps,
   useDerivedValue,
+  type SharedValue,
+  type AnimatedProps,
 } from 'react-native-reanimated';
 
 interface TextProps {
   text: string;
-  value: Animated.SharedValue<number | boolean> | number;
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  value: SharedValue<number | boolean> | number;
+  style?: AnimatedProps<RNTextProps>['style'];
 }
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

src/components/bottomSheetDebugView/ReText.webx.tsx

@@ -3,12 +3,14 @@ import { TextProps as RNTextProps, TextInput } from 'react-native';
 import Animated, {
   useAnimatedReaction,
   useDerivedValue,
+  type SharedValue,
+  type AnimatedProps,
 } from 'react-native-reanimated';
 
 interface TextProps {
   text: string;
-  value: Animated.SharedValue<number | boolean> | number;
-  style?: Animated.AnimateProps<RNTextProps>['style'];
+  value: SharedValue<number | boolean> | number;
+  style?: AnimatedProps<RNTextProps>['style'];
 }
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);

src/components/bottomSheetFooter/types.d.ts

@@ -1,14 +1,14 @@
 import type { ReactNode } from 'react';
 import { ViewStyle } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export interface BottomSheetFooterProps {
   /**
    * Calculated footer animated position.
    *
-   * @type Animated.SharedValue<number>
+   * @type SharedValue<number>
    */
-  animatedFooterPosition: Animated.SharedValue<number>;
+  animatedFooterPosition: SharedValue<number>;
 }
 
 export interface BottomSheetDefaultFooterProps extends BottomSheetFooterProps {

src/components/bottomSheetHandleContainer/types.d.ts

@@ -1,5 +1,5 @@
 import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type { BottomSheetProps } from '../bottomSheet';
 import type { BottomSheetHandleProps } from '../bottomSheetHandle';
 import type { useInteractivePanGestureHandlerConfigs } from '../../hooks/useGestureHandler';
@@ -21,5 +21,5 @@ export interface BottomSheetHandleContainerProps
       | 'keyboardBehavior'
     >,
     BottomSheetHandleProps {
-  handleHeight: Animated.SharedValue<number>;
+  handleHeight: SharedValue<number>;
 }

src/components/bottomSheetScrollable/types.d.ts

@@ -16,7 +16,7 @@ import type {
   NodeHandle,
   ScrollResponderMixin,
 } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { AnimatedProps } from 'react-native-reanimated';
 import type { ScrollEventsHandlersHookType } from '../../types';
 import type { FlashListProps } from '@shopify/flash-list';
 
@@ -62,7 +62,7 @@ export interface BottomSheetScrollableProps {
   /**
    * The optional lockable scrollable content offset ref, which will remain the same value when scrollable is locked.
    */
-  lockableScrollableContentOffsetY?: Animated.SharedValue<number>;
+  lockableScrollableContentOffsetY?: SharedValue<number>;
 }
 
 export type ScrollableProps<T> =
@@ -73,7 +73,7 @@ export type ScrollableProps<T> =
 
 //#region FlatList
 export type BottomSheetFlatListProps<T> = Omit<
-  Animated.AnimateProps<FlatListProps<T>>,
+  AnimatedProps<FlatListProps<T>>,
   'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
@@ -234,7 +234,7 @@ export interface BottomSheetFlashListMethods {
 
 //#region ScrollView
 export type BottomSheetScrollViewProps = Omit<
-  Animated.AnimateProps<ScrollViewProps>,
+  AnimatedProps<ScrollViewProps>,
   'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
@@ -299,7 +299,7 @@ export interface BottomSheetScrollViewMethods {
 
 //#region SectionList
 type BottomSheetSectionListProps<ItemT, SectionT> = Omit<
-  Animated.AnimateProps<SectionListProps<ItemT, SectionT>>,
+  AnimatedProps<SectionListProps<ItemT, SectionT>>,
   'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {
@@ -342,7 +342,7 @@ export interface BottomSheetSectionListMethods {
 
 //#region
 export type BottomSheetVirtualizedListProps<T> = Omit<
-  Animated.AnimateProps<VirtualizedListProps<T>>,
+  AnimatedProps<VirtualizedListProps<T>>,
   'decelerationRate' | 'scrollEventThrottle'
 > &
   BottomSheetScrollableProps & {

src/constants.ts

@@ -1,5 +1,5 @@
 import { Dimensions, Platform } from 'react-native';
-import Animated, { Easing } from 'react-native-reanimated';
+import { Easing, EasingFunction } from 'react-native-reanimated';
 
 const { height: WINDOW_HEIGHT, width: WINDOW_WIDTH } = Dimensions.get('window');
 const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('screen');
@@ -68,7 +68,7 @@ enum SNAP_POINT_TYPE {
   DYNAMIC,
 }
 
-const ANIMATION_EASING: Animated.EasingFunction = Easing.out(Easing.exp);
+const ANIMATION_EASING: EasingFunction = Easing.out(Easing.exp);
 const ANIMATION_DURATION = 250;
 
 const ANIMATION_CONFIGS_IOS = {

src/contexts/internal.ts

@@ -1,6 +1,6 @@
 import { createContext, RefObject } from 'react';
 import type { State } from 'react-native-gesture-handler';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type {
   AnimateToPositionType,
   BottomSheetGestureProps,
@@ -28,34 +28,34 @@ export interface BottomSheetInternalContextType
       >
     > {
   // animated states
-  animatedAnimationState: Animated.SharedValue<ANIMATION_STATE>;
-  animatedSheetState: Animated.SharedValue<SHEET_STATE>;
-  animatedScrollableState: Animated.SharedValue<SCROLLABLE_STATE>;
-  animatedKeyboardState: Animated.SharedValue<KEYBOARD_STATE>;
-  animatedContentGestureState: Animated.SharedValue<State>;
-  animatedHandleGestureState: Animated.SharedValue<State>;
+  animatedAnimationState: SharedValue<ANIMATION_STATE>;
+  animatedSheetState: SharedValue<SHEET_STATE>;
+  animatedScrollableState: SharedValue<SCROLLABLE_STATE>;
+  animatedKeyboardState: SharedValue<KEYBOARD_STATE>;
+  animatedContentGestureState: SharedValue<State>;
+  animatedHandleGestureState: SharedValue<State>;
 
   // animated values
-  animatedSnapPoints: Animated.SharedValue<number[]>;
-  animatedPosition: Animated.SharedValue<number>;
-  animatedIndex: Animated.SharedValue<number>;
-  animatedContainerHeight: Animated.SharedValue<number>;
-  animatedContentHeight: Animated.SharedValue<number>;
-  animatedHighestSnapPoint: Animated.SharedValue<number>;
-  animatedClosedPosition: Animated.SharedValue<number>;
-  animatedFooterHeight: Animated.SharedValue<number>;
-  animatedHandleHeight: Animated.SharedValue<number>;
-  animatedKeyboardHeight: Animated.SharedValue<number>;
-  animatedKeyboardHeightInContainer: Animated.SharedValue<number>;
-  animatedScrollableType: Animated.SharedValue<SCROLLABLE_TYPE>;
-  animatedScrollableContentOffsetY: Animated.SharedValue<number>;
-  animatedScrollableOverrideState: Animated.SharedValue<SCROLLABLE_STATE>;
-  isScrollableLocked: Animated.SharedValue<boolean>;
-  isScrollableRefreshable: Animated.SharedValue<boolean>;
-  isScrollEnded: Animated.SharedValue<boolean>;
-  isContentHeightFixed: Animated.SharedValue<boolean>;
-  isInTemporaryPosition: Animated.SharedValue<boolean>;
-  shouldHandleKeyboardEvents: Animated.SharedValue<boolean>;
+  animatedSnapPoints: SharedValue<number[]>;
+  animatedPosition: SharedValue<number>;
+  animatedIndex: SharedValue<number>;
+  animatedContainerHeight: SharedValue<number>;
+  animatedContentHeight: SharedValue<number>;
+  animatedHighestSnapPoint: SharedValue<number>;
+  animatedClosedPosition: SharedValue<number>;
+  animatedFooterHeight: SharedValue<number>;
+  animatedHandleHeight: SharedValue<number>;
+  animatedKeyboardHeight: SharedValue<number>;
+  animatedKeyboardHeightInContainer: SharedValue<number>;
+  animatedScrollableType: SharedValue<SCROLLABLE_TYPE>;
+  animatedScrollableContentOffsetY: SharedValue<number>;
+  animatedScrollableOverrideState: SharedValue<SCROLLABLE_STATE>;
+  isScrollableLocked: SharedValue<boolean>;
+  isScrollableRefreshable: SharedValue<boolean>;
+  isScrollEnded: SharedValue<boolean>;
+  isContentHeightFixed: SharedValue<boolean>;
+  isInTemporaryPosition: SharedValue<boolean>;
+  shouldHandleKeyboardEvents: SharedValue<boolean>;
 
   // methods
   stopAnimation: () => void;

src/contexts/modal/internal.ts

@@ -1,12 +1,12 @@
 import { createContext, Ref } from 'react';
 import type { Insets } from 'react-native';
-import type Animated from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 import type { BottomSheetModalStackBehavior } from '../../components/bottomSheetModal';
 import type { BottomSheetMethods } from '../../types';
 
 export interface BottomSheetModalInternalContextType {
-  containerHeight: Animated.SharedValue<number>;
-  containerOffset: Animated.SharedValue<Required<Insets>>;
+  containerHeight: SharedValue<number>;
+  containerOffset: SharedValue<Required<Insets>>;
   mountSheet: (
     key: string,
     ref: Ref<BottomSheetMethods>,