Skip to main content

FlatList - list

React Native provides a set of components for representing lists of data. Typically, you need to use either FlatList or SectionList.

The FlatList component displays a scrollable list of data that is changing but similar in structure. It works well with long lists of data, the number of elements of which can change over time. Unlike the more general ScrollView, FlatList only displays the items that are currently displayed on the screen, not all items at once.

The FlatList component requires two properties: data and renderItem.

  • data - source of information for the list.

  • renderItem takes one item from the source and returns a formatted component to render.

This example creates a basic FlatList of hardcoded data. Each item in the data props is displayed as a text component. The FlatListBasics component then displays the FlatList and all text components.

More about the component FlatList

Questions​

Does the FlatList component display a scrollable list of data that is changing but similar in structure?

  1. true
  2. false

What is the name of the FlatList property that is the source of information for the list?

  1. list
  2. data
  3. renderItem

What is the name of the FlatList property that takes one item from the source and returns a formatted component to render?

  1. list
  2. data
  3. renderItem

To see how well you learned this lesson, take the test in the mobile application of our school on this topic or in the telegram bot.

EnglishMoji!

  1. React Native

Contributors ✨​

Thanks goes to these wonderful people (emoji key):


Dmitriy Vasilev
💲

EnglishMoji!