Dialog: ScrollView Inside Does Not Scroll on Android

オープン
  • 何か問題がありますか？
#3,934 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

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

評価

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

調査の方向性

まず、React Native 0.77.3 と React Native UI Lib 8.3.2 を使用して、Android 上で提供された Dialog と ScrollView のスニペットを再現し、その後 iOS で同じケースを比較します。Dialog コンポーネントの Android での動作を追跡し、fix が完了したときにその内部のコンテンツをスクロールできることを確認します。

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

説明

bug

Description

On Android, the Dialog component doesn’t scroll when it contains a ScrollView inside.

Related to
  • Components
  • Demo
  • Docs
  • Typings
Steps to reproduce

Steps to reproduce the behavior:

  1. Inside the Dialog, place a ScrollView.
Expected behavior

I expected it to scroll same behaviour as in iOS able to scroll

https://github.com/user-attachments/assets/b73c57ec-2850-43c7-aed2-ec1fa7c1e6b5

Actual behavior

Unable to scroll inside the dialog

More Info

Code snippet
        <Dialog
          visible={showDialog}
          width="90%"
          height="50%"
          center
          onDismiss={() => this.setState({ showDialog: false })}
        >
          <View style={[globalStyle.popOutMainContainer, { flex: 1 }]}>
            <View style={[globalStyle.popOutHeader, globalStyle.titleBar]}>
              <View style={{ width: "90%" }}>
                <Text style={[globalStyle.LargeBody, globalStyle.TopBarTitleColor]}>
                  Filter {this.state.filterName.substring(0, this.state.filterName.lastIndexOf(':'))} by:
                </Text>
              </View>
              <TouchableOpacity style={{ width: "10%" }} onPress={() => { this.setState({ showDialog3: false }) }}>
                <Icon2
                  name={"close"}
                  size={24}
                  color={"#FFFFFF"}
                />
              </TouchableOpacity>
            </View>

            <ScrollView 
              style={{ flex: 1 }} 
              contentContainerStyle={[globalStyle.popOutBody, { flexGrow: 1 }]}>
            {/* Sample scrollable item */}
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>            
            <View style={{ padding: 16, backgroundColor: '#f0f0f0', marginBottom: 10, borderRadius: 8 }}>
              <Text style={{ fontSize: 16, color: '#333' }}>This is a sample scrollable item.</Text>
            </View>
             
            </ScrollView>
          </View>
        </Dialog>
Screenshots/Video

https://github.com/user-attachments/assets/a5c86a79-3be8-4f8a-96f6-78d28ed0b278

Environment
  • React Native version: 0.77.3
  • React Native UI Lib version: 8.3.2
Affected platforms
  • Android
  • iOS
  • Web
主要言語
TypeScript
スター
7.2k
フォーク
749
平均マージ
29分
マージ済み PR（30日）
1

環境構築

はじめの一歩

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

wix/react-native-ui-lib のほかの issue

wix/react-native-ui-lib の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

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

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