i have rendered 10 views by using flatlist 1st i want to show the details by incresing the height when a user click on view no 6 and decrease height when user again click on it i have done it but problem is that when i click the view no 6 the height of all the views increases and render the list again from 1st view not from 6th how to increase and decrease the height of a specific view and renders from the same view which is increased
const setFunctionality = () => {
setcount(count 1)
if (count % 2 == 0) {
setinitialHeight(windowWidth > windowHeight ? verticalScale(140) : verticalScale(150))
setIsViewShown(false)
}
else {
setinitialHeight(windowWidth > windowHeight ? verticalScale(170) : verticalScale(280))
setIsViewShown(true)
}
}
<View>
<FlatList
data={data}
// keyExtractor={(item) => item.key}
style={{ backgroundColor: '#fff', }}
contentContainerStyle={{ paddingBottom: '5%' }}
renderItem={(element) => {
return (
<View style={{ flexDirection: 'column', flex: 1, width: '100%' }}>
<TouchableOpacity onPress={() => setFunctionality()}>
<View style={{ paddingLeft: 5, flexDirection: 'row', flex: 1, height: initialHeight, backgroundColor: element.item.Status == 'Open' ? '#B7E6E6' : '#EFA5A5', marginTop: 10, borderRadius: 5, alignContent: 'center', marginHorizontal: 10, }}>
<View style={{ backgroundColor: '#fff', width: 50, height: 50, borderRadius: 27, alignSelf: 'center', justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ color: element.item.Status == 'Open' ? '#B7E6E6' : '#EFA5A5' }}>{element.item.Status}</Text>
</View>
<View style={{ flex: 1, borderTopRightRadius: 20, borderBottomRightRadius: 20, padding: windowWidth > windowHeight ? moderateScale(10) : moderateScale(15), justifyContent: 'center' }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5), marginTop: 10 }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(14) : moderateScale(12), fontFamily: 'DMSans-Bold' }}>Customer ID: {element.item.CusId}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(14) : moderateScale(12), fontFamily: 'DMSans-Bold' }}>Customer PO: {element.item.CusPo}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Date From: {element.item.Datefrm}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Date To: {element.item.Dateto}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Tracking No: {element.item.TrNo}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Mark For: {element.item.Markfr}</Text>
</View>
{isViewShown == true ?
<View >
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Item ID: {element.item.ItmId}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Warehouse: {element.item.Wearh}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Unit Price: {element.item.UPri}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Ext Price: {element.item.EPri}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', marginVertical: windowWidth > windowHeight ? verticalScale(5) : verticalScale(5) }}>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular', }}>Order No: {element.item.OrdNum}</Text>
<Text style={{ color: 'black', fontSize: windowWidth > windowHeight ? moderateScale(13) : moderateScale(12), fontFamily: 'DMSans-Regular' }}>Status: {element.item.Status}</Text>
</View>
</View>
:
null
}
</View>
</View>
</TouchableOpacity>
</View>
)
}}
/>
</View>
CodePudding user response：
You can use the index to identify cards.
const [selectedCardIndex,setSelectedCardIndex] = useState(null);
return(<View>
<FlatList
data={data}
style={{ backgroundColor: '#fff', }}
contentContainerStyle={{ paddingBottom: '5%' }}
renderItem={{item,index} => {
return (<TouchableOpacity
style={{height:index==selectedCardIndex?100:50}}
onPress={() => selectedCardIndex(index)}>
...your code...
</TouchableOpacity>)
})
/>
Note: But In flatlist every card should contain the same height and width. Instead of that you can use scrollView.
CodePudding user response：
You need to take one state variable which stores the id of the currently selected item and with isViewShown==true? you need to do this also isViewShown==true&&selectedId==element.item.key?
for this, in your data there should be a unique id.
so on <TouchableOpacity onPress={() => setFunctionality(element.item)}>
const [selectedId,setSelectedId] = useState(null);
and in function
const setFunctionality = (item) => {
setSelectedId(item.key)
setcount(count 1)
if (count % 2 == 0) {
setinitialHeight(windowWidth > windowHeight ? verticalScale(140) : verticalScale(150))
setIsViewShown(false)
}
else {
setinitialHeight(windowWidth > windowHeight ? verticalScale(170) : verticalScale(280))
setIsViewShown(true)
}
}