React Native — Flat Lists

React Native is a mobile development that’s based on React that we can use to do mobile development.

In this article, we’ll look at how to use it to create an app with React Native.

FlatList

We can add the FlatList component to display a simple list view.

It’s cross-platform and works with horizontal mode.

Also, it has header, footer, and separator support.

We can pull it to refresh the data.

We can load data as we scroll with it.

And it also has multiple columns support.

For example, we can write:

import React from 'react';
import { SafeAreaView, FlatList, StyleSheet, View, Text } from 'react-native';
const DATA = Array(100).fill().map((_, i) => ({ id: i, title: i }))

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

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

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={item => item.id}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 0
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

to create our list.

We create the Item component that renders the View and Text component for a list item.

The renderItem function is a function to render a Item .

Then we add a SafeAreaView and a FlatList to let us render a scrollable list.

We pass an array in the data prop.

And the renderItem prop has the renderItem function we created earlier.

keyExtractor is a function to get the unique key for an item.

We can make our items selectable by using the TouchableOpacity component:

import React from 'react';
import { SafeAreaView, FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native';
const DATA = Array(100).fill().map((_, i) => ({ id: i, title: i }))

const Item = ({ item: { title }, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{title}</Text>
  </TouchableOpacity>
);

export default function App() {
  const [selectedId, setSelectedId] = React.useState(null);
  const renderItem = ({ item }) => {
    const backgroundColor = item.id === selectedId ? "lightgreen" : "pink";
    return (
      <Item
        item={item}
        onPress={() => setSelectedId(item.id)}
        style={{ backgroundColor }}
      />
    );
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 0
  },
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  },
  title: {
    fontSize: 32,
  },
});

The Item component is rendered with the TouchableOpacity component to let us show something different when it’s selected.

In the App component, we have the renderItem function which takes the item and set the background color according to which one is pressed.

We determine which one is pressed with the onPress prop, which takes a function that calls setSelectedId to set the selected item’s ID.

Then in the style prop, we set the backgroundColor property to the color we want according to whether the selectedId is the same as the current item’s id .

Now when an item is selected, the item has a lightgreen background.

Otherwise, it has a pink background.

Conclusion

We can add a FlatList component to display a scrollable list of items.