How can I collapse Item pressed on arrays - react native?

Question

I have a list of cards, when pressed to any of them, I want to Increase hight for that card, So I use layoutAnimation to handle this case because when I use Animated API from RN, I got an error when setNativeDrive "height" Anyway, In my case, it increases height for every card in the list,

So how can I solve it?

Code snippet

Live Demo

const OpenedAppointments = ({slideWidth}) => {
  const [currentIndex, setCurrentIndex] = React.useState(null);

  const [cardHeight, setCardHeight] = useState(140);

  const collapseCard = (cardIndex) => {
    setCurrentIndex(cardIndex);
    currentIndex === cardIndex
      ? (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(200))
      : (LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut),
        Animated.spring(),
        setCardHeight(140));
  };

  const renderItems = (item, index) => {
    return (
      <TouchableOpacity
        delayPressIn={0}
        onPress={() => collapseCard(index)}
        key={item.id}>
        <Animated.View
          style={[
            styles.itemContainer,
            {
              height: cardHeight,
            },
          ]}>
          <View style={styles.headerContainer}>
            <View style={styles.imgContainer}>
              <Image
                resizeMode="cover"
                style={styles.img}
                source={{uri: item.vendorInfo.vendorImg}}
              />
            </View>
            <View style={{width: '80%'}}>
              <View style={styles.titleContainer}>
                <Text numberOfLines={1} style={styles.vendorName}>
                  {item.vendorInfo.name}
                </Text>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <Text style={styles.rateText}>{item.vendorInfo.rate}</Text>
                  <AntDesign name="star" size={18} color="#262626" />
                </View>
              </View>
              <View style={styles.socialContainer}>
                <View
                  style={{
                    width: 32,
                    height: 32,
                    backgroundColor: '#000',
                    borderRadius: 5,
                  }}
                />
              </View>
            </View>
          </View>
          <View style={styles.footer}>
            <Text style={styles.serviceName}>
             
                {item.serviceName}
            </Text>
            <Text style={styles.price}>
              {item.price}
            </Text>
          </View>

// this will appeared when pressed to card "Footer Card"
          <View>
            <View style={styles.line} />
            <View style={styles.editFooter}>
              <View style={styles.dateContainer}>
                <MemoCalender
                  style={styles.calenderIcon}
                  size={26}
                  color="#000"
                />
                <View style={styles.dateBox}>
                  <Text style={styles.dateText}>{item.date}</Text>
                  <Text style={styles.dateText}>{item.time}</Text>
                </View>
              </View>
             
            </View>
          </View>
        </Animated.View>
      </TouchableOpacity>
    );
  };


return(
<>
        {Data.opened.map((item, index) => renderItems(item, index))}
</>
);
}

Answer 1

Change this:

<Animated.View
  style={[
    styles.itemContainer,
    {
      height: cardHeight,
    },
  ]
>
{...}
</Animated.View>

by

<Animated.View
  style={[
    styles.itemContainer,
    {
      height: currentIndex === index ? cardHeight : 140,
    },
  ]
>
{...}
</Animated.View>

If you want to be more efficient, the default height of your card, define it in a constant (ex: const = DEFAULT_CARD_HEIGHT = 140) and use this constant wherever you use 140 as card height