I am using react-native-deck-swiper I tried to apply different props but It didn’t achieve what I wanted, I have attached screenshot of what I basically trying to do

The thing I am trying to achieve

How it looks currently

Code

  const renderItem = item => {
    return (
      <View
        style={[
          // styles.item,
          {
            // marginTop: 50,
            width: 276.87,
            height: 432,
            borderRadius: 12,
            justifyContent: 'center',
            alignItems: 'center',
            alignSelf: 'center',
            // backgroundColor: item.backgroundColor,
            // marginLeft:
            //   item.balancingFactor !== 1 ? -10 * item.balancingFactor : 0,
          },
        ]}>
        {item.id === 1 ? (
          <View style={styles.card1Container}>
            <Image style={styles.cardImg} source={item.image} />
          </View>
        ) : (
          <>
            <Tooltip
              isVisible={cardTooltipVisible && item.id === 2}
              contentStyle={{
                width: 187,
                height: 67,
                alignSelf: 'center',
                padding: 10,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 6,
                marginTop: -40,
              }}
              arrowStyle={{marginTop: -40, height: 20, width: 20}}
              childrenWrapperStyle={{
                width: 276.87,
                height: 416,
                marginTop: -31,
                marginLeft: -10,
                alignItems: 'center',
                justifyContent: 'center',
              }}
              content={
                cardTooltipVisible ? (
                  <Text
                    style={{
                      color: Color.colorGrey1,
                      fontSize: 14,
                      fontFamily: FontFamily.poppinsRegular,
                      textAlign: 'center',
                      justifyContent: 'center',
                    }}>
                    Choose a card from the top of the deck
                  </Text>
                ) : (
                  <Text
                    style={{
                      color: Color.colorGrey1,
                      fontSize: 14,
                      fontFamily: FontFamily.poppinsRegular,
                      textAlign: 'center',
                      justifyContent: 'center',
                    }}>
                    after
                  </Text>
                )
              }
              placement="top"
              onClose={handleCardTooltipClose}>
              <View style={styles.card2Container}>
                <View style={styles.cardTopImagesContainer}>
                  <Image style={styles.cardImg1} source={item.image1} />
                  <Image style={styles.cardImg2} source={item.image2} />
                </View>
                <Text style={styles.cardText}>{item.text}</Text>
                <Image style={styles.cardImg3} source={item.image3} />
                {/* <View style={styles.right}></View> */}
              </View>
            </Tooltip>
          </>
        )}
      </View>
    );
  };





   <Swiper
          cards={data}
          renderCard={renderItem}
          onSwiped={cardIndex => {
            console.log(cardIndex);
          }}
          onSwipedAll={() => {
            console.log('onSwipedAll');
          }}
          cardIndex={0}
          horizontalSwipe={true}
          verticalSwipe={false}
          stackSize={5}
          backgroundColor="transparent"
          stackScale={10} // Adjust stack scale to keep the height of cards same
          stackSeparation={-20} // Adjust to show a bit of the left side of the card behind
          showSecondCard={true}
          cardHorizontalMargin={0}
          animateCardOpacity={true}
          disableBottomSwipe={true}
        />

I basically want the cards at back to show slightly on left side of active card