Skip to content

iOS: Sticky content lags/jumps when interactive keyboard dismissal gesture is started #1563

Description

@chrispader

Describe the bug

When using the KeyboardGestureArea, in the beginning of interactive keyboard dismissal, when the user is starting to drag down the keyboard, the sticky content in KeyboardStickyView lags behind/stutters. After the user is continuing to pan the keyboard down (or up), the sticky content jumps to the new position.

Code snippet

Also reproducible without KeyboardChatScrollView

function MySimplifiedChatScreen() {
    const safeAreaPaddings = useSafeAreaPaddings();
    
    const [composerHeight, setComposerHeight] = useState<number>(CONST.CHAT_FOOTER_MIN_HEIGHT);
    const onComposerLayout = (e: LayoutChangeEvent) => setComposerHeight(e.nativeEvent.layout.height);

    const keyboardGestureAreaOffset = composerHeight - safeAreaPaddings.paddingBottom;
    
    return (
        <KeyboardGestureArea
            style={styles.flex1}
            offset={keyboardGestureAreaOffset}
            interpolator="ios"
            textInputNativeID={CONST.COMPOSER.NATIVE_ID}
            enableSwipeToDismiss={!isComposerFullSize}
        >
            {/* ... */}

            <FlashList
                renderScrollComponent={renderScrollComponent}
                data={dummyData}
                keyExtractor={(item) => item.id}
                renderItem={({item}) => <Text>{item.name}</Text>}
            />
            
            <KeyboardStickyView
                onLayout={onComposerLayout}
                offset={{closed: 0, opened: safeAreaPaddings.paddingBottom}}
            >
                <FooterWithInput />
            </KeyboardStickyView>

            {/* ... */}
        </KeyboardGestureArea>
    )
}

function renderScrollComponent({children, ...restProps}: ScrollViewProps) {
    const safeAreaPaddings = useSafeAreaPaddings();

    return (
        <KeyboardChatScrollView
            {...restProps}
            offset={safeAreaPaddings.paddingBottom}
            keyboardDismissMode="interactive"
        >
            {children}
        </KeyboardChatScrollView>
    );
}

Repo for reproducing

Reproducible in example app:

ScreenRecording_07-28-2026.13-56-52_1.mov

To Reproduce
Steps to reproduce the behavior:

  1. Open the app and login
  2. (Create and) open a chat
  3. Open the keyboard by tapping the input -> the keyboard opens, the footer is pushed up on top of the keyboard
  4. Start do dismiss the keyboard fast by dragging down the chat, while continuing to hold the finger on the screen.

Expected behavior

The sticky content (footer) stays "attached" to the keyboard and follows it's animation.

Actual behavior

The sticky content is still where the keyboard ended before the interactive keyboard dismissal gesture has started.

Screenshots
If applicable, add screenshots to help explain your problem.

Notice that on the second pan gesture, you can see the sticky content (footer) stuck for a couple of milliseconds.

ScreenRecording_07-21-2026.17-32-42_1.mov

Smartphone (please complete the following information):

  • Desktop OS: macOS 26
  • Device: iPhone 14 Pro/iOS simulator
  • OS: iOS 26.5.2/iOS 26.0
  • RN version: 0.85.2
  • RN architecture: new arch
  • JS engine: Hermes
  • Library version: 1.22.1

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

Labels

KeyboardStickyView 🩹Anything related to KeyboardStickyView componentrepro providedIssue contains reproduction repository/code🍎 iOSiOS specific🐛 bugSomething isn't working👆 interactive keyboardAnything related to interactive keyboard dismissing

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions