Infinite Scroll in React Native: Pagination with FlatList

Рет қаралды 12,288

Күн бұрын

Enhance the user experience of your React Native application by seamlessly implementing infinite scroll pagination using FlatList!
This tutorial is sponsored by ✨IBM StepZen✨ - a GraphQL server with a unique architecture that helps developers build APIs fast and with less code
❇️ Get your free account here: bit.ly/48S5mVd
This comprehensive tutorial will walk you through the key steps involved in efficiently and smoothly creating infinite lists, allowing your app to effortlessly handle large sets of data. Learn how to integrate pagination with Rest API, optimize performance for long lists and keep users engaged by loading additional content as they scroll. This video is your ultimate guide for mastering the techniques of crafting dynamic, high performing paginated lists in React Native.
❗Try our FREE 2-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclas...
✨ Asset Bundle: assets.notjust.dev/rn-lists
💻 Source Code: github.com/notJust-dev/ReactN...
📝 Today's Agenda:
- Introduction to Infinite Scroll Pagination and FlatList in React Native
- Setting Up Your Project and FlatList Component
- Implementing Basic Pagination with a Rest API
- Adding Infinite Scroll Functionality to Load More Items
- Performance Optimization Techniques for Handling Large Lists
- Best Practices for Smooth Scrolling Experience
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev/?...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
00:00 Intro - Tutorial Overview
04:28 IBM StepZen
06:02 Get started with FlatList
13:42 Fetch data from a Rest API
27:17 Basic "Load more" pagination
52:03 Infinite Scroll Pagination
01:09:41 Pull to refresh (FlatList)
01:23:16 Performance optimisation of large lists
02:19:36 onViewableItemsChanges & viewabilityConfig
02:36:40 Multicolumn FlatList Layout
02:42:51 Q&A
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #flatlist #reactnative

Пікірлер: 16

@gowshikm6057 Ай бұрын

When updating the data passed to the FlatList, it will re-render all items from the beginning. How to prevent this behavior, we need to render only the newly added items without affecting the existing ones.

@marcelomarenduarte 4 ай бұрын

Thanks teacher... This was exactly what I needed

@notjustdev 3 ай бұрын

Glad it was helpful!

@thebiguniverse9926 Ай бұрын

@@notjustdevHello Am building a react native app but am having a issue with flatlist please anyone should help me out . I render the video peacefully but each video are all playing, its like listening to 10 drummers at the same time .please what should or can i do to make the focus video to be the only one playing 🙏🙏🙏 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🏼🙏🏼🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽

@user-ti4dp5zu7n 4 ай бұрын

Hey! Excelente video! Do you can upgrade your video about RevenueCat with React Native(Expo) principally in Android, because exists some changes in new versions and don't work perfectly. An example is when I show offerings in Android, unfortunally, don't show in my screen.

@pfista Ай бұрын

Did you ever figure out why duplicate items were showing up in the list? I'm running into similar issues

@jackanderson300 3 ай бұрын

Thanks sir for this video. In this if list is large then at the time of pull to refresh array is not clearing and when api response came data is duplicating. For that i need to add list dependency in useEffect and once list clear calling api.

@notjustdev 3 ай бұрын

To fix the duplication issue, clear the array right before fetching new data in your pull-to-refresh logic, not in useEffect. This ensures the list is empty and ready for fresh data.

@jackanderson300 3 ай бұрын

@@notjustdev yes sir i do before fetching new data but array is not clearing immidiately so that its duplicating item.To fix that i need to call api from useEffect after clearing array. thanks