onSlideChange is fired twice on state change with initial index

[pgrepds]

I want to call goToSlide using a ref to the AppIntroSlider and I want to save the current index in a state. Consider the following example.

const [index, setIndex] = useState(0)
const ref = useRef(null)

function onSlide(idx) {
    setIndex(idx)
}

function MyCustomButton(props) {
    return <Button title="Next" onPress={() => ref.current.gotToSlide(index + 1, true)} />
}

return (
    <AppIntroSlider<ScreenItem>
           ref={ref}
           onSlideChange={onSlide}
           renderNextButton={() => <MyCustomButton />}
           renderItem={(...) => ...}
)

If I press MyCustomButton, then onSlide is called with the correct index 1. The setIndex causes a rerender and it seems that the onSlideChange function is called again with the old initial index 0.

Is there a way to make this setup work or is this behavior by design?

Version: 4.0.4

[theafolayan]

I am facing the exact Issue... Anyone able to solve this?

[wicfasho]

You do not need to create a custom index state.

Follow this example: https://github.com/Jacse/react-native-app-intro-slider/issues/224#issuecomment-1367099899