Nested Flatlists inside ScrollViews is not scrolling?

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>