fix: KeyboardAwareScrollView collapses to zero height inside auto-sizing parents#1383
Closed
vilson-junior-squadra wants to merge 1 commit intokirillzyusko:mainfrom
Closed
Conversation
Contributor
📊 Package size report
|
Owner
|
Thank you @vilson-junior-squadra Changes look good for me. Let's see what CI tells. If everything is alright then I'll merge this PR (don't pay attention to iOS 26 and iOS 15 simulator tests, they are quite unstable in 1.21.x release and I'm working on making them more stable) |
Owner
|
Could you please fix prettier error? 🙏 |
c2937c4 to
0f21abe
Compare
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.
Description
When using
KeyboardAwareScrollViewinside a wrapper that sizes itself to its content (e.g., a Modal or Bottom Sheet without an explicit height constraint), the scroll view completely collapses to height0.This occurs because
ReanimatedClippingScrollViewwithinScrollViewWithBottomPaddingapplies a hardcodedflex: 1style. In React Native's Yoga layout engine, aflex: 1(which acts asflexBasis: 0) child placed inside an unconstrained, self-sizing parent computes its available space as0.By substituting
flex: 1withflexGrow: 1andflexShrink: 1, the layout maintains full backward compatibility for standard full-screen usages (it still stretches to fill an available Flex container) but gracefully falls back to its intrinsic content height when placed inside an auto-sizing wrapper.Steps to Reproduce
Render
KeyboardAwareScrollViewinside aViewthat lacks absolute constraints or explicit flex stretching:Version 1.21.1
Expected behavior
KeyboardAwareScrollViewshould accurately compute its size based on its children's intrinsic content height when the parentViewis dynamically sizing itself.Actual behavior
The component shrinks to a bounding box of height
0because of the forcedflex: 1container style, making forms invisible inside auto-sized elements like custom Modals.Solution
Replaced
flex: 1with{ flexGrow: 1, flexShrink: 1 }insidesrc/components/ScrollViewWithBottomPadding/styles.ts. This effectively gives the container aflexBasis: 'auto', which solves the collapsing sequence.Simulation
Before
After