useAnimatedKeyboard doesn't follow keyboard on interactive dismiss mode (dragging) #8291
Description
Description
On iOS, when dragging keyboard with interactive dismiss mode for scrollview (flatlist), value is not changing and view is not moving, so this approach doesn't work well if compare with e.g. react-native-keyboard-tracking-view.
Steps to reproduce
- Use this component to make bottom offset for text input to make similar UX as in WhatsApp, Telegram and other messengers.
export const AnimatedKeyboardOffset = memo(() => {
const keyboard = useAnimatedKeyboard()
const insets = useSafeAreaInsets()
const heightStyle = useAnimatedStyle(() => {
return {
height: interpolate(keyboard.height.value, [0, 400], [insets.bottom, 400])
}
}, [insets.bottom])
return <Animated.View style={heightStyle} />
})- Put it like this above your FlatList.
<>
{textInputElement}
{isIOS && <AnimatedKeyboardOffset />}
</>- Set
keyboardDismissMode="interactive"for your FlatList. - Start dragging keyboard to close.
Result:
Offset is not changing when dragging keyboard, but only when it finally opens or closes.
2025-09-24.20.45.21.mov
Snack or a link to a repository
TODO
Reanimated version
3.10.0
Worklets version
React Native version
0.71.7
Platforms
iOS
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
No response
Device
No response
Host machine
None
Device model
No response
Acknowledgements
Yes