diff --git a/FabricExample/src/screens/Examples/InteractiveKeyboard/index.tsx b/FabricExample/src/screens/Examples/InteractiveKeyboard/index.tsx index 076b886a2a..88ee0b33f3 100644 --- a/FabricExample/src/screens/Examples/InteractiveKeyboard/index.tsx +++ b/FabricExample/src/screens/Examples/InteractiveKeyboard/index.tsx @@ -23,21 +23,30 @@ const useKeyboardAnimation = () => { const progress = useSharedValue(0); const height = useSharedValue(0); - useKeyboardHandler({ - onMove: (e) => { - "worklet"; + useKeyboardHandler( + { + onMove: (e) => { + "worklet"; - // eslint-disable-next-line react-compiler/react-compiler - progress.value = e.progress; - height.value = e.height; - }, - onInteractive: (e) => { - "worklet"; + // eslint-disable-next-line react-compiler/react-compiler + progress.value = e.progress; + height.value = e.height; + }, + onInteractive: (e) => { + "worklet"; + + progress.value = e.progress; + height.value = e.height; + }, + onEnd: (e) => { + "worklet"; - progress.value = e.progress; - height.value = e.height; + progress.value = e.progress; + height.value = e.height; + }, }, - }); + [], + ); return { height, progress }; }; diff --git a/android/src/main/java/com/reactnativekeyboardcontroller/constants/UIThread.kt b/android/src/main/java/com/reactnativekeyboardcontroller/constants/UIThread.kt new file mode 100644 index 0000000000..82ac22f671 --- /dev/null +++ b/android/src/main/java/com/reactnativekeyboardcontroller/constants/UIThread.kt @@ -0,0 +1,9 @@ +package com.reactnativekeyboardcontroller.constants + +import kotlin.math.floor + +object UIThread { + const val MILLISECONDS_IN_SECOND = 1000.0 + const val FPS = 60 + val NEXT_FRAME = floor(MILLISECONDS_IN_SECOND / FPS).toLong() +} diff --git a/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt b/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt index f1220f53d8..3d04f53333 100644 --- a/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt +++ b/android/src/main/java/com/reactnativekeyboardcontroller/listeners/KeyboardAnimationCallback.kt @@ -14,6 +14,7 @@ import com.facebook.react.uimanager.ThemedReactContext import com.facebook.react.uimanager.UIManagerHelper import com.facebook.react.views.view.ReactViewGroup import com.reactnativekeyboardcontroller.constants.Keyboard +import com.reactnativekeyboardcontroller.constants.UIThread import com.reactnativekeyboardcontroller.events.KeyboardTransitionEvent import com.reactnativekeyboardcontroller.extensions.appearance import com.reactnativekeyboardcontroller.extensions.dispatchEvent @@ -334,8 +335,8 @@ class KeyboardAnimationCallback( if (isKeyboardInteractive) { // in case of interactive keyboard we can not read keyboard frame straight away - // (because we'll always read `0`), so we are posting runnable to the main thread - view.post(runnable) + // (because we'll always read `0`), so we are posting runnable to the next frame on the main thread + view.postDelayed(runnable, UIThread.NEXT_FRAME) } else { runnable.run() } diff --git a/example/src/screens/Examples/InteractiveKeyboard/index.tsx b/example/src/screens/Examples/InteractiveKeyboard/index.tsx index 076b886a2a..88ee0b33f3 100644 --- a/example/src/screens/Examples/InteractiveKeyboard/index.tsx +++ b/example/src/screens/Examples/InteractiveKeyboard/index.tsx @@ -23,21 +23,30 @@ const useKeyboardAnimation = () => { const progress = useSharedValue(0); const height = useSharedValue(0); - useKeyboardHandler({ - onMove: (e) => { - "worklet"; + useKeyboardHandler( + { + onMove: (e) => { + "worklet"; - // eslint-disable-next-line react-compiler/react-compiler - progress.value = e.progress; - height.value = e.height; - }, - onInteractive: (e) => { - "worklet"; + // eslint-disable-next-line react-compiler/react-compiler + progress.value = e.progress; + height.value = e.height; + }, + onInteractive: (e) => { + "worklet"; + + progress.value = e.progress; + height.value = e.height; + }, + onEnd: (e) => { + "worklet"; - progress.value = e.progress; - height.value = e.height; + progress.value = e.progress; + height.value = e.height; + }, }, - }); + [], + ); return { height, progress }; };