React Native ScrollView Empty Space (flexGrow behaviour)
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- C++
- Sterne
- 127k
- Forks
- 25.3k
- Ø Merge
- 1 T. 23 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
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
- Run the attached expo snack and run on an Android device
- See how there is red, this should not be there and the green should be directly below the blue
- Change
Array(5)to something larger like 15; blue expands until green has hit the bottom. Blue now becomes scrollable; this is expected. - The
ScrollViewhas the style red to illustrate that theScrollViewis 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
Beitragsleitfaden
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Starte zunächst den verknüpften Expo Snack auf einem Android-Gerät und vergleiche das Verhalten von ScrollView mit Array(5) und Array(15). Verfolge das für den roten leeren Bereich verantwortliche Verhalten von ScrollView und flexGrow in React Native 0.72. Als erledigt gilt die Aufgabe, wenn kurzer Inhalt direkt über dem grünen Bereich endet, während längerer Inhalt bis zur Begrenzung wächst und anschließend scrollt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 38/100