refactor: get rid off deprecated useWorkletCallback (#290)

## 📜 Description

Migrated `useWorkletCallback` to `useCallback` + `worklet` directive.

## 💡 Motivation and Context

`useWorkletCallback` is deprecated from `3.6.1` version. Usage of
deprecated API is a risky thing, because it can be removed at any point
of time, so I migrated it back to `useCallback` + `worklet`.

Also I updated `reanimated` to `3.6.1` version and removed unused
`@ts-expect-error` directives.

Closes
#289

## 📢 Changelog

### JS
- updated `reanimated` to version `3.6.1`;
- `useWorkletCallback` -> `useCallback` + `worklet` directive;
- removed unnecessary `@ts-expect-error` directives;

### e2e
- updated `AwareScrollViewKeyboardClosed` screenshot (it should have
scroll back when keyboard gets hidden);

## 🤔 How Has This Been Tested?

Tested manually on API 28 emulator + e2e tests;

## 📝 Checklist

- [x] CI successfully passed

FabricExample/ios/Podfile.lock

@@ -1136,34 +1136,20 @@ PODS:
     - React-Codegen
     - React-RCTFabric
     - ReactCommon/turbomodule/core
-  - RNReanimated (3.4.2):
-    - DoubleConversion
-    - FBLazyVector
-    - glog
+  - RNReanimated (3.6.1):
     - hermes-engine
-    - RCT-Folly
+    - RCT-Folly (= 2021.07.22.00)
     - RCTRequired
     - RCTTypeSafety
-    - React-callinvoker
     - React-Codegen
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-hermes
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTBlob
+    - React-debug
+    - React-Fabric
+    - React-graphics
+    - React-NativeModulesApple
     - React-RCTFabric
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
+    - React-utils
+    - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
   - RNScreens (3.24.0):
@@ -1443,7 +1429,7 @@ SPEC CHECKSUMS:
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
   RNGestureHandler: 0f92ab218707c97810df75609886828ee1b7c5e3
-  RNReanimated: 5008fe999d57038a1c5c1163044854d453f41b98
+  RNReanimated: 6caa64a3a8f5c540cf1d519a79566b735baf2a27
   RNScreens: e114ddbc9b91fbde662870c4256196ab0833314b
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981

FabricExample/package.json

@@ -20,7 +20,7 @@
     "react-native": "0.72.4",
     "react-native-gesture-handler": "2.12.1",
     "react-native-keyboard-controller": "link:../",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.6.1",
     "react-native-safe-area-context": "4.7.1",
     "react-native-screens": "3.24.0",
     "react-native-toast-message": "^2.1.6"

FabricExample/src/components/AwareScrollView/KeyboardAwareScrollView.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { ScrollViewProps, useWindowDimensions } from 'react-native';
 import { FocusedInputLayoutChangedEvent, useReanimatedFocusedInput } from 'react-native-keyboard-controller';
 import Reanimated, {
@@ -9,7 +9,6 @@ import Reanimated, {
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
 
@@ -84,7 +83,9 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   /**
    * Function that will scroll a ScrollView as keyboard gets moving
    */
-  const maybeScroll = useWorkletCallback((e: number, animated: boolean = false) => {
+  const maybeScroll = useCallback((e: number, animated: boolean = false) => {
+    'worklet';
+
     const visibleRect = height - keyboardHeight.value;
     const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0);
 

FabricExample/yarn.lock

@@ -5191,10 +5191,10 @@ react-native-gesture-handler@2.12.1:
   version "0.0.0"
   uid ""
 
-react-native-reanimated@3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697"
-  integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==
+react-native-reanimated@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz#5add41efafac6d0befd9786e752e7f26dbe903b7"
+  integrity sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"

example/ios/Podfile.lock

@@ -497,35 +497,10 @@ PODS:
     - React-Core
   - RNGestureHandler (2.12.1):
     - React-Core
-  - RNReanimated (3.4.2):
-    - DoubleConversion
-    - FBLazyVector
-    - glog
-    - hermes-engine
-    - RCT-Folly
-    - RCTRequired
-    - RCTTypeSafety
-    - React-callinvoker
+  - RNReanimated (3.6.1):
+    - RCT-Folly (= 2021.07.22.00)
     - React-Core
-    - React-Core/DevSupport
-    - React-Core/RCTWebSocket
-    - React-CoreModules
-    - React-cxxreact
-    - React-hermes
-    - React-jsi
-    - React-jsiexecutor
-    - React-jsinspector
-    - React-RCTActionSheet
-    - React-RCTAnimation
-    - React-RCTAppDelegate
-    - React-RCTBlob
-    - React-RCTImage
-    - React-RCTLinking
-    - React-RCTNetwork
-    - React-RCTSettings
-    - React-RCTText
     - ReactCommon/turbomodule/core
-    - Yoga
   - RNScreens (3.24.0):
     - React-Core
     - React-RCTImage
@@ -776,7 +751,7 @@ SPEC CHECKSUMS:
   ReactCommon: 4b2bdcb50a3543e1c2b2849ad44533686610826d
   RNCMaskedView: 949696f25ec596bfc697fc88e6f95cf0c79669b6
   RNGestureHandler: c0d04458598fcb26052494ae23dda8f8f5162b13
-  RNReanimated: 726395a2fa2f04cea340274ba57a4e659bc0d9c1
+  RNReanimated: fdbaa9c964bbab7fac50c90862b6cc5f041679b9
   RNScreens: b21dc57dfa2b710c30ec600786a3fc223b1b92e7
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 3efc43e0d48686ce2e8c60f99d4e6bd349aff981

example/package.json

@@ -20,7 +20,7 @@
     "react-native": "0.72.4",
     "react-native-gesture-handler": "2.12.1",
     "react-native-keyboard-controller": "link:../",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.6.1",
     "react-native-safe-area-context": "^4.7.1",
     "react-native-screens": "^3.24.0",
     "react-native-toast-message": "^2.1.6"

example/src/components/AwareScrollView/KeyboardAwareScrollView.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useCallback } from 'react';
 import { ScrollViewProps, useWindowDimensions } from 'react-native';
 import { FocusedInputLayoutChangedEvent, useReanimatedFocusedInput } from 'react-native-keyboard-controller';
 import Reanimated, {
@@ -9,7 +9,6 @@ import Reanimated, {
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 import { useSmoothKeyboardHandler } from './useSmoothKeyboardHandler';
 
@@ -84,7 +83,9 @@ const KeyboardAwareScrollView: FC<KeyboardAwareScrollViewProps> = ({
   /**
    * Function that will scroll a ScrollView as keyboard gets moving
    */
-  const maybeScroll = useWorkletCallback((e: number, animated: boolean = false) => {
+  const maybeScroll = useCallback((e: number, animated: boolean = false) => {
+    'worklet';
+
     const visibleRect = height - keyboardHeight.value;
     const point = (layout.value?.layout.absoluteY || 0) + (layout.value?.layout.height || 0);
 

example/yarn.lock

@@ -4940,10 +4940,10 @@ react-native-gesture-handler@2.12.1:
   version "0.0.0"
   uid ""
 
-react-native-reanimated@3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697"
-  integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==
+react-native-reanimated@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz#5add41efafac6d0befd9786e752e7f26dbe903b7"
+  integrity sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"

package.json

@@ -80,7 +80,7 @@
     "react": "18.2.0",
     "react-native": "0.72.4",
     "react-native-builder-bob": "^0.18.0",
-    "react-native-reanimated": "3.4.2",
+    "react-native-reanimated": "3.6.1",
     "release-it": "^14.2.2",
     "typescript": "^4.8.4"
   },

src/animated.tsx

@@ -190,7 +190,6 @@ export const KeyboardProvider = ({
         onFocusedInputLayoutChangedReanimated={inputHandler}
         navigationBarTranslucent={navigationBarTranslucent}
         statusBarTranslucent={statusBarTranslucent}
-        // @ts-expect-error https://github.com/software-mansion/react-native-reanimated/pull/4923
         style={styles.container}
       >
         {children}

src/components/KeyboardAvoidingView/index.tsx

@@ -6,7 +6,6 @@ import Reanimated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
-  useWorkletCallback,
 } from 'react-native-reanimated';
 
 import { useKeyboardAnimation } from './hooks';
@@ -68,18 +67,22 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
     const keyboard = useKeyboardAnimation();
     const { height: screenHeight } = useWindowDimensions();
 
-    const relativeKeyboardHeight = useWorkletCallback(() => {
+    const relativeKeyboardHeight = useCallback(() => {
+      'worklet';
+
       const keyboardY =
         screenHeight - keyboard.heightWhenOpened.value - keyboardVerticalOffset;
 
       return Math.max(frame.value.y + frame.value.height - keyboardY, 0);
     }, [screenHeight, keyboardVerticalOffset]);
 
-    const onLayoutWorklet = useWorkletCallback((layout: LayoutRectangle) => {
+    const onLayoutWorklet = useCallback((layout: LayoutRectangle) => {
+      'worklet';
+
       if (keyboard.isClosed.value) {
         initialFrame.value = layout;
       }
-    });
+    }, []);
     const onLayout = useCallback<NonNullable<ViewProps['onLayout']>>(
       (e) => {
         runOnUI(onLayoutWorklet)(e.nativeEvent.layout);
@@ -134,7 +137,6 @@ const KeyboardAvoidingView = forwardRef<View, React.PropsWithChildren<Props>>(
 
     return (
       <Reanimated.View
-        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
         ref={ref}
         onLayout={onLayout}
         style={combinedStyles}

src/components/KeyboardStickyView/index.tsx

@@ -48,12 +48,7 @@ const KeyboardStickyView = forwardRef<
     );
 
     return (
-      <Reanimated.View
-        // @ts-expect-error because `ref` from reanimated is not compatible with react-native
-        ref={ref}
-        style={styles}
-        {...props}
-      >
+      <Reanimated.View ref={ref} style={styles} {...props}>
         {children}
       </Reanimated.View>
     );

src/replicas.ts

@@ -1,11 +1,10 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Keyboard, Platform } from 'react-native';
 import {
   runOnUI,
   useAnimatedReaction,
   useDerivedValue,
   useSharedValue,
-  useWorkletCallback,
   withSpring,
 } from 'react-native-reanimated';
 
@@ -111,7 +110,9 @@ export const useReanimatedKeyboardAnimationReplica = () => {
 
   const progress = useDerivedValue(() => height.value / heightEvent.value);
 
-  const handler = useWorkletCallback((_height: number) => {
+  const handler = useCallback((_height: number) => {
+    'worklet';
+
     heightEvent.value = _height;
   }, []);
 

yarn.lock

@@ -7769,10 +7769,10 @@ react-native-builder-bob@^0.18.0:
   optionalDependencies:
     jetifier "^2.0.0"
 
-react-native-reanimated@3.4.2:
-  version "3.4.2"
-  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.2.tgz#744154fead6d8d31d5bd9ac617d8c84d74a6f697"
-  integrity sha512-FbtG+f1PB005vDTJSv4zAnTK7nNXi+FjFgbAM5gOzIZDajfph2BFMSUstzIsN8T77+OKuugUBmcTqLnQ24EBVg==
+react-native-reanimated@3.6.1:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.6.1.tgz#5add41efafac6d0befd9786e752e7f26dbe903b7"
+  integrity sha512-F4vG9Yf9PKmE3GaWtVGUpzj3SM6YY2cx1yRHCwiMd1uY7W0gU017LfcVUorboJnj0y5QZqEriEK1Usq2Y8YZqg==
   dependencies:
     "@babel/plugin-transform-object-assign" "^7.16.7"
     "@babel/preset-typescript" "^7.16.7"