feat: migrate KeyboardStickyView to reanimated (#1307)

## 📜 Description

Migrate `KeyboardStickyView` back to reanimated.

## 💡 Motivation and Context

`Animated` implementation works well. However this component was
originally developed using Reanimated and now I'm planning to extend its
functionality:
- I'm planning to add proper interactive keyboard dismissal
interpolation;
- I'm going to add `freeze` property.

Both things require better control over the animation management, so I'm
switching back to reanimated implementation.

All the issues described in
#898
seems to be resolved and `1.21.x` requires higher react-native version
(where the issue has been fixed), so I think it's safe to go back to
reanimated implementation now 🤞

Closes
#1306
#1273

## 📢 Changelog

<!-- High level overview of important changes -->
<!-- For example: fixed status bar manipulation; added new types
declarations; -->
<!-- If your changes don't affect one of platform/language below - then
remove this platform/language -->

### JS

- migrate `KeyboardStickyView` to reanimated;

## 🤔 How Has This Been Tested?

Tested with e2e tests.

## 📸 Screenshots (if appropriate):

Everything works as before 🤷‍♂️ 

## 📝 Checklist

- [x] CI successfully passed
- [x] I added new mocks and corresponding unit-tests if library API was
changed

Author: kirillzyusko

src/components/KeyboardStickyView/index.tsx

@@ -1,7 +1,10 @@
 import React, { forwardRef, useMemo } from "react";
-import { Animated } from "react-native";
+import Reanimated, {
+  interpolate,
+  useAnimatedStyle,
+} from "react-native-reanimated";
 
-import { useKeyboardAnimation } from "../../hooks";
+import { useReanimatedKeyboardAnimation } from "../../hooks";
 
 import type { View, ViewProps } from "react-native";
 
@@ -51,29 +54,25 @@ const KeyboardStickyView = forwardRef<
     },
     ref,
   ) => {
-    const { height, progress } = useKeyboardAnimation();
+    const { height, progress } = useReanimatedKeyboardAnimation();
 
-    const offset = progress.interpolate({
-      inputRange: [0, 1],
-      outputRange: [closed, opened],
-    });
+    const stickyViewStyle = useAnimatedStyle(() => {
+      const offset = interpolate(progress.value, [0, 1], [closed, opened]);
 
-    const styles = useMemo(() => {
-      const disabled = Animated.add(Animated.multiply(height, 0), closed);
-      const active = Animated.add(height, offset);
+      return {
+        transform: [{ translateY: enabled ? height.value + offset : closed }],
+      };
+    }, [closed, opened, enabled]);
 
-      return [
-        {
-          transform: [{ translateY: enabled ? active : disabled }],
-        },
-        style,
-      ];
-    }, [closed, enabled, height, offset, style]);
+    const styles = useMemo(
+      () => [style, stickyViewStyle],
+      [style, stickyViewStyle],
+    );
 
     return (
-      <Animated.View ref={ref} style={styles} {...props}>
+      <Reanimated.View ref={ref} style={styles} {...props}>
         {children}
-      </Animated.View>
+      </Reanimated.View>
     );
   },
 );