React Native
About Lesson

In this React Native lesson we are going to learn about React Native FlatList, for example if you want to display list of items in react native than you can use flatlist, it is a performant interface for rendering basic, flat lists, supporting the most handy features like fully cross platform, optional horizontal mode, header support, footer support, pull to refresh, scrolling functionality and many more.

 

 

This is my ReactFlat.js component, you can see that we have created our FlatList.

 

 

In the FlatList you need to give your data, renderItem, in the renderItem we want to give our method that we have already created and the last one is the keyExtractor and it tells the list to use the id for the react keys instead of the default key property.

 

 

 

This is our method basically we are going to just render the title and description of our data in a Card component.

 

 

 

First run this command to start your metro bundler.

 

 

 

Now you can run your application.

React Native FlatList
React Native FlatList

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.
Exercise Files
No Attachment Found
No Attachment Found