Having problem with rendering data in flatlist with id?-CodePudding

I'm having issue on rendering data with id. I couldn't render data for "No receipt history" which is in id 3 in dummy.js. Currently it is only showing id 1 and id 2 correctly like the UI Design created but for id 3 is not following the UI design created. Please do help me out. Below i have attached the images and code.

Current UI:

UI Design Created:

ApprovedScreen.js

import React, {useState} from 'react';
import {GrayCustomView} from './../components/styles';
import {View, Text, TouchableOpacity, Image, FlatList} from 'react-native';
import GlobalStyle from '../components/GlobalStyle';
import {ApprovedReceiptData} from '../constants/dummy'

const ApprovedReceiptScreen = () => {
    const renderItem = ({item}) => (
        <GrayCustomView>
        <TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
            <View style={[GlobalStyle.ReceiptHeader]}>
                    <Text style={[GlobalStyle.ReceiptListTitle]}>{item.receiptnum}</Text>
            </View>
            <View style={[GlobalStyle.ReceiptUpperContainer]}>
                <View style={[GlobalStyle.ReceiptImageView]}>
                    <Image style={[GlobalStyle.ReceiptImageList]} source={{uri: item.memberImage}}/>
                </View>
                <View style={[GlobalStyle.ReceiptDetails]}>
                    <Text style={[GlobalStyle.ReceiptDetails1]}>{item.membername}</Text>
                    <Text style={[GlobalStyle.ReceiptDetails2]}>{item.date}</Text>
                </View>
                <View style={[GlobalStyle.ReceiptAmountDetails]}>
                    <Text style={[GlobalStyle.ReceiptDetails4]}>{item.receiptamount}</Text>
                </View>
            </View>
        </TouchableOpacity>
        </GrayCustomView>
    )

    return (
        <FlatList 
            scrollEnabled={true}
            data={ApprovedReceiptData}
            renderItem={renderItem}
            keyExtractor={ApprovedReceiptData => ApprovedReceiptData.id}
        />
    );

    
}
export default ApprovedReceiptScreen;

dummy.js

export const ApprovedReceiptData = [
    {
        id: 1,
        memberImage: 'https://media.istockphoto.com/vectors/three-people-curved-teamwork-logo-vector-id1363080708?b=1&k=20&m=1363080708&s=170667a&w=0&h=HG6M1JLupChxFQvl8mzUCLCkKWxNwa09RscKJRWTfoU=',
        membername: "Triple R Rewards" ,  
        date: "Jan 14, 2022", 
        receiptnum: "Receipt No: #2131", 
        receiptamount: "RM 80",
        points: "80"
    },
    {
        id: 2,
        memberImage: 'https://cdn3.f-cdn.com/contestentries/1771882/42695517/5ec3817a4257a_thumb900.jpg',
        membername: "KV Physiotheraphy" ,  
        date: "Feb 16, 2022", 
        receiptnum: "Receipt No: #2132", 
        receiptamount: "RM 120",
        points: "120"
    },
    {
        id: 3,
        membername: "No Receipt History" ,  
    },
];

CodePudding user response：

Idea is to conditionally render the different items, like you have no history item, below what I did is if membername has the matched text so I rendered a empty item (PS: you can check with other key as well, I just did for an example)

const renderItem = ({item}) => (
    <GrayCustomView>
      {item.membername === 'No Receipt History' ? (
        <View
          style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Text style={{ color: 'red' }}>{item.membername}</Text>
        </View>
      ) : (
        <TouchableOpacity style={[GlobalStyle.ApprovedButtonContainer]}>
          <View style={[GlobalStyle.ReceiptHeader]}>
            <Text style={[GlobalStyle.ReceiptListTitle]}>
              {item.receiptnum}
            </Text>
          </View>
          <View style={[GlobalStyle.ReceiptUpperContainer]}>
            <View style={[GlobalStyle.ReceiptImageView]}>
              <Image
                style={[GlobalStyle.ReceiptImageList]}
                source={{ uri: item.memberImage }}
              />
            </View>
            <View style={[GlobalStyle.ReceiptDetails]}>
              <Text style={[GlobalStyle.ReceiptDetails1]}>
                {item.membername}
              </Text>
              <Text style={[GlobalStyle.ReceiptDetails2]}>{item.date}</Text>
            </View>
            <View style={[GlobalStyle.ReceiptAmountDetails]}>
              <Text style={[GlobalStyle.ReceiptDetails4]}>
                {item.receiptamount}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      )}
    <GrayCustomView>
  );

My styles may have some issues as you didn't pasted the rendered styles, so you can change it as required.