Hello guys I am creating a chat app using React Native. And in chat screen which is the core feature obviously as you know we have to scroll towards the top to load more messages. I am using Scroll View to show messages. Is there any way that I can check if the Scroll View has reached its top ( not bottom )? Thanks!
Asked
Active
Viewed 1,522 times
0
-
do you mean like in the gmail app where you can scroll past the top to refresh? – Gilad Shnoor May 09 '21 at 05:17
-
@GiladShnoor No, like whatsapp in which you scroll to top to load more message. – Manbir Judge May 09 '21 at 05:28
2 Answers
1
If you have a chat app that has an unknown amount of chats you should be using a flatlist in order to display them. It will save you a lot of memory.
Flat list also has this functionality built in take a look at onRefresh:
https://reactnative.dev/docs/flatlist#onrefresh
Gilad Shnoor
- 374
- 3
- 12
-
Thanks and I have this example on Github: https://github.com/jefelewis/react-native-infinite-scroll-demo – Manbir Judge May 09 '21 at 06:04
1
Use FlatList for rendering Chats this will improve your performance over ScrollView. Flatlist vs ScrollView
Use inverted prop of Flatlist to invert it. And after that use onEndReached prop in that call your loadMoreMessage function. When your FlatList is inverted your onEndReached would be called when you reach the top.
rishikesh_07
- 889
- 9
- 16
-
Thanks and I have this example on Github: https://github.com/jefelewis/react-native-infinite-scroll-demo – Manbir Judge May 09 '21 at 06:05
-
could you give a small example as to how to invert and add onEndReached ? @rishikesh_07 – TRINA CHAUDHURI Sep 21 '21 at 11:53
-
Also if my flatlist is inverted, isn't it that the new messages will also come on top, and the old one below? – TRINA CHAUDHURI Sep 21 '21 at 11:55