How to create a multi column list in React Native? Code Example

To create a multi column FlatList in React Native, you can use numColumns prop. It accepts the count of the number of columns you want to display.

There are few prerequisites like a list should not be horizontal and masonry layout is not supported. It means if elements are of different heights then an empty gap will be visible between rows.

Code Example

import React, { useState } from "react";
import { FlatList, SafeAreaView, StyleSheet, Text, View, StatusBar } from "react-native";

const SUPERHERO_DATA = [
  {
    id: '1',
    title: 'Ironman',
  },
  {
    id: '2',
    title: 'Thor',
  },
  {
    id: '3',
    title: 'Captain America',
  },
  {
    id: '4',
    title: 'Hulk',
  },
  {
    id: '5',
    title: 'Hawkeye',
  },
  {
    id: '6',
    title: 'Spiderman',
  },
  {
    id: '7',
    title: 'Antman',
  },
];

const App = () => {
  
  const renderItem = ({ item, index, separators }) => (
    <View style={styles.item}>
        <Text>{item.title}</Text>
      </View>
  )

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        numColumns={3}
        data={SUPERHERO_DATA}
        renderItem={renderItem}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: StatusBar.currentHeight || 0,
  },
  item: {
    backgroundColor: '#fff000',
    padding: 10,
    flex:1,
    margin: 5,
  },
});

export default App;

The output will look like this –

In this code we are setting numColumns equals to 3 in line 46 and that’s why it is showing 3 items in one row.

Live Demo

Conclusion

To display multiple columns in a row we can use numColumns prop of FlatList in React Native. This prop accepts the numeric value of count of number of columns to display.