Skip to content

fix: jitter removed in keyboard avoiding view behaviour - #1515

Open
anshulsingh1210 wants to merge 1 commit into
kirillzyusko:mainfrom
anshulsingh1210:fix/keyboard-avoiding-view-jitter
Open

fix: jitter removed in keyboard avoiding view behaviour#1515
anshulsingh1210 wants to merge 1 commit into
kirillzyusko:mainfrom
anshulsingh1210:fix/keyboard-avoiding-view-jitter

Conversation

@anshulsingh1210

@anshulsingh1210 anshulsingh1210 commented Jun 24, 2026

Copy link
Copy Markdown

📜 Description

Fixes a flicker in KeyboardAvoidingView where, on Android with behavior="padding" (any non-"height" behavior) and automaticOffset={true}, the wrapped content jitters up and down while the keyboard opens instead of animating up smoothly once.

onLayoutWorklet re-records initialFrame on every onLayout for non-"height" behaviors. With automaticOffset, each onLayout resolves the frame through an async KeyboardControllerNative.viewPositionInWindow() call, and those promises settle out of order — a late callback delivers a stale, smaller y + height after a newer larger one already landed. Because initialFrame feeds relativeKeyboardHeight() (which drives paddingBottom), every stale dip yanks the frame back down and shows up as flicker.

This PR keeps the resting-frame capture on first layout / when the keyboard is closed, but while the keyboard is open it accepts a new layout only when its bottom edge (y + height) exceeds the stored one — the resting bottom edge only grows as the keyboard opens, so this discards the out-of-order/stale measurements and lets the frame settle monotonically.

💡 Motivation and Context

Fixes #.

Repro: KeyboardAvoidingView with behavior="padding", automaticOffset, and a content-sized child (no flex: 1) near the bottom of the screen. Logging initialFrame.value across one keyboard open showed height climbing 280 → 396 and y + height ramping 555 → 613 with out-of-order dips in between — confirming the keyboard signals were stable and the oscillation came entirely from the re-recorded frame. The change targets only that re-record path; position (which animates a separate inner view) and height (already frozen while open) are unaffected.

📢 Changelog

JS

  • KeyboardAvoidingView: ignore out-of-order/stale automaticOffset (viewPositionInWindow) measurements in onLayoutWorklet — while the keyboard is open and behavior !== "height", initialFrame now updates only when the layout's bottom edge (y + height) grows, fixing the open-animation flicker on Android. Resting frame is still captured on the first layout and whenever keyboard.isClosed.

🤔 How Has This Been Tested?

Tested on a physical Android device and emulator:

  • Env: RN 0.83.2, new architecture (Fabric), Hermes, react-native-keyboard-controller 1.21.0, react-native-reanimated 4.3.0.
  • Setup: KeyboardAvoidingView with behavior="padding", automaticOffset, keyboardVerticalOffset={0}, wrapping a content-sized (no flex: 1) block near the bottom of the screen with a TextInput.
  • Before: focusing the input made the content jitter up/down repeatedly; initialFrame.value.height oscillated (280 → 396 with out-of-order dips).
  • After: content animates up once and settles; initialFrame updates monotonically and stops re-recording stale frames — no flicker.
  • Sanity-checked behavior="position" and behavior="height" to confirm no behavior change for those paths.

Library public API is unchanged, so no new mocks were required.

📸 Screenshots (if appropriate):

Before Updating::
https://github.com/user-attachments/assets/c16b51a9-b96e-4446-a27f-714991bbb57e

After Updating::
https://github.com/user-attachments/assets/a3e1e7b3-0b0d-4a8a-83e0-ced261190e20

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant