react / react/react-native

React Native ScrollView Empty Space (flexGrow behaviour)

Abierto
#43,138 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Component: ScrollView Issue: Author Provided Repro Newer Patch Available
Lenguaje dominante
C++
Estrellas
127k
Forks
25.3k
Merge medio
1 d 23 h
PR fusionados (30 d)
4

Descripción

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
image1

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

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

Guía de contribución

Abrir la guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

Comienza ejecutando el Expo Snack enlazado en un dispositivo Android y compara el comportamiento de ScrollView con Array(5) y Array(15). Rastrea el comportamiento de ScrollView y flexGrow en React Native 0.72 responsable del espacio vacío rojo. Se considera terminado cuando el contenido corto termina justo encima del área verde, mientras que el contenido más largo se expande hasta el límite y después permite desplazarse.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
react-native
Área
mobile
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
38/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.