Flatlist not rendering items (React Native)

user_7482033 0
Viewed 268

Hi guys I have this data

{
    "data": {
        "image": [
            {
                "item_image": "Sample Data"
            },
            {
                "item_image": "Sample Data 2"
            }
        ],
        "data": [
            {
                "id": 5,
                "promotion_categoryname": "Cheese Burger Delight",
                "promotion_categoryname_id": 23,
                "promotion_name": "test",
                "promotion_price": 123,
                "promotion_description": "test",
                "promotion_from_date": "2022-03-29",
                "promotion_to_date": "2022-03-31",
                "verified": 0
            },
            {
                "id": 6,
                "promotion_categoryname": "Sample Beverage",
                "promotion_categoryname_id": 25,
                "promotion_name": "Test",
                "promotion_price": 123,
                "promotion_description": "test",
                "promotion_from_date": "2022-03-29",
                "promotion_to_date": "2022-03-31",
                "verified": 0
            }
        ]
    }
}

Now on my flatlist and setting the data

setPromotionData(responseJson.data);

if(promotionData.data.length > 0)
        {
            return (
                <FlatList
                    data={promotionData}
                    renderItem={({item}) => (
                        <View style={{flex:1}}>
                            <View style={{flexDirection:'row'}}>
                                <Image 
                                source={{uri: 'data:image/jpeg;base64,'+ item.image.item_image}}
                                resizeMode='contain'
                                style={{
                                    width:80,
                                    height:80,
                                }}/>
                                <View style={{flexDirection:'column'}}>
                                    <Text style={{fontSize:20, fontWeight:'bold'}}> {item.data.promotion_categoryname}</Text>
                                    <Text style={{fontSize:18, color:'gray'}}> Php {item.data.promotion_price}.00</Text>
                                    <TouchableOpacity onPress={() => DeleteItem(item.data.promotion_categoryname_id)}>
                                        <Text style={{fontSize:18, color:'red'}}> Delete</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={{flex: 1, height: 1, backgroundColor: 'black', marginBottom:15, marginTop:15}} />
                        </View>
                    )} 
                    keyExtractor={item => item.data.id}
                />
            )
        }
        else
        {
            return (
                <View style={{flexDirection:'row', alignItems:'center', marginLeft: 20, marginRight: 20}}>
                    <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
                    <View>
                        <Text style={{width: 100, textAlign: 'center'}}>No Data</Text>
                    </View>
                    <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
                </View>
            );
        }
   }

Now the problem here is that I don't know why it is not displaying or rendering the data but when I console.log() it has the data same as the data above.

NOTE: There's no warning or error on the console

react-native android
1 Answers

The items for the FlatList are contained in promotionData.data but you are passing promotionData, which contains just the data object, to the data prop of the FlatList. Pass the array instead and access the image array via the index of the renderItem function.

<FlatList
                    data={promotionData.data}
                    renderItem={({item, index}) => (
                        <View style={{flex:1}}>
                            <View style={{flexDirection:'row'}}>
                                <Image 
                                source={{uri: 'data:image/jpeg;base64,'+ promotionData.image[index].item_image}}
                                resizeMode='contain'
                                style={{
                                    width:80,
                                    height:80,
                                }}/>
                                <View style={{flexDirection:'column'}}>
                                    <Text style={{fontSize:20, fontWeight:'bold'}}> {item.promotion_categoryname}</Text>
                                    <Text style={{fontSize:18, color:'gray'}}> Php {item.promotion_price}.00</Text>
                                    <TouchableOpacity onPress={() => DeleteItem(item.promotion_categoryname_id)}>
                                        <Text style={{fontSize:18, color:'red'}}> Delete</Text>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            <View style={{flex: 1, height: 1, backgroundColor: 'black', marginBottom:15, marginTop:15}} />
                        </View>
                    )} 
                    keyExtractor={item => item.id}
                />
user_149692810
Related