Tinder-like swiping in React Native

Question

I am trying to optimize my component which will load a set of Cards based on the data it gets from each element of the array, and I want to implement a Tinder-like swiping mechanism. The function works, but after each swipe, the card that is at the top of the stack takes some time to re-render, which results in a blinking effect.

const renderCards = () => {
return Cards.map((item, i) => {
  if (i < currentIndex) return null;
  else if (i == currentIndex) {
    return (
      <Animated.View
        style={{
          position: "absolute",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
        }}
        key={item.id}
      >
        <OtherSlots />
        <PanGestureHandler
          onGestureEvent={swipeLeftRight}
          onHandlerStateChange={swipeLeftRight}
          minDist={80}
        >
          <Animated.View
            style={{
              transform: [{ translateX: translateX }],
            }}
          >
            <Card image={item.imageSource} enabled={true} />
          </Animated.View>
        </PanGestureHandler>
      </Animated.View>
    );
  } else
    return (
      <Animated.View
        style={{
          position: "absolute",
          top: 0,
          bottom: 0,
          left: 0,
          right: 0,
          opacity: i - 1 == currentIndex ? nextCardOpacity : 0,
          transform: [
            {
              scale: nextCardScale,
            },
          ],
        }}
        key={item.id}
      >
        <OtherSlots />

        <Animated.View>
          <Card image={item.imageSource} enabled={false} />
        </Animated.View>
      </Animated.View>
    );
  }).reverse();
};

I'm using the Reanimated library to handle animations. What can I change in my code to optimize performance and minimize load/render times as much as possible.