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>
This can be fixed by using the nestedScrollEnabled={true}
prop on the child Scrollview, like as follow:
<ScrollView>
<ScrollView nestedScrollEnabled={true}>
</ScrollView>
</ScrollView>