how to swipe Images with button using react-native-deck-swiper?

Question

I want to swipe images with the help of button i have tried but didn't work. i am using react-native-deck-swiper. is there any anyone who know about it.

<Swiper
        ref={swiper => {
          swiper = swiper;
        }}
        containerStyle={{backgroundColor: 'transparent'}}
        onSwiped={() => onSwiped('general')}
        onSwipedLeft={() => onSwiped('left')}
        onSwipedRight={() => onSwiped('right')}
        onSwipedTop={() => onSwiped('top')}
        onSwipedBottom={() => onSwiped('bottom')}
        onTapCard={swipeLeft}
        cards={Cards}
        cardIndex={cardIndex}
        animateCardOpacity
        cardVerticalMargin={240}
        renderCard={renderCard}
        onSwipedAll={onSwipedAllCards}
        stackSize={3}
        showSecondCard={false}
        stackSeparation={15}
        overlayLabels={{
          bottom: {
            title: 'BLEAH',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            },
          },
          left: {
            title: 'NOPE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'flex-end',
                justifyContent: 'flex-start',
                marginTop: 30,
                marginLeft: -30,
              },
            },
          },
          right: {
            title: 'LIKE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'flex-start',
                justifyContent: 'flex-start',
                marginTop: 30,
                marginLeft: 30,
              },
            },
          },
          top: {
            title: 'SUPER LIKE',
            style: {
              label: {
                backgroundColor: 'black',
                borderColor: 'black',
                color: 'white',
                borderWidth: 1,
              },
              wrapper: {
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
              },
            },
          },
        }}
        animateOverlayLabelsOpacity
        swipeBackCard>
        <View style={styles.mysliderBtn}>
          <TouchableOpacity
            style={{
              backgroundColor: 'pink',
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 35,
            }}
            onPress={() => {
              onSwiped('left');
            }}>
            <Entypo name="cross" size={30} color={'#fff'} />
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              backgroundColor: 'green',
              height: 60,
              width: 60,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: 35,
            }}
            onPress={() => {
              onSwiped('right');
            }}>
            <AntDesign name="hearto" size={30} color={'#fff'} />
          </TouchableOpacity>
        </View>
      </Swiper>

i want to slide images left and right on button click.if that is possible. I am currently building a mobile application like tinder using react native, I use react-native-deck-swiper from native base package and I don't find a solution on how to swipe card when then button clicks.

Answer 1

I hope that you already solved this problem but here is the solution.

const swiperRef = useRef(null);

<SwipeCards
    ref={swiperRef}
    cards={deck}
    renderCard={(question) => (
       <Card />
    )}
    onSwipedLeft={handleLeftSwipe}
    onSwipedTop={handleTopSwipe}
    onSwipedRight={handleRightSwipe}
    />

After this setup, you can easily call the swipe functions with:

swiperRef.current.swipeLeft()
swiperRef.current.swipeRight()

This is my first answer at stackoverflow, I hope it helps. Good luck!

Answer 2

When using TypeScript:

  const swiperRef = useRef<Swiper<any>>(null);