CODEWITHSUNDEEP
react-nativeflatlist
Mike Victoria
Mike Victoria

Reputation: 256

Two flatlist in one Reat Native

I'm planning to achieve this in mobile. Using Flatlist.

It scrolls as a whole

enter image description here

Im trying to create this in react native and my code looks like this

<Content nestedScrollEnabled
    style={{ flex: 1, backgroundColor: COLOR.LIGHT }}
    contentContainerStyle={{ flex: 1 }} // important!
>

<List>
    {!_.isEmpty(this.state.newNotif) ?
        <React.Fragment>
            <ListItem itemDivider>
                <Text style={{ color: '#333333', fontSize: 16 }}>New</Text>
            </ListItem>

            <FlatList

                ref="infiniteList"
                data={this.state.newNotif}
                keyExtractor={(x, i) => x.id.toString()}
                renderItem={(data) => this.renderNewNotifCard(data.index, data.item)}
            // onEndReached={({ distanceFromEnd }) => {
            //     console.log(distanceFromEnd);
            //     this.handleEnd()


            // }}
            // onEndReachedThreshold={0.5}
            />

        </React.Fragment>
        :
        null
    }
    {!_.isEmpty(this.state.earlierNotif) ?
        <React.Fragment>
            <ListItem itemDivider>
                <Text style={{ color: '#333333', fontSize: 16 }}>Earlier</Text>
            </ListItem>
            <FlatList

                data={this.state.earlierNotif}
                // onEndReached={() => this.reachedEndCallBack()}

                keyExtractor={(x, i) => x.id.toString()}

                onEndReached={({ distanceFromEnd }) => {
                    console.log(distanceFromEnd);
                    this.handleEnd()


                }}
                onEndReachedThreshold={0.5}
              
                renderItem={(data) => this.renderEarlierNotif(data.index, data.item)}
            />
        </React.Fragment>
        :
        null
    }
</List>

But seems its not having scroll as a whole, It scroll of each set of flatlist.

I hope some could help me.

Upvotes: 0

Views: 1536

Answers (1)

Atul
Atul

Reputation: 698

You should use SectionList with section header - https://reactnative.dev/docs/sectionlist

Upvotes: 3

Related Questions