fix: keep shadow nodes in sync (#950)

## 📜 Description

Fixed a problem when `Pressable` doesn't trigger `onPress` callback if
it's located in `KeyboardStickyView` (`KeyboardToolbar`).

## 💡 Motivation and Context

The problem stems from the fact that C++ shadow nodes do not know about
changes caused by `useKeyboardAnimation` hook (we drive animation by
native driver, so C++ thinks that view hasn't changed its position).

I found out that `ScrollView` had the same problem:
facebook/react-native#36504 (comment)

Basically the fix is next:
- after finishing the animation we dispatch
`onUserDrivenAnimationEnded`;
- in `useAnimatedProps`:

```ts
  NativeAnimatedHelper.nativeEventEmitter.addListener(
    'onUserDrivenAnimationEnded',
    data => {
      node.update();
    },
  );
```

Where:

```ts
  new AnimatedProps(
    props,
    () => onUpdateRef.current?.(),
    allowlistIfEnabled,
  ),
```

Which in turns calls:

```ts
  const isFabricNode = isFabricInstance(instance);
  if (node.__isNative) {
    // Check 2: this is an animation driven by native.
    // In native driven animations, this callback is only called once the animation completes.
    if (isFabricNode) {
      // Call `scheduleUpdate` to synchronise Fiber and Shadow tree.
      // Must not be called in Paper.
      scheduleUpdate();
    }
    return;
  }
```

And it triggers re-render and synchronizes C++ state with latest react
state.

Probably not the best solution, but it fixes the problem. Also we have
to gather all connected nodes that depends on animated value, but at the
moment this data is unused:

```ts
  data => {
    node.update();
  },
```

So for now it's safe to skip connected nodes 🙃 (maybe later I'll revisit
this)

Closes
#947
#916
#588

## 📢 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 -->

### Android

- added `keepShadowNodesInSync` function extension for
`ThemedReactContext`;
- call `keepShadowNodesInSync` in the end of keyboard animation.

## 🤔 How Has This Been Tested?

Tested manually in FabricExample.

## 📸 Screenshots (if appropriate):

|KeyboardStickyView|KeyboardToolbar|
|---------------------|----------------|
|<video
src="https://github.com/user-attachments/assets/3950ec69-338e-4f2e-9301-b5c64efb808e">|<video
src="https://github.com/user-attachments/assets/291e846e-3bf8-46fd-9f64-d53ec30c452b">|

## 📝 Checklist

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

Author: kirillzyusko

FabricExample/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Text, View } from "react-native";
+import { Alert, Button, Text, View } from "react-native";
 import {
   KeyboardAwareScrollView,
   KeyboardStickyView,
@@ -82,7 +82,7 @@ export default function AwareScrollViewStickyFooter({ navigation }: Props) {
           <View style={styles.footer} onLayout={handleLayout}>
             <Text style={styles.footerText}>A mocked sticky footer</Text>
             <TextInput placeholder="Amount" style={styles.inputInFooter} />
-            <Button title="Click me" />
+            <Button title="Click me" onPress={() => Alert.alert("Clicked")} />
           </View>
         </KeyboardStickyView>
       )}

android/src/main/java/com/reactnativekeyboardcontroller/extensions/ThemedReactContext.kt

@@ -2,6 +2,7 @@ package com.reactnativekeyboardcontroller.extensions
 
 import android.content.Context
 import android.os.Build
+import com.facebook.react.bridge.Arguments
 import com.facebook.react.bridge.ReactContext
 import com.facebook.react.bridge.WritableMap
 import com.facebook.react.modules.core.DeviceEventManagerModule
@@ -37,6 +38,25 @@ fun ThemedReactContext?.emitEvent(
   Logger.i("ThemedReactContext", event)
 }
 
+fun ThemedReactContext?.keepShadowNodesInSync(viewId: Int) {
+  // originally by viewId we should lookup all connected nodes
+  // and send them to JS
+  // but at the moment JS side broadcasts events to all ViewType
+  // instances, so we can send even empty array
+  val tags = intArrayOf(viewId)
+
+  val tagsArray = Arguments.createArray()
+  for (tag in tags) {
+    tagsArray.pushInt(tag)
+  }
+
+  // emit the event to JS to re-sync the trees
+  val onAnimationEndedData = Arguments.createMap()
+  onAnimationEndedData.putArray("tags", tagsArray)
+
+  this?.reactApplicationContext?.emitDeviceEvent("onUserDrivenAnimationEnded", onAnimationEndedData)
+}
+
 val ThemedReactContext?.appearance: String
   get() =
     when {

android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt

@@ -20,6 +20,7 @@ import com.reactnativekeyboardcontroller.extensions.dispatchEvent
 import com.reactnativekeyboardcontroller.extensions.dp
 import com.reactnativekeyboardcontroller.extensions.emitEvent
 import com.reactnativekeyboardcontroller.extensions.isKeyboardAnimation
+import com.reactnativekeyboardcontroller.extensions.keepShadowNodesInSync
 import com.reactnativekeyboardcontroller.extensions.keyboardType
 import com.reactnativekeyboardcontroller.interactive.InteractiveKeyboardProvider
 import com.reactnativekeyboardcontroller.log.Logger
@@ -327,6 +328,8 @@ class KeyboardAnimationCallback(
 
         // reset to initial state
         duration = 0
+
+        context.keepShadowNodesInSync(eventPropagationView.id)
       }
 
     if (isKeyboardInteractive) {
@@ -401,6 +404,7 @@ class KeyboardAnimationCallback(
       )
     }
     context.emitEvent("KeyboardController::keyboardDidShow", getEventParams(keyboardHeight))
+    context.keepShadowNodesInSync(eventPropagationView.id)
 
     this.persistentKeyboardHeight = keyboardHeight
   }

example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { Button, Text, View } from "react-native";
+import { Alert, Button, Text, View } from "react-native";
 import {
   KeyboardAwareScrollView,
   KeyboardStickyView,
@@ -82,7 +82,7 @@ export default function AwareScrollViewStickyFooter({ navigation }: Props) {
           <View style={styles.footer} onLayout={handleLayout}>
             <Text style={styles.footerText}>A mocked sticky footer</Text>
             <TextInput placeholder="Amount" style={styles.inputInFooter} />
-            <Button title="Click me" />
+            <Button title="Click me" onPress={() => Alert.alert("Clicked")} />
           </View>
         </KeyboardStickyView>
       )}