fix: use animated reaction instead of derivation (#255)

## 📜 Description
<!-- Describe your changes in detail -->

## 💡 Motivation and Context

this is more or less a stylistic change, the `useAnimatedReaction` hook
is better suited for this than `useDerivedValue` which is supposed to
derive a value, but not have side effects

## 📢 Changelog

not needed I guess?

## 🤔 How Has This Been Tested?

I ran this on an Android 10 device (huawei) and it works the same as
before.

I used the 'Aware scroll view' example to test this out and I have to
say that, unfortuantely, on my device the animation is not (and was not)
smooth. That's a different problem though, I might try to open a PR for
that later.

## 📸 Screenshots (if appropriate):
<!-- Add screenshots/video if needed -->
<!-- That would be highly appreciated if you can add how it looked
before and after your changes -->

## 📝 Checklist

- [ ] CI successfully passed

FabricExample/src/screens/Examples/AwareScrollView/useSmoothKeyboardHandler.ts

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import {
   Easing,
-  useDerivedValue,
+  useAnimatedReaction,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
@@ -37,8 +37,11 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
   const persistedHeight = useSharedValue(0);
   const animatedKeyboardHeight = useSharedValue(0);
 
-  useDerivedValue(() => {
-    if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
       const event = {
         // it'll be always 250, since we're running animation via `withTiming` where
         // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
@@ -47,14 +50,21 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         height: animatedKeyboardHeight.value,
         progress: animatedKeyboardHeight.value / persistedHeight.value,
       };
-      handler.onMove?.(event);
+      return event;
+    },
+    (evt) => {
+      if (!evt) {
+        return;
+      }
+      handler.onMove?.(evt);
 
       // dispatch `onEnd`
       if (animatedKeyboardHeight.value === persistedHeight.value) {
-        handler.onEnd?.(event);
+        handler.onEnd?.(evt);
       }
-    }
-  }, []);
+    },
+    [handler]
+  );
 
   useKeyboardHandler(
     {

example/src/screens/Examples/AwareScrollView/useSmoothKeyboardHandler.ts

@@ -1,7 +1,7 @@
 import { Platform } from 'react-native';
 import {
   Easing,
-  useDerivedValue,
+  useAnimatedReaction,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
@@ -37,8 +37,11 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
   const persistedHeight = useSharedValue(0);
   const animatedKeyboardHeight = useSharedValue(0);
 
-  useDerivedValue(() => {
-    if (!IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+  useAnimatedReaction(
+    () => {
+      if (IS_ANDROID_ELEVEN_OR_HIGHER_OR_IOS) {
+        return;
+      }
       const event = {
         // it'll be always 250, since we're running animation via `withTiming` where
         // duration in config (TELEGRAM_ANDROID_TIMING_CONFIG.duration) = 250ms
@@ -47,14 +50,21 @@ export const useSmoothKeyboardHandler: typeof useKeyboardHandler = (
         height: animatedKeyboardHeight.value,
         progress: animatedKeyboardHeight.value / persistedHeight.value,
       };
-      handler.onMove?.(event);
+      return event;
+    },
+    (evt) => {
+      if (!evt) {
+        return;
+      }
+      handler.onMove?.(evt);
 
       // dispatch `onEnd`
       if (animatedKeyboardHeight.value === persistedHeight.value) {
-        handler.onEnd?.(event);
+        handler.onEnd?.(evt);
       }
-    }
-  }, []);
+    },
+    [handler]
+  );
 
   useKeyboardHandler(
     {