React Native Tutorial #7 - Flat List Component

Hey gang, in this React Native tutorial we'll take a look at another way to output lists of data - using the FlatList component.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🐱‍💻 🐱‍💻 Other Related Courses:

[arisafukuzaki]

Just quick info, only adding numColumns prop returns an error with "Invalid Violation: Changing numColumns on the fly is not supported". In the documentation says, "Multiple columns can only be rendered with horizontal={false}". Just simply by adding horizontal={false} helped, for those of you who had the same error :)

[muhammadmohsinraoof]

The way you explain things in a very simple and easy way is just amazing.... Thank you so much <3

[ben_jammin]

Exactly what I've been looking for. Thank you!

[anhquannguyen]

Thank you Ninja for everything you have done ! <3

[adilmalik]

if someone is having an issue that flatlist is not displaying items then please try adding return at the very start of line 21.adding return keyword before <Text ...>...</Text> will hopefully fix your problem :)
Stay Blessed <3

[HUMANFRST]

Great tutorial. Mind telling why destructuring was required for renderItem prop and not for the keyExtractor prop?

[TheThirdWorldCitizen]

numcolumns seems nice but a bit useless considering we can just use flexbox to accomplish the same or better results.

[aribkamal]

learning React Native and going to implement all this knowledge for a take home assignment on an internship. Thank you for this tutorial!

[sudheer-suri]

Hi, I didn't understand the part at 2:12 where you explained that we have to destructure the item, i didn't understand why we need to destructure it

[alexdorrington]

I don't get the yellow advisory errors on my emulator. Anyone else experiencing this?

It doesn't thrown the error when I leave out the key prop when mapping over the array for example

[rodss]

Thank you: ') u are my new Master, i loved your videos

[SabioII]

I don't know if it was any update, but my FlatList is working without keyExtractor and doesn't throw any error. Is it happening to you, guys, too?

[sidharthpunathil]

2::14 When you'r destructing renderItem={({item}) is item the syntax of renderItem prop or can it be any name?

[jonathanturner]

"wuuckx" 6:06 lol. Gotta love the accent :)

[monishaathiyagarajan]

How to add index in renderItem in the flatlist component

[design-]

Sujan, when will the next video be released?

[harishbalasubramanian]

I already introduced you to two other friends of mine. We really appreciate what you do, Ninja. :D

[dinmadaniel]

was there a change on flatlist cause its not working

[GreenBrainX]

But ho can I use flatlist to showcase an entire component that has views, texts and other components which make use of data that comprises of different things like title, gender, age, profile photo etc?
What I see you have done here is only to display one type of information, in this case name.

[rajatgoyal]

Hey I have a quick question, why we don't need to destrucure the item in keyExtractor
But you have destructured item inside renderItem