FlatList not showing its data React Native - react-native

Question

Hi guys I am trying to display data from an object to my flatlist here it is
import {ItemLists} from '../data/ItemLists';
const ListItem = ({item}) => {
return (
<View style={{margin: 10}}>
<Image source={{
uri: item.uri,
}}
style={{width:200,height:200}}
resizeMode="cover"
/>
<Text style={{margin:5}}>{item.text}</Text>
</View>
)
};
and here's my dummy data
export const ItemLists = [
{
title: 'Hot Deals',
data: [
{
"key": 1,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-01"
},
{
"key": 2,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-02"
},
{
"key": 3,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-03"
},
{
"key": 4,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-04"
},
{
"key": 5,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-05"
},
{
"key": 6,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-06"
},
{
"key": 7,
"text": "Title of Food",
"uri": "../../Assets/Images/featured-restau-07"
}
]
}
];
Now here's how I use my FlatLis
<ScrollView>
//... other codes
//... other codes
<View style={styles.HotDealsContainer}>
<View style={styles.HotDealItemContainer}>
<Text style={styles.HotDealTitle}>Hot Deals</Text>
<View style={styles.HotDealsItem}>
<FlatList
horizontal
data={ItemLists}
keyExtractor={(item) => item.key}
renderItem={({item}) => <ListItem item {...item}/>}
/>
</View>
</View>
</View>
</ScrollView>
HotDealsContainer:{
width:'100%',
height:200,
backgroundColor: 'green',
},
HotDealItemContainer:{
marginTop: -135,
marginLeft: 20,
width:Dimensions.get('window').width / 2 * 2 - 40,
height:150,
backgroundColor: 'blue',
},
HotDealsItem:{
flex:1,
justifyContent:'space-between',
flexDirection:'row',
},
HotDealTitle:{
color:'#000',
fontSize:18,
fontWeight: 'bold',
},
The current problem I am facing right now is that it won't display a single thing on the screen . Can someone point out what I am doing wrong ?

Answer 1

Your ItemLists has only one item which has title and data array. If you want to render that data you have to pass only that array:
<FlatList
horizontal
data={ItemLists[0].data}
keyExtractor={(item) => item.key}
renderItem={({item}) => <ListItem item {...item}/>}
/>
The second problem I noticed is that you don't pass the item property to . What you want to do is next:
<ListItem item={item} />
It will be better for readability purpose to store that array of data in a separate variable rather than in an object which is in another array