Nested Flatlists inside ScrollViews is not scrolling? - list

Question

FlatList scrolling issue :~
I am facing issue in scrolling of my flatslists inside 2 scrollviews here is my code structure plz any one if know the solution I shall be thank full
Here is my Code:
<ScrollView
nestedScrollEnabled={true}
style={styles.mainContainer}>
<View style={{ height: 10, backgroundColor: '#000' }}>
</View>
<View style={{height: 90, backgroundColor: '#fff', flexDirection: 'row' }}>
</View>
<View style={{ backgroundColor: '#000', height: 50, flexDirection: 'row', justifyContent: 'space-between' }}>
</View>
<View style={styles.MidCards}>
</View>
<View style={styles.TasksDropDown}>
</View>
<View style={styles.TasksView}>
</View>
<View style={styles.ListsAllinone}>
<ScrollView
style={{flex:1}}
horizontal={true}
nestedScrollEnabled={true}
pagingEnabled={true}
showsHorizontalScrollIndicator={false}
legacyImplementation={false}
>
<View nestedScrollEnabled={true} style={styles.List1}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
</View>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
nestedScrollEnabled={true}
/>
</View>
<View style={styles.List1}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
</View>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
<View style={styles.List1}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
/>
</View>
</ScrollView>
</View>
<View style={styles.footer}>
</View>
</ScrollView >
**Style sheet**
const styles = StyleSheet.create({
mainContainer: {
flex: 1,
backgroundColor: '#ddd'
},
TopAdvertisement: {
flex: .2,
height: 100,
backgroundColor: '#fff'
},
TopBanner: {
marginBottom: 10,
height: 100,
},
footer: {
height: 100,
backgroundColor: '#000',
padding:20
},
MidCards: {
margin: 5,
flexDirection: 'row',
shadowRadius: 20,
shadowOpacity: 5,
borderRadius:5,
},
TasksDropDown: {
margin: 5,
marginHorizontal: 10,
backgroundColor: '#fff',
justifyContent: 'center',
padding: 5,
borderRadius:5,
},
TasksView: {
margin: 5,
marginHorizontal: 10,
backgroundColor: '#fff',
justifyContent: 'center',
padding: 5,
flexDirection: 'row',
borderRadius:5,
},
ListsAllinone: {
margin: 5,
padding: 10,
},
List1: {
flexGrow :1,
//border:1,
width: windowWidth - 30,
backgroundColor: '#fff'
},
});
Discription:
As You can see I used nestedScrollEnabled={true} property also but all the three nested flatlists are not working
How Can I make it scrollable vertically?
I want my whole screen to have scrollable property and also nested scrollView with horizontal scroll property and the most nested flatlists should also scroll
Please can anyone tell me what the problem is here? I have tried alot but failed to solve this
thanks :)

Answer 1

I have fixed Nested Flatlists inside ScrollView not scrolling issue by following steps:
1. Adding a view with fix height outside flatlist
2. Also fixed the height of the outer view same to height of newly added view
3. Add nestedScrollEnabled inside flatlist i.e nestedScrollEnabled={true}
Here is my code Example:
<View nestedScrollEnabled={true} style={styles.List1}>//also fix heigth of this view same to height of inner vie
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
</View>
<View style={{height:600}}>//newly added view
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={item => item.id}
nestedScrollEnabled
/>
</View>
</View>