Possible to change card content dependent on swipe?

[AndresTIY]

I'm using this deck swiper as a way to answer questions. So the swiping actions correspond with answers such as "yes, no, maybe".

Now if the user answers with a no or maybe, then I want the next card to show different content rather than the next question.

So if the question is "Do you like deck swiper?" and I answer "maybe", then I want the next card to show "Maybe? Deck swiper is awesome!"

I attempted several things.. Attempt 1: Changing questions array with State

Expected Behavior: Changing local state triggers a re-render. I expect the Swiper component to re-render with the new card items when the state is changed.

const Example = () => {
  const [currentQuestions, setCurrentQuestions] = useState([]);

  const onSwipeLeft = () => {
    // answering NO
    setCurrentQuestions(['Maybe? Deck swiper is awesome!']);
  };

  useEffect(() => {
    setCurrentQuestions([
      'Do you like Deck Swiper?',
      'Do you like bike rides?',
      'Do you like dogs?',
    ]);
  }, []);

  const swiperRef = createRef();

  return (
    <Swiper
      ref={swiperRef}
      cards={currentQuestions}
      onSwipedLeft={onSwipeLeft}
    />
  );
};

Actual Behavior: The next card item is empty. The swiper is not updating sadly.

---

Attempt 2: Updating the card index

Expected Behavior: The docs mention updating the cardIndex in order to force a re-render using redux or any other state management. Figured I could manipulate the data array to contain questions and responses.

const Example = () => {
  const [customIndex, setCustomIndex] = useState(0);

  const onSwipeLeft = () => {
    setCustomIndex(customIndex + 1);
  };

  const onSwipeRight = () => {
    setCustomIndex(customIndex + 3);
  };

  const onSwipeUp = () => {
    setCustomIndex(customIndex + 2);
  };

  const cardArray = [
    'Do you like Deck Swiper ?',
    'No? Keep trying!',
    'Maybe? Deck swiper is awesome!',
    'Do you like bike rides?',
    'No? Cool',
    'Maybe?, Keep trying!',
    'Do you like dogs?',
    'No? Whaaaaaaaaaat',
    'Maybe? Borrow my dog',
  ];

  const swiperRef = createRef();

  return (
    <Swiper
      ref={swiperRef}
      cards={cardArray}
      onSwipedLeft={onSwipeLeft}
      onSwipedRight={onSwipeRight}
      onSwipedTop={onSwipeUp}
      cardIndex={customIndex}
    />
  );
};

Actual Behavior: Nothing changes. If I initially set the cardIndex to any other number than 0, then that indexed item will display. Otherwise, changing the cardIndex creates no changes

---

Any recommendations on this situation?

Thanks!

[harrymash2006]

same issue happening for me! Please help if anyone has the solution. using react-native: 0.61.4

[AndresTIY]

React Native 0.61.2 here! Attempt 3: Updating card index using redux Expected Behavior: Docs mention using redux or any other state management to update the card index. Expected the redux change to force a re-render.

//action.js
export const setCardIndex = index => ({ type: SET_CARD_INDEX, cardIndex: index)}

//reducer.js
const reducer = ( state = initialState, action) => {
    switch(action.type){
  case SET_CARD_INDEX: {
    return  {
        ...state,
        cardIndex: action.cardIndex,
    }
  }
}
// swipe component js
const Screen = () => {

  const { cardIndex = 0 } = useSelector(state => state.reducer)

  const onSwipedRight = () => {
    dispatch(setCardIndex(cardIndex + 3))
  }

  return <Swiper cardIndex={cardIndex} {... rest of the stuff} />
}

Actual Behavior: Nothing changes