I'm working on a new react native app and there's going to be a lot of things in the app that are a sequence of screens that I want to show one after the other in a specific order. To control this, I'd like to make a hook that provides a way of declaring my sequence of screens, and then being able to move forward or backward one at a time. So you could use it something like this:
const screenSeq = useScreenSeq(Screen1, Screen2, Screen3);const Screen = screenSeq.currReact.useEffect() => { screenSeq.start(someProps);}, []);return (<View><Button onclick={() => screenSeq.next(newProps)}>Next</Button><Button onclick={() => screenSeq.prev(newProps)}>Prev</Button><Screen />;</View>);And then when you click the buttons, it cycles through the screens. I've got something that looks kinda like this:
export default (...screens) => { let [index, setIndex] = React.useState(0); let [props, setProps] = React.useState([]); return { start: (props) => setProps(props), curr: () => screens[index](props), next: (props) => { if (index < screens.length-1) { setIndex(index + 1); setProps(props); } }, prev: (props) => { if (index > 0) { setIndex(index - 1); setProps(props); } } }}So you initialize your starting props using the start function, and then call next or prev with the props for the respective screen.
At the moment, the first time I click the Next button, it goes to the next screen successfully, but then after that it won't continue. When I inspect what's going on, the index is constantly getting reset back to 0 and just incremented back to 1, so it always stays on the second screen. Anyone might know what's going on? Can anyone point out what my mistake is to get it to increment and decrement successfully on every button click?