Skip to content

Fractional offset prop in KeyboardGestureArea causes strange overscroll behaviour #1419

@mozzius

Description

@mozzius

Describe the bug

If using a non-integer offset in KeyboardGestureArea, there's a visual glitch when overscrolling where the sticky view is moved to completely the wrong position. This happened when we use the measured height of the text input - it started breaking when a hairlineWidth border is added. Only appears to happen on iOS, and you need to be using textInputNativeID.

Using Old Arch.

Code snippet

const [inputHeight, setInputHeight] = useState(0)

return (
  <KeyboardGestureArea
    interpolator="ios"
    offset={inputHeight} // change to `Math.round(inputHeight)` to fix
    textInputNativeID={textInputId}
    style={{flex:1}}>
      <FlatList
        // etc etc
        renderScrollComponent={renderScrollComponent} // using KeyboardChatScrollView
      />
      <KeyboardStickyView onLayout={evt => setInputHeight(evt.nativeEvent.layout.height)}>
        <MessageInput // has a hairlineWidth border
          textInputId={textInputId}
          onSendMessage={onSendMessage}
        />
      </KeyboardStickyView>
  </KeyboardGestureArea>
)

Repo for reproducing

Happy to make one if needed, but I haven't had the time to isolate it out of the bluesky repo

To Reproduce
Steps to reproduce the behavior:

  1. Open chat list with KeyboardGestureArea that has a fractional offset
  2. Start an interactive dismiss, then swipe it upwards to overscroll it
  3. Observe the stickyview is positioned incorrectly

Expected behavior

It doesn't do that

Screenshots

Screen.Recording.2026-04-01.at.13.17.43_compressed.mp4

Smartphone (please complete the following information):

  • Desktop OS: MacOS 26
  • Device: iPhone 17 simulator, iOS 26.4
  • OS: [e.g. iOS 10.0]
  • RN version: [e.g. 0.68.2]
  • RN architecture: [e.g. old/new or paper/fabric]
  • JS engine: [e.g. JSC, Hermes, v8]
  • Library version: [e.g. 1.2.0]

Additional context
Add any other context about the problem here.

Metadata

Metadata

Assignees

Labels

repro 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