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 :)