iOS: KeyboardStickyView always disappears when keyboard becomes visible.
iOS and Android: KeyboardStickyView sometimes disappears when the view height changes or when focused input field changes.
diff --git a/node_modules/react-native-keyboard-controller/src/components/KeyboardStickyView/index.tsx b/node_modules/react-native-keyboard-controller/src/components/KeyboardStickyView/index.tsx
index 06a3ef3..815bfa1 100644
--- a/node_modules/react-native-keyboard-controller/src/components/KeyboardStickyView/index.tsx
+++ b/node_modules/react-native-keyboard-controller/src/components/KeyboardStickyView/index.tsx
@@ -1,7 +1,10 @@
-import React, { forwardRef, useMemo } from "react";
-import { Animated } from "react-native";
+import React, { forwardRef } from "react";
+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,22 @@ const KeyboardStickyView = forwardRef<
},
ref,
) => {
- const { height, progress } = useKeyboardAnimation();
+ const { height, progress } = useReanimatedKeyboardAnimation();
- const offset = progress.interpolate({
- inputRange: [0, 1],
- outputRange: [closed, opened],
- });
+ const animatedStyle = useAnimatedStyle(() => {
+ const offset = interpolate(progress.value, [0, 1], [closed, opened]);
- const styles = useMemo(
- () => [
- {
- transform: [
- { translateY: enabled ? Animated.add(height, offset) : closed },
- ],
- },
- style,
- ],
- [closed, enabled, height, offset, style],
- );
+ return {
+ transform: [
+ { translateY: enabled ? height.value + offset : closed },
+ ],
+ };
+ });
return (
- <Animated.View ref={ref} style={styles} {...props}>
+ <Reanimated.View ref={ref} style={[animatedStyle, style]} {...props}>
{children}
- </Animated.View>
+ </Reanimated.View>
);
},
);
Describe the bug
We are doing an upgrade from react native 0.78 to 0.81 (still old architecture) and have encountered several issues with animations. The solution is always to change from react-native Animated to Reanimated. Even the KeyboardStickyView from this library had some troubles with Animated.
iOS: KeyboardStickyView always disappears when keyboard becomes visible.
iOS and Android: KeyboardStickyView sometimes disappears when the view height changes or when focused input field changes.
Code snippet
A KeyboardStickyView side by side with KeyboardAwareScrollView
Basically the same as https://github.com/kirillzyusko/react-native-keyboard-controller/blob/main/example/src/screens/Examples/AwareScrollViewStickyFooter/index.tsx
Repo for reproducing
I have tried to set up the example app in the same way as ours but have not been able to reproduce the bug.
To Reproduce
Expected behavior
KeyboardStickyView is pushed up by the keyboard
Screenshots
Screen_Recording_20260203_144209.mp4
Smartphone (please complete the following information):
Additional context
Here is a patch that solves the problem