How to create a simple list in React Native? Code Example

React Native provides <FlatList> component to create high performance lists which can handle large number of items.

In this article we will see the code example of a simple FlatList.

Code Example

import React from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
];

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

const App = () => {
  const renderItem = ({ item }) => (
    <Item title={item.title} />
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={SUPERHERO_DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 18,
  },
});

export default App;

The output will be –

A <FlatList> component comprises of three main elements or props –

1. data – List of data to display. It should be an array. The data could be anything but every element needs to have unique id.
2. renderItem – A function to design the item. You can display the item in any way you want. This function pick items one by one from data and run then to convert into visuals.
3. keyExtractor – Function returning the unique id or key of each item.

Live Demo

Conclusion

A <FlatList> componet of React Native is used to create high performance long lists on mobile applications. This works for both Android and iOS devices.