In my app I have a horizontal flatlist
which rendering list of simple boxes horizontally like slide.
Here is my flatlist :
<FlatList
data={[{key: 'a'}, {key: 'b'}, {key: 'c'}, {key: 'd'}, {key: 'e'}]}
ref={(slider) => { this.slider = slider }}
onEndReachedThreshold={1}
onEndReached={() => {
alert("onEndReached");
}}
refreshing={true}
onRefresh={() => {
alert("refreshing");
}}
renderItem={({item, index}) => (
<View style={{
paddingHorizontal: 5,
paddingVertical: 10,
}}>
<SlideItem><MText> Text {index} </MText></SlideItem>
</View>
)}
horizontal={true}
/>
Now, I want to call some method when list reached the end. So I implemented onEndReached()
. But it called at start when I scroll not when I reached at the end of list.
Basically my main aim is to load more data on right side when user reached at end of flatlist and load more data on left side when user reach on the first item of flatlist.
Please any one can help me !!!