In my code I am getting below array value and am populating these value on the basis of key in SectionList . All key value is coming proper in UI , but in my renderitem I am facing some problem .See below in second section I have explained more . Basically in render function I want to pass key value also
// below is array value
customerSearch:[
{
"key": "Customer",
"data": [
{
"name": "John",
"status": "Active",
"nationalId": "NBGVH6676",
"flag": "cus",
},
{ "name": "Abhi",
"status": "Active",
"nationalId": "NBGVH6890",
"flag": "cus"
}
]
},
{
"key": "Requests",
"data": [
{
"name": "Request 1",
"status": "Active",
"nationalId": "K0089"
},
{ "name": "Request 2",
"status": "Active",
"nationalId": "AS420"
}
]
},
{
"key": "Invoice",
"data": [
{
"name": "Invoice No 1",
"status": "Active",
"nationalId": "IN998"
},
{ "name": "Invoice No 2",
"status": "Active",
"nationalId": "ABh007"
}
]
},
]
// Here I am populating data inside the particular key Here in my I am getting that array which is there inside the key value . While I have to put some condition like in "Customer" key only I have to display Avatar .but here non of the key value is coming . Please help
renderItems = ({ item }) => (
<View>
{key==='Customer' ?
<View style={{ flex: 1, flexDirection: 'row', margin: 10,padding:5}}>
<Avatar avatarSize={50}
name={item.name}
isTouchable={false} />
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
{item.name}
</Text>
<Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 10 }}>
National Id : {item.id}
</Text>
{
item.status === 'Active' ?
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
width: 100,
paddingLeft:5
}}>
<View style={{
padding: 5,
backgroundColor: '#2CAC40',
borderRadius: 20,
height: 10,
width: 10,
marginTop: 4,
marginRight: 4,
}} />
<Text note
style={{ flex: 1, color: '#2CAC40', fontSize: hp('2.3%'), justifyContent: 'center' }}>
{item.status}
</Text>
</View> :
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'flex-start',
width: 100,
}}>
<View style={{
padding: 5,
backgroundColor: '#CC2828',
borderRadius: 20,
height: 10,
width: 10,
marginTop: 4,
marginRight: 4
}} />
<Text note style={{ flex: 1, color: '#CC2828', fontSize: hp('2.2%') }}>
{item.status}
</Text>
</View>
}
</View>
</View>:
<View style={{ flex: 1, flexDirection: 'row', margin: 5,padding:5}}>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ flex: 1, color: '#00678F', fontSize: hp('2.3%'), fontWeight: 'bold', marginLeft: 5 }}>
{item.name}
</Text>
<Text style={{ flex: 1, color: '#121212', fontSize: hp('2.3%'), marginTop: 5, marginLeft: 5,paddingBottom:10 }}>
National Id : {item.nationId}
</Text>
<View style={{ width: '100%', height: '.5%', backgroundColor: 'black' }}></View>
</View>
</View>}
</View>
)
// Below code in the render function
<View style={{ marginLeft: 5, marginRight: 5, marginTop: 5, backgroundColor: '#fff' }}>
<SafeAreaView style={{ flex: 1, marginTop: 20 }}>
<SectionList
sections={globalSearchData}
keyExtractor={(item, index) => item + index}
renderSectionHeader={({ section }) => (
<RegularText text={`${section.key}`} textColor={parentStyle[appliedTheme] ? parentStyle[appliedTheme][appliedMode].signatureHeadingColor : null} style={{ fontSize: hp('2.5%') ,paddingLeft:15}}/>
)}
renderItem={this.renderItems}
/>
</SafeAreaView>
</View>
Example UI display
Customer
Name
Status
National ID
Name Status
National ID
Request
Name Status
National ID
Name Status
National ID
Thanks