Add react-native-reanimated v4 support

package.json

@@ -7,7 +7,11 @@
   "types": "lib/typescript/index.d.ts",
   "react-native": "src/index.ts",
   "source": "src/index.ts",
-  "files": ["src", "lib", "mock.js"],
+  "files": [
+    "src",
+    "lib",
+    "mock.js"
+  ],
   "keywords": [
     "react-native",
     "ios",
@@ -55,7 +59,7 @@
     "react-native": "0.76.0",
     "react-native-builder-bob": "^0.30.3",
     "react-native-gesture-handler": "~2.20.2",
-    "react-native-reanimated": "~3.16.1",
+    "react-native-reanimated": ">=3.16.1 <5",
     "release-it": "^17.6.0",
     "typescript": "^5.3.0"
   },
@@ -68,16 +72,20 @@
     "react-native-reanimated": ">=3.16.0"
   },
   "peerDependenciesMeta": {
-    "@types/react-native": {
+    "@types/react": {
       "optional": true
     },
-    "@types/react": {
+    "@types/react-native": {
       "optional": true
     }
   },
   "react-native-builder-bob": {
     "source": "src",
     "output": "lib",
-    "targets": ["commonjs", "module", "typescript"]
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
   }
 }

src/components/bottomSheet/BottomSheet.tsx

@@ -18,13 +18,13 @@ import Animated, {
   Extrapolation,
   runOnUI,
   cancelAnimation,
-  useWorkletCallback,
   type WithSpringConfig,
   type WithTimingConfig,
   type SharedValue,
   useReducedMotion,
   ReduceMotion,
 } from 'react-native-reanimated';
+import { useWorkletCallback } from '../../hooks/useWorkletCallback';
 import {
   ANIMATION_SOURCE,
   ANIMATION_STATE,
@@ -86,9 +86,11 @@ import {
 } from './constants';
 import type { AnimateToPositionType, BottomSheetProps } from './types';
 
-Animated.addWhitelistedUIProps({
-  decelerationRate: true,
-});
+if (typeof Animated?.addWhitelistedUIProps === 'function') {
+    Animated.addWhitelistedUIProps({
+        decelerationRate: true,
+    });
+}
 
 type BottomSheet = BottomSheetMethods;
 

src/components/bottomSheetDebugView/ReText.tsx

@@ -15,7 +15,9 @@ interface TextProps {
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
-Animated.addWhitelistedNativeProps({ text: true });
+if (typeof Animated?.addWhitelistedNativeProps === 'function') {
+  Animated.addWhitelistedNativeProps({ text: true });
+}
 
 const ReText = (props: TextProps) => {
   const { text, value: _providedValue, style } = { style: {}, ...props };

src/hooks/useGestureEventsHandlersDefault.tsx

@@ -1,9 +1,9 @@
 import { Keyboard, Platform } from 'react-native';
 import {
   runOnJS,
-  useSharedValue,
-  useWorkletCallback,
+  useSharedValue
 } from 'react-native-reanimated';
+import { useWorkletCallback } from './useWorkletCallback';
 import {
   ANIMATION_SOURCE,
   GESTURE_SOURCE,

src/hooks/useGestureEventsHandlersDefault.web.tsx

@@ -2,8 +2,8 @@ import { Keyboard, Platform } from 'react-native';
 import {
   runOnJS,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
+import { useWorkletCallback } from './useWorkletCallback';
 import {
   ANIMATION_SOURCE,
   GESTURE_SOURCE,

src/hooks/useGestureHandler.ts

@@ -6,7 +6,7 @@ import {
   State,
 } from 'react-native-gesture-handler';
 import type { SharedValue } from 'react-native-reanimated';
-import { useWorkletCallback } from 'react-native-reanimated';
+import { useWorkletCallback } from './useWorkletCallback';
 import { GESTURE_SOURCE } from '../constants';
 import type {
   GestureEventHandlerCallbackType,

src/hooks/useKeyboard.ts

@@ -9,9 +9,9 @@ import {
 import {
   runOnUI,
   useAnimatedReaction,
-  useSharedValue,
-  useWorkletCallback,
+  useSharedValue
 } from 'react-native-reanimated';
+import { useWorkletCallback } from './useWorkletCallback';
 import { KEYBOARD_STATE, SCREEN_HEIGHT } from '../constants';
 
 const KEYBOARD_EVENT_MAPPER = {

src/hooks/useScrollEventsHandlersDefault.ts

@@ -1,5 +1,6 @@
 import { State } from 'react-native-gesture-handler';
-import { scrollTo, useWorkletCallback } from 'react-native-reanimated';
+import { scrollTo } from 'react-native-reanimated';
+import { useWorkletCallback } from './useWorkletCallback';
 import { ANIMATION_STATE, SCROLLABLE_STATE, SHEET_STATE } from '../constants';
 import type {
   ScrollEventHandlerCallbackType,

src/hooks/useWorkletCallback.ts

@@ -0,0 +1,19 @@
+import { useCallback} from 'react';
+import * as Reanimated from 'react-native-reanimated';
+
+
+// @ts-ignore Runtime check if has useWorkletCallback for supporting reanimated v3 and v4 at the same time.
+const hasCallbackWorklet = typeof Reanimated?.useWorkletCallback === 'function';
+
+/**
+ * Provide the same functionality that we had in reanimated v3.
+ * @param callback
+ */
+export const useWorkletCallback = hasCallbackWorklet
+  ? (Reanimated.useWorkletCallback as <T extends (...args: any[]) => any>(cb: T, deps: readonly unknown[]) => T)
+  : function useWorkletCallback<T extends (...args: any[]) => any>(callback: T, deps: readonly unknown[]): T {
+      return useCallback((...args: Parameters<T>): ReturnType<T> => {
+        'worklet';
+        return callback?.(...args);
+      }, deps) as T;
+    };