Dialog: ScrollView Inside Does Not Scroll on Android

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

Start by reproducing the provided Dialog and ScrollView snippet on Android with React Native 0.77.3 and React Native UI Lib 8.3.2, then compare the same case on iOS. Trace the Dialog component's Android behavior and verify that content inside it can scroll when the fix is complete.