Android App Development
iOS App Development
Flutter App Development
Cross Platform App Development
Hire on-demand project developers and turn your idea into working reality.
Big thanks to Webkul and his team for helping get Opencart 3.0.3.7 release ready!
Deniel Kerr
Founder. Opencart
Top Partners
In this blog, we will learn about how we can show data in list in react native..
In List we show data in vertical and horizontal scroll-able direction. There are number of ways to show data in scroll able list like scroll-view and list view.
In react native we use FlatList & SectionList to show data in list. We can show data horizontally or vertically using Flat and Section List.
There are two types of list available in react native to propagate your data on screen.
Let’s first discuss about Flat list.
In react native flat list component is used to show fixed number of items which fits the screen or window of the device. Remaining item of the list will render on scroll action. It is the simplest way to show data in list in react-native. One of the silent feature of flat list is that it provide header and footer support.
There are many props of flat list, but two main props without of them you are not able to show data on screen.
1. data: takes items as array to populate item in list. 2. renderItem: takes an item object from data to construct and return the list.
Let’s take an example of Flat list:
If you want to show flat list horizontally then used “horizonal” keyword inside flat list.
like:
Result :
Wants to know more about FlatList, please visit here.
Now, Let’ move to Section List.
Section list is the second type to show data in list. It is different from Flat list.
In section list we can break our data in sections. For example if we want to show data as sections and then their sub section in list, then we can use section list.
We can apply different styles to our section and their item/sub section Like flat list section list also provide header and footer support.
1. sections : Sections is the prop where we pass our data as an array. section contain our entire data in form of array or objects.
2. render Items : this is responsible for retrieve each element from data present in section prop.
3. keyExtractor : this prop is used to fetch unique id from given item.
Let’s take an example of Section List.
In this example we are using static data.
If you want to show section list in horizontal direction, then use “horizontal” keyword inside section list.
Like :
Wants to know more about SectionList, visit here.
In this blog, we learn how we can show data in listview in react native using Flat and Section list.
Hope ! this will help you in finding what you are looking for.
Thanks For Reading
Your email address will not be published. Required fields are marked*
Name*
Email*
Save my name email and website in this browser for the next time I comment.
We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies. Learn more about privacy policy
All communication is done through a ticket system. I appreciate the regular almost daily updates of what is being worked on, and communicating changes or updates is easy through this system. Mobikul's response timeframe is quick.
Josh Arnold
Owner, Shop ATV Escape
USA
India
Global
Name
Email
Enquiry or Requirement
If you have more details or questions, you can reply to the received confirmation email.