react-native
react-native copied to clipboard
Content inside scroll view with contentInsetAdjustmentBehavior with incorrect height
🐛 Bug Report
It seems that scroll view doesn't calculate properly the size of its container when contentInsetAdjustmentBehavior
is set to automatic
To Reproduce
Refer to this snack: https://snack.expo.io/r1XhuwVBV
When contentInsetAdjustmentBehavior
is set to automatic
, the container view get's pushed from the top, but the container maintains the same height, so you have an extra scroll size that hides the bottom text.

For reference, same code with contentInsetAdjustmentBehavior
set to never
:

Expected Behavior
Content should just take the remaining space.

Code Example
https://snack.expo.io/r1XhuwVBV
Environment
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i7-7660U CPU @ 2.50GHz
Memory: 2.82 GB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.13.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 27, 28
Build Tools: 27.0.3, 28.0.3
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5014246
Xcode: 10.1/10B61 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.58.4 => 0.58.4
npmGlobalPackages:
react-native-cli: 2.0.1
It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.
The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info
on a project using the latest release.
We're experiencing it as well and it's quite annoying, does anyone know any workaround?
@1987cr Hi, thanks for reporting issue, I think it may designated behavior, contentInset adjustment don't change frame of component, which means distance between top text and bottom text is constant.
Hey, @zhongwuzw, thanks for the comment. Could you clarify why do you think that's intended? Note that the intrinsic content size of the component inside is smaller than the remaining space, and that's why I also think it shouldn't add the extra height. If this content were bigger, then the behavior would be ok (and it is, I think).
From a practical point of view, it just doesn't look well. If you have some small content inside a scroll view and then a button you want to pin at the bottom, and you want the scroll view to respect the safe area, you can't get the desired behavior, instead, the button will be pushed down more than it should.
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
👋
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
👋
having a similar issues.
Btw, this also happens when contentInsetAdjustmentBehavior
is always
.
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
Still there.
Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.
Hello?
This is so annoying :(
@1987cr cómo está lo más bonito de Sant Cugat?
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
Let's try in a different way.
This doesn't happen in Flutter.
Kidding, I've never tried Flutter.
This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.
Is there any update on this? Still having this issue