androidreact-nativereact-native-elements

React Native second ScrollView not working


My app is developed by react-native(0.62.2) and is depended by react-native-elements(2.0.0). a screen of app must include two ScrollView element. First ScrollView will be used for page scrolling, second ScrollView will be used in existing words card. First ScrollView element is working but second ScrollView element not scrolling in card element. I try wrapper view element with using style {flex:1} but there was no result.

<ScrollView>
            // other items ...
            {
            wordSetObject.words.length == 0 ? null :
                <Card  title="Existing Words" dividerStyle={{marginBottom:0}} containerStyle={{maxHeight:300}}>
                    <ScrollView>
                            {
                            wordSetObject.words.map((item, index) => {
                                return(
                                <ListItem
                                    key={index}
                                    title={item.word} 
                                    subtitle={item.meaning}
                                    bottomDivider
                                    rightIcon={
                                        <View style={{flexDirection:'row'}}>
                                            <MCIcon
                                            name="pencil"
                                            size={22}
                                            />
                                            <MCIcon
                                            name="delete"
                                            size={22}
                                            color="red"
                                            onPress={() => onPressDeleteWordButton(index)}
                                        />
                                        </View>
                                    }
                                    />)
                                 })    
                            }
                    </ScrollView>
                </Card>
            }
        </ScrollView>

Solution

  • This can be fixed by using the nestedScrollEnabled={true} prop on the child Scrollview, like as follow:

    <ScrollView>
      <ScrollView nestedScrollEnabled={true}>
      </ScrollView>
    </ScrollView>