fix(android): keep BottomNavigationView pinned under the keyboard in edge-to-edge#549
Open
rayabelcode wants to merge 1 commit into
Open
Conversation
…edge-to-edge Material's BottomNavigationView adds the bottom system-window inset, which includes the IME inset under edge-to-edge, to its own padding, so the native tab bar rises above the keyboard. Give ExtendedBottomNavigationView its own inset listener applying system bars and display cutout insets only, excluding the IME type, and return the insets unconsumed so tab-screen inputs still receive keyboard avoidance. This is a no-op outside edge-to-edge. Fixes callstack#357
3 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Under edge-to-edge on Android, focusing a text input pushes the native tab bar up on top of the keyboard instead of letting the keyboard overlay it (iOS behavior). Fixes #357.
Why
The library delegates inset handling to Material.
BottomNavigationViewinstalls a default inset listener in its constructor that addsgetSystemWindowInsetBottom()to its bottom padding, and that value includes the IME inset. WithdecorFitsSystemWindows=falsethe window is not resized, so the IME inset propagates down to the bar and Material pads it by the keyboard height every frame (material-components/material-components-android#493).windowSoftInputMode="adjustPan"does not help whenreact-native-keyboard-controlleris present, since it forcesadjustResizeat runtime.How
Give
ExtendedBottomNavigationViewits ownOnApplyWindowInsetsListenerthat applies system bars + display cutout insets only, excludingType.ime(), and returns the insets unconsumed so sibling views (the tab-screen content that hosts inputs) still receive the IME inset. Gesture-nav clearance is preserved because system-bar and cutout insets are still applied as padding.This is a no-op outside edge-to-edge: with
decorFitsSystemWindows=truethe decor consumes the system insets before they reach the bar, so the computed insets are zero and padding stays at its base, and the keyboard resizes the window rather than dispatching an IME inset. Behavior only changes for the edge-to-edge case that is currently broken.Test plan