react native deck swiper library

465 Views Asked by At

enter image description here

I'm trying to change the layout of the images which are showing below I want to show them on the top I just want to change the layout of the images which are showing below I want to show them above the first card

export default function App({navigation}) {
  const [index, setIndex] = React.useState(0);
  const onSwiped = () => {
    transitionRef.current.animateNextTransition();
    setIndex((index + 1) % data.length);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View
        style={{
          backgroundColor: 'black',
          opacity: 0.05,
          transform: [{rotate: '45deg'}, {scale: 1.6}],
          position: 'absolute',
          left: -15,
          top: 30,
        }}></View>
      <View style={styles.swiperContainer}>
        <Swiper
          ref={swiperRef}
          cards={data}
          cardIndex={index}
          renderCard={card => <Card card={card} />}
          infinite
          backgroundColor={'transparent'}
          onSwiped={onSwiped}
          onTapCard={() => swiperRef.current.swipeLeft()}
          cardVerticalMargin={50}
          stackSize={stackSize}
          animateCardOpacity={true}
          stackScale={8}
          stackSize={3}
          verticalSwipe={false}
          stackSeparation={13}
          animateOverlayLabelsOpacity
          animateCardOpacity
          disableTopSwipe
          disableBottomSwipe
        />
      </View>
    </SafeAreaView>
  );
}

2

There are 2 best solutions below

1
Alireza Hadjar On

Change this in your styles: top: 30 => top: -30

1
Abhijith On

Use stackseparation. stackSeparation={-20}