How to change the card when clicking on button

[harika-zazz]

Hi, i am using this module, it's working fine. But how to change the card when clicking on the button. I've no. of questions when user can select the option and click on next button it goes to next question without swiping. How can i achieve this? Thanks in advance. Here is my code

  const deckRef = useRef()
  const [cardIndex, setCardIndex] = useState(0)
 function onChangeCardIndex() {
    setCardIndex(cardIndex + 1)
  }
  <Swiper
                ref={deckRef}
                cards={questionsArr}
                renderCard={(card) => (
                    <Question card={card} onSelectedItem={onSelectedItem} selectedAns={selectedAns} />
                )
                }
                onSwiped={(index) => onChangeCardIndex(index)}
                cardIndex={cardIndex}
                backgroundColor={'white'}
                stackSize={3}
            >

            </Swiper>

 <Button
                    onPress={() => { onChangeCardIndex(cardIndex) }}
                    title="Next Question">
                    Next Question
                </Button>

[Kawaljeet-AUI]

@harika-zazz - Were you able to get pass through this scenario? If yes, can you kindly share how.

[sadraEdrisaraki]

Hello, I've been able to delegate the work of swiping next/previous by using swipeLeft(), swipeRight() & swipeBack() on a ref

Here is my code snippet, hope this is gonna help

`const SwiperComponent = () => {

const swiperRef = React.useRef<Swiper<Person>>(null);
const [swiping, setSwiping] = React.useState<boolean>(false);

const renderCard: SwiperProps<Person>['renderCard'] = (cardData, cardIndex) => {
    return <Card {...cardData} />;
  };

const onSwipeRight = () => {
    if(!swiping){
      setSwiping(true)
      swiperRef.current?.swipeRight();
    }
  }

  const onSwipeLeft = () => {
    if(!swiping){
      setSwiping(true)
      swiperRef.current?.swipeLeft();
    }
  }

  const onUndoSwipe = () => {
    if(!swiping){
      setSwiping(true)
      swiperRef.current?.swipeBack();
    }
  }

return (
  <>
    <Swiper
        ref={swiperRef}
        cards={HomeScreenPics}
        renderCard={renderCard}
        infinite
        backgroundColor="white"
        cardHorizontalMargin={0}
        stackSize={2}
        swipeBackCard={true}
        onSwiped={() => setSwiping(false)}
    />
    <ControlButtons 
        onSwipeLeft={onSwipeLeft}
        onSwipeRight={onSwipeRight}
        onUndoSwipe={onUndoSwipe} />
  </>

)

}`