1. 12
    Display a List of Items in React Native with FlatList
    2m 49s

Display a List of Items in React Native with FlatList

InstructorChris Achard

Share this video with your friends

Send Tweet

Using ScrollView is an easy way to scroll a list, but it isn’t the most memory efficient, which can really matter for performance on devices with limited memory. We’ll switch from using ScrollView to using FlatList, which will reuse views, and is the preferred way of showing long scrollable lists.

Arup
~ 5 years ago

When I have the FlatList in the App.js data rendering is fine, but when I am moving it to a separate component I am not seeing any data but the "Restaurant Review" is showing up as many data rows are there. Being new finding it difficult to debug. I did debug via Remote JS debugger and I am seeing the data correctly in the RenderItem of the flatlist but the view component of the FlatList component is not rendering data. Any help is appreciated. Thanks

Chris Achardinstructor
~ 5 years ago

Hm - are you returning the component from the render method? It’s a bit difficult to debug without code - could you post a github link maybe?

Arup
~ 5 years ago

@Chris here is the link to my github link

Arup
~ 5 years ago

https://github.com/arupsarkar/jollibee

Chris Achardinstructor
~ 5 years ago

Ah! in app.js you’re importing both header and the row from header.js. Try changing that to the other file and see if that works (line 4 or 5 in app.js)

Arup
~ 5 years ago

Thanks Chris, after updating the import as you suggested it is working as expected, than you for your help. This is my first react-native app I am building a restaurants' ordering and menu review functionality. Closely following your instructions. Thanks again for helping and the content, it is great.

Chris Achardinstructor
~ 5 years ago

Great! Glad it worked, and happy to help :)