`ScrollView` `contentContainerStyle`'s `flexGrow` doesn't account for `contentInsetAdjustmentBehavior` or `automaticallyAdjustKeyboardInsets`
Open
Nobody has claimed this yet.
API: Keyboard
Component: ScrollView
Issue: Author Provided Repro
- Dominant language
- C++
- Stars
- 127k
- Forks
- 25.3k
- Avg merge
- 1d 23h
- Merged PRs (30d)
- 4
Description
Description
This is a reopen of https://github.com/facebook/react-native/issues/25282 which is still reproducible in the latest React native version.
Steps to reproduce
- Create a
ScrollViewwithcontentInsetAdjustmentBehavior="automatic"andcontentContainerStyle={{flexGrow: 1}}. - Observe that the content container grows larger than the ScrollView's height, while the height is expected to match, because safe area insets would be accounted for.
See the Expo snack
React Native Version
0.75.3
Affected Platforms
Runtime - iOS
Output of npx react-native info
N/A — easy to reproduce
Stacktrace or Logs
N/A
Reproducer
https://snack.expo.dev/@louay/scrollview-layout-contentinset-issue
Screenshots and Videos
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked Expo Snack and reproduce the iOS behavior using ScrollView, contentContainerStyle={{flexGrow: 1}}, contentInsetAdjustmentBehavior="automatic", and automaticallyAdjustKeyboardInsets. Done means the content container height accounts for the relevant insets instead of growing beyond the ScrollView height.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100