Infinite Scroll in React Native: Pagination with FlatList

Поділитися
Вставка
  • Опубліковано 2 гру 2024

КОМЕНТАРІ • 25

  • @gowshikm6057
    @gowshikm6057 7 місяців тому +6

    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.

    • @nikithreddy7467
      @nikithreddy7467 4 місяці тому

      same issue

    • @jackbader8570
      @jackbader8570 4 місяці тому +1

      You need to wrap your renderItem in a use callback. You also need to wrap the export of your item component with memo()

    • @gowshikm6057
      @gowshikm6057 4 місяці тому

      @@jackbader8570 Thanks for the solution

    • @benedictkpaduwa1192
      @benedictkpaduwa1192 3 місяці тому +1

      You are experiencing this issue because your flatlist is embedded in a library/another component, fix the issue with the rendering for that library, for instance, mine was embedded in a tabs library component and it was causing my flatlist to rerender all over, so i fixed the scene rending for the tabs component and that solved my issue

  • @MilicaAntic-xq8lf
    @MilicaAntic-xq8lf 2 місяці тому

    How can we optimize heavy items flat list ? They all have different sizes. And backend is sending their size via API. But beside that, one item has comments part, where First two comments are visible. This can defer in size. On lower end devices app becomes really slow. We have memoized components, used pagination, fast image, but still there is an issue.

  • @NamPham-bu3gp
    @NamPham-bu3gp 4 місяці тому

    how do we implement onViewableItemsChanges in real example instead of console.log? e.g. I want to calculate then display the information of viewable items on the screen (the calculation maybe expensive)

  • @marcelomarenduarte
    @marcelomarenduarte 10 місяців тому +4

    Thanks teacher... This was exactly what I needed

    • @notjustdev
      @notjustdev  9 місяців тому

      Glad it was helpful!

    • @thebiguniverse9926
      @thebiguniverse9926 7 місяців тому

      ​@@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 🙏🙏🙏
      🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏🏼🙏🏼🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽🙏🏽

  • @gib-gab
    @gib-gab 6 місяців тому

    This is amazing thank you,
    Quick one, if a result from the JSON didn't have an image for example, how could we only display the text for that result and skip the image view?

  • @pfista
    @pfista 7 місяців тому

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

  • @jackanderson300
    @jackanderson300 9 місяців тому

    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
      @notjustdev  9 місяців тому

      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
      @jackanderson300 9 місяців тому

      ​@@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

  • @wanderhungerbuhler
    @wanderhungerbuhler 10 місяців тому

    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.

  • @zarakib
    @zarakib 4 місяці тому

    Thanks broo.

  • @vitorpeixoto2324
    @vitorpeixoto2324 10 місяців тому

    My like was number 137, those who know, know...

    • @notjustdev
      @notjustdev  10 місяців тому

      What am I missing?

    • @vitorpeixoto2324
      @vitorpeixoto2324 10 місяців тому

      @@notjustdev In the show, Rick, Morty, me and you, my teacher Vadim, live in the c-137 reality! 🤣🤣🤣

  • @nickkotte9899
    @nickkotte9899 6 місяців тому +1

    Bro please make normal length videos nobody has time to sit through a THREE HOUR tutorial

    • @notjustdev
      @notjustdev  6 місяців тому

      Data says otherwise

    • @nickkotte9899
      @nickkotte9899 6 місяців тому

      @@notjustdev that’s great i’m glad your wallet is happy 👍

  • @whatsnewnow4469
    @whatsnewnow4469 10 місяців тому

    🎉🎉🎉