react / react/react-native

React Native ScrollView Empty Space (flexGrow behaviour)

オープン
#43,138 コメント 3 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

Component: ScrollView Issue: Author Provided Repro Newer Patch Available
主要言語
C++
スター
127k
フォーク
25.3k
平均マージ
1日 23時間
マージ済み PR(30日)
4

説明

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

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、リンクされた Expo Snack を Android デバイスで実行し、Array(5) と Array(15) における ScrollView の動作を比較します。赤い空白領域の原因となっている React Native 0.72 の ScrollView と flexGrow の動作を追跡します。短いコンテンツが緑の領域の直上で終わり、長いコンテンツが境界まで拡張された後にスクロールすれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。