FlatList, Invariant Violation: numColumns does not support horizontal

Question

In my project it is showing the above error.

ProductContainer.js:

import React, { useState, useEffect } from 'react'

import { View, Text, StyleSheet, ActivityIndicator, FlatList } from 

'react-native'

import ProductList from './ProductList';

const data = require('../../assets/data/products.json');

const ProductContainer = () => {

    const [products, setProducts ] = useState([]);

    useEffect(() => {

        setProducts(data);

        return () => {

            setProducts([])
        }
    }, [])

    return (

        <View>

            <Text>Product Container</Text>

            <View style={{ marginTop: 100}}>
            <FlatList

                numColumns={2}

                horizontal

                data={products}

                renderItem={({item}) => <ProductList 

                key={item.id}

                item={item}/>}

                keyExtractor={item => item.name}
               
            />

            </View>

        </View>
    )
}

export default ProductContainer;

The error details:

This error is located at:

    in FlatList (created by ProductContainer)

    in RCTView (created by View)

    in View (created by ProductContainer)

    in RCTView (created by View)

    in View (created by ProductContainer)

    in ProductContainer (created by App)

    in RCTView (created by View)

    in View (created by App)

    in App (created by ExpoRoot)

    in ExpoRoot

    in RCTView (created by View)

    in View (created by AppContainer)

    in RCTView (created by View)

    in View (created by AppContainer)

    in AppContainer

If you want I can provide other details also.

Thanks in advance

Answer 1

You cannot have a horizontal FlatList with multiple columns. That is what React Native's documentation says:

Multiple columns can only be rendered with horizontal={false} and will zig-zag like a flexWrap layout. Items should all be the same height - masonry layouts are not supported.

You should remove numColumns=2 if you want your FlatList being horizontal or set horizontal to false if you want two columns.

  <FlatList
      numColumns={2}
      horizontal={false} 
      data={products}
      renderItem={({item}) => <ProductList 
      key={item.id}
      item={item}/>}
      keyExtractor={item => item.name}
               
  />