I have three cards which needs to be shown individually in the same screen. I am currently hiding 2 of them when 1 is shown which depends on the card that I need to show. I set their states(hidden or shown) by a click of a button. The idea is to simulate navigation from the first card component to the third card component with 'go back' and 'next' buttons. On the third card, there will be no 'go back' button but I still need to be able to go back to the second one by the back function of the phone.

Is there a way to implement this using react-navigation?

This is my code:

function Screen (){
     const [card1, setCard1] = useState(true)
     const [card2, setCard2] = useState(false)
     const [card3, setCard3] = useState(false)

     const first = () =>{
        setCard1(true)
        setCard2(false)
        setCard3(false)
     }
     const second = () =>{
        setCard1(false
        setCard2(true)
        setCard3(false)
     }
     const third = () =>{
        setCard1(false)
        setCard2(false)
        setCard3(true)
     }

    return(
        <View>
            {card1 && 
            <FirstCard>
               <Button title="Next" onPress={second}/>
            </FirstCard>
            }
            {card2 && 
            <SecondCard>
               <Button title="Cancel" onPress={first}
               <Button title="Next" onPress={second}/>
            </SecondCard>
            }
            {card3 && 
            <ThirdCard>
               <Button title="Submit" onPress={console.log("submitted")}/>
            </ThirdCard>
            }
        </View>
    )
}

CodePudding user response：

You can do that with a flatlist in horizontal mode.

CodePudding user response：

I have optimise the logic of implementation and handle Back button.

import { BackHandler } from "react-native";

function Screen() {

  /* 1 for Card1 , 2 for Card2 and 3 for Card3 */
  const [cardType, setCardType] = useState(1);

  const backAction = () => {
    // condition is true when It is showing card 2 or card 3 on back press
    if (cardType > 1) {
      setCardType(cardType - 1);
      return true;
    }
    // let the default thing happen
    return false;
  };

  useEffect(() => {
    BackHandler.addEventListener("hardwareBackPress", backAction);

    return () =>
      BackHandler.removeEventListener("hardwareBackPress", backAction);
  }, []);

  const first = () => {
    setCardType(1);
  };
  const second = () => {
    setCardType(2);
  };
  const third = () => {
    setCardType(3);
  };

  return (
    <View>
      {cardType === 1 && (
        <FirstCard>
          <Button title="Next" onPress={second} />
        </FirstCard>
      )}
      {cardType === 2 && (
        <SecondCard>
          <Button title="Cancel" onPress={first} />
          <Button title="Next" onPress={second} />
        </SecondCard>
      )}
      {cardType === 3 && (
        <ThirdCard>
          <Button title="Submit" onPress={console.log("submitted")} />
        </ThirdCard>
      )}
    </View>
  );
}