Question 33293 in React native Question posted in
The official React Native documentation can be found here.

How to decrease and increase the height of a specific view by onpress on view in flatlist of react native?

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>
Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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)
        }

    }

    For the issue you given you need to add a condition on height also based on selectedId:

     height:selectedId==element.item.id? initialHeight:20,

    here instead of 20 you can take whatever initial height or normal height you want

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search