Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

react native
communitycreator

How to use the FlatList component in React Native

Yousaf Khan

React Native provides different types of components to render a data list. Each of these components is appropriate for certain use cases.

One of the components that can be used to render a list of data is called FlatList. It will render a list of similarly structured data.

How to use the FlatList component

To use the FlatList component, we need to have the following two things:

  1. List of data that we need to render.
  2. The component that will be used to render each piece of data in our list. (We can use built-in components or create our own custom components.)

How to create a data list

As mentioned above, we need a list of data to render.

We will create a dummy list that contains data on our dummy users:

const users = [
  { id: 1, name: "John Doe", age: 25, profession: "Banker" },
  { id: 2, name: "Mark Taylor", age: 32, profession: "Singer" },
  { id: 3, name: "Tom Hardy", age: 25, profession: "Actor" }
];

How to create a custom component

The next thing we need is a component that will be used to render a single user data from our list of data.

We will create a custom User component as shown below:

function User({ data }) {
  const { name, age, profession } = data;

  return (
    <div
      style={{
        boxShadow: "0 0 2px rgba(0,0,0, 0.3)",
        margin: "5px",
        padding: "10px 25px",
        fontSize: "1.2rem"
      }}
    >
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <p>Profession: {profession}</p>
    </div>
  );
}

User component takes a prop named data that contains the data of a single user. Inside the User component, we have destructured different properties from the data object and then rendered those properties.

We have also added some CSS styles on the wrapper div element in the User component.

Using the FlatList component

Now, we are ready to use the FlatList component.

We need to pass the following three props to the FlatList component:

  1. data - list of data that needs to be rendered.
  2. renderItem - a function that needs to return the component that will render the data in the list.
  3. keyExtractor - a function that takes a single item from our data list as an argument and returns a unique value to be used as a key. We will use the id as a key. (More details on why we need this key can be found on react docs).

Let’s create a re-usable FlatListDemo component that uses the FlatList component:

const FlatListDemo = ({ dataList, RenderComponent }) => {
  return (
    <View>
      <FlatList
        data={dataList}
        renderItem={(obj) => <RenderComponent data={obj.item} />}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

FlatListDemo component receives the following two props:

  1. dataList - list containing the data to be rendered.

  2. RenderComponent - a component used to render the data in the list passed as a dataList prop.

The function passed as renderItem prop will receive an object that contains a key named item. The value of this item key will be a single user object from our users list. We then pass this item property to the RenderComponent component.

Use the FlatListDemo component

FlatListDemo component can be used as follows:

<FlatListDemo 
  dataList={users}
  RenderComponent={User} 
/>

Doing the above will render a list as shown below:

Advantage of using FlatList Component

One major advantage of using the FlatList component is that it does not renders the whole list. Instead, it only renders the elements that are currently in view.

RELATED TAGS

react native
communitycreator
RELATED COURSES

View all Courses

Keep Exploring