Instagram like load more implementation

enesozturk / react-native-instagram

Instagram iOS page transitions implementation with FlashList and Reanimated

https://twitter.com/enesozturkdev/status/1549049433148403712

314 stars 16 forks source link

Instagram like load more implementation #3

Open rawatnaresh opened 2 years ago

rawatnaresh commented 2 years ago

How would you animate load more UI just like instagram? tried to implement it but couldn't get it working. Hoping to see this implemented 🙇

https://user-images.githubusercontent.com/29520305/180732574-5cd66439-48c1-4092-acbc-44e6b7cbba7c.mov

enesozturk commented 2 years ago

I don't think there is an animation there. It's just an infinity load example just like the feed. When the list reaches the end you can fetch new data. Am I thinking wrong?

rawatnaresh commented 2 years ago

when the list reaches the end you see a loading indicator at the bottom
If the data fetching is successful, loading indicator will be hidden and new data will be visible
if the data fetching is unsuccessful, the loading indicator is snapped at the bottom (Animation 1) .
Now you have to Pull up to try again . when you pull up, you will see an animation and its similar to Pull down to Refresh in FlatList but in this case its at the end (Animation 2)