2023-05-23
3211
#react native
Hussain Arif
62541
May 23, 2023 â‹… 11 min read

A deep dive into React Native FlatList

Hussain Arif Hussain is a CS student in Pakistan whose biggest interest is learning and teaching programming to make the world a better place.

Recent posts:

alexandra spalato ai hallucination quote

How to stop your AI agents from hallucinating: A guide to n8n’s Eval Node

Walk through a practical example of n8n’s Eval feature, which helps developers reduce hallucinations and increase reliability of AI products.

Alexandra Spalato
Sep 17, 2025 â‹… 6 min read

Secure your AI-generated projects with these security practices

Secure AI-generated code with proactive prompting, automated guardrails, and contextual auditing. A practical playbook for safe AI-assisted development.

Ikeh Akinyemi
Sep 16, 2025 â‹… 5 min read

Let’s kill vibe coding and bring back prompt engineering

Explore the vibe coding hype cycle, the risks of casual “vibe-driven” development, and why prompt engineering deserves a comeback as a critical skill for building better, more reliable AI applications.

Oscar Jite-Orimiono
Sep 16, 2025 â‹… 11 min read
Frontend Devs Aren't Lazy, They're Burnt Out

Frontend developers are burned out, not lazy

Shipping modern frontends is harder than it looks. Learn the hidden taxes of today’s stacks and practical ways to reduce churn and avoid burnout.

Shalitha Suranga
Sep 15, 2025 â‹… 4 min read
View all posts

7 Replies to "A deep dive into React Native <code>FlatList</code>"

    1. Anonymous functions for the ‘keyExtractor’ prop are alright. This is because they don’t get re-rendered repeatedly, so there’s no performance costs

  1. Certainly everything but a deep dive.. you just showed an example of usage. As for FlatList, the most buggy component in all React Native, I highly recommend you not to talk about FlatList as a “rock solid” component. I was excepting a deep dive into the component itself and how to avoid at least the rendering issues, the images not loading within the FlatList items etc.. just a very beginner’s guide, which is great for beginners, but change the title, it’s totally misleading.

    1. Hi Vahradrim, thank you for taking the time to read my post! I didn’t research properly and that’s my fault.
      I’ve now updated my article and would like to know your thoughts.

  2. Hi, what if the array that im showing is extracted from firebase and I don’t know what is the key value pair of the object, how do we use FlatList as the above examples it is known the keys of each key-value pair?

  3. Hey, thanks for the article. Here is another interesting issue with flat list.
    I have a View, containing flatlist inside a react-navigation tab bar.
    Everything works fine, but when I add a button before flatlist, like this

    ..
    ..

    the last element in the flatlist seems to be hidden behind the tab bar.
    Trying to figure out what is wrong.
    So would be interesting to read about best practises, like don’t use other elements except flatlist on a screen etc.

Leave a Reply