How To Use ScrollView With Nested FlatList?

In Home screen, I have 3 FlatList and some other View's 'other data', So should I wrap it inside ScrollView that enables me to scroll to see other data and so on, But when I Wrap t

Solution 1:

Try to maybe use scrollView inside scrollview instead of flatList? its seems to be automatically enabled for nested scroll when you use scrollView inside scrollView and you can add nestedScrollEnabled too.

Solution 2:

Why you will need a scrollview and flatlist is because you want to render somethings before the flatlist or after the flatlist, but there is an inbuilt feature of flatlist that does the same thing and you're not maximizing it, that's why you're getting that warning. They are called List Header Component(which render element before the list without repetition) and List Footer Component (which render element after the list without repetition)

Heres an example:

if (index === 0) {
            return (
                <View>
                <Text>The Team</Text>
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
                </View>
            )
        }
        return (
                <ListItem
                key={index}
                title={item.name}
                subtitle={item.description}
                hideChevron={true}
                leftAvatar={{source: {uri: baseUrl + item.image}}} 
                />
        )
    }

    if (this.props.leaders.isLoading) {
        return (
            <ScrollView>
                <History />
                    <Card title="Corporate Leadership">
                        <Loading />
                    </Card>
            </ScrollView>
        );
    }
    else if (this.props.leaders.errMess) {
        return (
            <ScrollView>
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                    <History />
                    <Card title="Corporate Leadership">
                        <Text>{this.props.leaders.errMess}</Text>
                    </Card>
                </Animatable.View>
            </ScrollView>
        )

    }
    else {
        return (
                <Animatable.View animation="fadeInDown" duration={2000} delay={1000}>
                        <FlatList
                            ListHeaderComponent={
                                <History />
                            }
                            data={this.props.leaders.leaders}
                            renderItem={renderLeaders}
                            keyExtractor={item => item.id.toString()}
                            // ListFooterComponent={
                            //     <>

                            //     </>
                            // } 
                            />
                </Animatable.View>
        )
    }

}

}