Closing one popover and opening an other after a certain amount of time

Viewed 345

I am currently trying to make a popover tutorial for an app. My problem is that I need to show a popover and when clicking on the "Next" button, close the current popover and opening an other after some time. When trying to set the new state, the current popover is closing but the next one is not opening. I am using react-native-popover-view. Here is my code:

const Details = props => {

  const [popoverDetails, setPopoverDetails] = useState([
    {
      mainText: 'popover 1',
      textPopover: 'popover 1',
      visible: false,
    },
    {
      mainText: 'popover 2',
      textPopover: 'popover 2',
      visible: false,
    },
    {
      mainText: 'popover 3',
      textPopover: 'popover 3',
      visible: false,
    },
  ]);

  useEffect(() => {
    setTimeout(() => {
      let tmp = [...popoverDetails];
      tmp[0].visible = true;
      setPopoverDetails(tmp);
    }, 1000);
  }, []);

  const nextTuto = i => {
    console.log('i : ', i);
    let tmp = [...popoverDetails];
    tmp[i].visible = false;
    tmp[i + 1].visible = true;

    setPopoverDetails(tmp)
    console.log('tmp : ', tmp);
    console.log('popverdetails : ', popoverDetails);
  };

  return (
    <View style={{flex: 1}}>
      <Text>Ranking page</Text>

      {popoverDetails.map((pD, i) => (
        <Popover
          isVisible={pD.visible}
          onRequestClose={() => {
            let tmp = [...popoverDetails];
            tmp[i].visible = false;
            setPopoverDetails(tmp);
          }}
          from={
            <TouchableOpacity
              onPress={() => {
                setShowPopover1(true);

                let tmp = [...popoverDetails];
                tmp[i].visible = true;
                setPopoverDetails(tmp);
              }}>
              <Text>{pD.mainText}</Text>
            </TouchableOpacity>
          }>
          <Text>{pD.textPopover}</Text>
          <Button onPress={() => nextTuto(i)} title="Next" />
        </Popover>
      ))}
    </View>
  );
};

The tmp and popoverDetails are the same. I also tried putting a setTimeout but it doesn't seem to work. Any suggestions on how to perform this ?

1 Answers

You don't seem to know how to use it for status. Please refer to the official documentation for React status. The solution is as follows.

const nextTuto = i => {
    setPopoverDetails((prevArr) => prevArr.map((v,index) => index === i+1 ? ({...v, visible: true }) : ({...v, visible: false }) )   )
  };
Related