Sometimes, we want to add a horizontal FlatList with multiple rows with React Native

In this article, we’ll look at how to add a horizontal FlatList with multiple rows with React Native.

How to add a horizontal FlatList with multiple rows with React Native?

To add a horizontal FlatList with multiple rows with React Native, we can set the numColumns prop.

For instance, we write:

import * as React from 'react';
import { FlatList, Text, View, Dimensions } from 'react-native';
import Constants from 'expo-constants';
import { Card } from 'react-native-paper';

const flatListItems = Array(200)
  .fill()
  .map((_, i) => ({ title: i, id: i }));

const Item = (item) => {
  const { title } = item;
  return (
    <View
      style={{
        backgroundColor: '#f9c2ff',
        padding: 20,
        marginVertical: 8,
        marginHorizontal: 16,
      }}>
      <Text onPress={() => console.log(item)}>{title}</Text>
    </View>
  );
};

export default function App() {
  const renderItem = ({ item }) => <Item title={item.title} />;
  const keyExtractor = (item) => item.id;

  return (
    <View>
      <FlatList
        style={{ height: 300 }}
        data={flatListItems}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        numColumns={3}
      />
    </View>
  );
}

to set the numColumns prop of the FlatList to 3.

As a result, we should see 3 columns displayed in the FlatList.

Conclusion

To add a horizontal FlatList with multiple rows with React Native, we can set the numColumns prop.