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
You cannot have an 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}
/>