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.
To use the FlatList component, we need to have the following two things:
List of data that we need to render.
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.)
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" }];
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 (<divstyle={{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.
Now, we are ready to use the FlatList component.
We need to pass the following three props to the FlatList component:
data - list of data that needs to be rendered.
renderItem - a function that needs to return the component that will render the data in the list.
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
Let’s create a re-usable FlatListDemo component that uses the FlatList component:
const FlatListDemo = ({ dataList, RenderComponent }) => {return (<View><FlatListdata={dataList}renderItem={(obj) => <RenderComponent data={obj.item} />}keyExtractor={(item) => item.id}/></View>);};
FlatListDemo component receives the following two props:
dataList - list containing the data to be rendered.
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.
FlatListDemo component can be used as follows:
<FlatListDemodataList={users}RenderComponent={User}/>
Doing the above will render a list as shown below:
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.