Skip to content

iOS: Content in KeyboardStickyView is stuck while keyboard is dismissed interactively #1562

Description

@chrispader

Describe the bug

On iOS physical devices, the content in KeyboardStickyView is stuck in the middle of the screen when the keyboard is dismissed.

Code snippet

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

PR: Expensify/App#96167
Exact commit: https://github.com/Expensify/App/tree/a05723633a836a8b62194314231e087efd2edb3a

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. Manually dismiss the keyboard by dragging down the chat

Expected behavior

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

Actual behavior

The sticky content (footer) is not stuck in the middle of the screen where it was while the keyboard was open.

Screenshots

Untitled.mov

Smartphone (please complete the following information):

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

Metadata

Metadata

Assignees

Labels

KeyboardStickyView 🩹Anything related to KeyboardStickyView component🍎 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