fix: keep shadow nodes in sync

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>
       )}