KeyboardStickyView does not follow the keyboard properly when interactively dismissing on iOS

[iankberry]

Describe the bug

The KeyboardStickyView component does not follow the keyboard properly when interactively dismissing on iOS. I included a recording from Android here as well to show that it works as expected there.

Repo for reproducing

https://github.com/iankberry/ios-interactive-keyboard-repro

To Reproduce

1. Checkout the repro an run npm run ios
2. Tap "Open sheet" in the app
3. Attempt to interactively dismiss the keyboard

Expected behavior

The sticky view should remain "stuck" to the keyboard as it is interactively dismissed.

Screenshots

iOS:

Screen.Recording.2025-12-02.at.12.06.34.PM.mov

Android:

Screen.Recording.2025-12-02.at.11.47.17.AM.mov

Smartphone (please complete the following information):

• Device: iOS simulator
• OS: iOS 26.1
• RN version: 0.81.5
• RN architecture: fabric
• JS engine: Hermes
• Library version: 1.20.0

[kirillzyusko]

Hey @iankberry

Thanks for raising the issue and sorry for a long response! This issue indeed exist. Let me quickly explain why double scroll issue happens on iOS:

• you render KeyboardStickyView inside ScrollView
• KeyboardStickyView is just another View from react-native
• KeyboardStickyView uses keyboard position and changes its position because of translateY property being animated

Now when you start to scroll -> your view eventually changes position because it's inside scrollable component + it changes position because of keyboard movement. So you get 2x speed.

See how I implemented interactive keyboard dismissal in chat-like app:

react-native-keyboard-controller/example/src/screens/Examples/InteractiveKeyboardIOS/index.tsx

Lines 132 to 156 in 6da1bb4

	<Reanimated.ScrollView
	ref={ref}
	// simulation of `automaticallyAdjustKeyboardInsets` behavior on RN < 0.73
	animatedProps={props}
	automaticallyAdjustContentInsets={false}
	contentContainerStyle={contentContainerStyle}
	contentInsetAdjustmentBehavior="never"
	keyboardDismissMode="interactive"
	testID="chat.scroll"
	onContentSizeChange={scrollToBottom}
	onScroll={onScroll}
	>
	{history.map((message, index) => (
	<Message key={index} {...message} />
	))}
	</Reanimated.ScrollView>
	<AnimatedTextInput
	multiline
	nativeID="chat-input"
	style={textInputStyle}
	testID="chat.input"
	value={text}
	onChangeText={setText}
	onLayout={onInputLayoutChanged}
	/>

Basically I render input outside of ScrollView and apply translateY (KeyboardStickyView will do it for you, I developed this example when KeyboardStickyView didn't exist yet).

Could you please try to move KeyboardStickyView outside of ScrollView and let me know if it fixes a problem?

P. S. a similar problem has been discussed in #594 (KeyboardAvoidingView has double scroll issue, because you typically wrap ScrollView)

[iankberry]

@kirillzyusko Thanks for the detailed reply! You're right - I think I'm misusing these components a bit. However my use case in this example is subtly different from the chat example. I'll try to explain...

In the chat example, there is a text input that lives at the bottom of a scroll view that contains a number of chat messages. When the input is focused, the keyboard shows and the Y position of the input is adjusted. The "swipe down" gesture is handled by the KeyboardGestureArea component combined with the scroll view.

My use case is a bit different from a chat app. Basically I have a number of details screens in my app that contain a list of notes, among other fields. When you add a new note or edit an existing note, the input view animates from the bottom of the screen (currently using a RN Modal component so it appears above all other content). The desired behavior is that you can "swipe down" on the input view and have the keyboard dismiss interactively. I also have a separate pan gesture handler on the input view that is only active when the keyboard is not visible so that it can be dismissed by itself.

If I change my code around to better match your example, the dismiss behavior works as expected if you "swipe down" on the area above the input view. However if you swipe on the input view itself, it does not capture the touch and dismiss the keyboard. Wrapping the whole thing in a scroll view makes the gesture work, but it has the double offset issue as you describe.

In short, I am basically trying to create a custom bottom sheet that contains a text view + a toolbar and I'd like the user to be able to dismiss the whole thing by swiping down on the input view (or anywhere on the screen). There really isn't a scroll view involved in my case as this all lives in a RN modal view above the scroll view associated with the details screen itself. Hopefully there's a way to accomplish what I'm trying to do, but also willing to accept that I might need to change my approach too :-)

Including a brief recording of my app here to hopefully provide some more context as to what I'm trying to accomplish.

Screen.Recording.2025-12-09.at.10.15.21.AM.mov