React Native ScrollView Empty Space (flexGrow behaviour)

[caseygibson-emesent]

Description

Please refer to attached images for context.

The issue is that the ScrollView component has added extra spacing at the bottom which is coloured red; this should not be there. The expected behaviour is that the green area is directly below the ScrollView content (blue); the red should never exist.

The blue area is not scollable when there is enough room and should become scrollable when there's not enough room.

Images 2 and 3 are the expected behaviour.

Steps to reproduce

1. Run the attached expo snack and run on an Android device
2. See how there is red, this should not be there and the green should be directly below the blue
3. Change Array(5) to something larger like 15; blue expands until green has hit the bottom. Blue now becomes scrollable; this is expected.
4. The ScrollView has the style red to illustrate that the ScrollView is filling the space regardless of it's content.`

React Native Version

0.72.4

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
  CPU: (16) x64 11th Gen Intel(R) Core(TM) i9-11950H @ 2.60GHz
  Memory: 33.04 GB / 62.00 GB
  Shell:
    version: 5.0.17
    path: /bin/bash
Binaries:
  Node:
    version: 21.4.0
    path: /home/linuxbrew/.linuxbrew/bin/node
  Yarn:
    version: 1.22.19
    path: ~/.nvm/versions/node/v18.14.0/bin/yarn
  npm:
    version: 10.2.4
    path: /home/linuxbrew/.linuxbrew/bin/npm
  Watchman:
    version: 20230430.125247.0
    path: /usr/local/bin/watchman
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java:
    version: 11.0.21
    path: /usr/bin/javac
  Ruby:
    version: 2.7.0
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.72.10
    wanted: 0.72.10
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: false
  newArchEnabled: Not found

Stacktrace or Logs

NA.

Reproducer

https://snack.expo.dev/@c-gibson-emesent/honest-red-scones

Screenshots and Videos

Image 1: Current behaviour when ScrollView is not scrollable

Image 2: Expected look / behaviour when the ScrollView is not scrollable

Image 3: How it should look when the items expand the ScrollView until there's no more room and the ScrollView becomes scrollable

[github-actions[bot]]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.72.10. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[stianjensen]

I believe this is simply how ScrollView is deisgned to work. The size of the ScrollView itself is completely detached from the size of its children.

If you meed the ScrollView to shrink when not completely filled up by its child components, I think you'll need to add custom logic for that.

Perhaps using the onContentSizeChabge prop: https://reactnative.dev/docs/scrollview