fix(ios): prevent SwiftUI keyboard avoidance from shrinking pages#1097
Closed
wonhyunkwon wants to merge 1 commit into
Closed
fix(ios): prevent SwiftUI keyboard avoidance from shrinking pages#1097wonhyunkwon wants to merge 1 commit into
wonhyunkwon wants to merge 1 commit into
Conversation
Collaborator
|
This PR is probably duplicated by this https://github.com/callstack/react-native-pager-view/pull/1085/changes |
5 tasks
Collaborator
|
Closed in favour of #1085 |
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.
Summary
Fixes #1096. Possibly also addresses #1056.
Since v8 the iOS implementation is a SwiftUI
TabView, which applies automatic keyboard avoidance by default: when the keyboard appears, the keyboard safe area shrinks theTabView's content, so every page is resized natively, outside of React Native's layout.In a React Native app layout is fully owned by Yoga/Fabric, and keyboard handling is done at the RN level (
KeyboardAvoidingView,@gorhom/bottom-sheetkeyboard behaviors, etc.). The result is a double adjustment: the RN side already compensates for the keyboard, then SwiftUI shrinks the pages again, leaving a blank strip above the keyboard where page content should be. All RN layout values (onLayout) stay correct the whole time — only the native frames shrink, which makes this very hard to debug from the JS side.Extensions.swiftalready neutralizes safe area influence for the hosting controller (disableSafeArea()overridessafeAreaInsetsto.zero), but SwiftUI's keyboard avoidance is driven by the keyboard safe area channel, which that override does not cover.The fix is one line: opt the
TabViewout of keyboard avoidance with.ignoresSafeArea(.keyboard). This restores the correct semantics for an RN-managed view — native views should follow the RN-driven frame only.Note: this only reproduces on real devices; simulators behave differently with SwiftUI keyboard avoidance (hardware-keyboard integration), which is likely why it slipped through.
Test Plan
What's required for testing (prerequisites)?
PagerViewis visible — e.g. aTextInputabove aPagerView(a bottom sheet with a search input works well)What are the steps to reproduce (after prerequisites)?
PagerView.TextInputso the keyboard appears.backgroundColorshows the strip is thePagerView's own background where the natively-shrunken pages should be).Verified in a production app (RN 0.83.4, new architecture):
bun typescript,bun lint, andbun testall pass (native-only change).Compatibility
Checklist
README.md(not applicable — no API change)