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

parveenkumar
March 24, 2023
162 views
0 votes
2 Answers

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.

Answers

- burak
- April 4, 2023 at 12:46 am
- 0 votes
0
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!
Login or Signup to reply.