The dot indicator does not change, and the next button goes to 2nd screen

[Bilal-Abdeen]

Thank you for the excellent library.

I have a strange issue! The dot indicator does not change when the user moves between screens, it always shows the 1st dot indicator as the active one! Moreover, the next button always goes to the 2nd screen in the array. Last, the pageIndexCallback does not return anything!

<Onboarding
    pages={[
        {
            backgroundColor: "red",
            image: <Image source={require("../../images/manager.jpg")} />,
            title: "screen 1",
            subtitle: "screen 1",
        },
        {
            backgroundColor: "red",
            image: <Image source={require("../../images/invite.jpg")} />,
            title: "screen 2",
            subtitle: "screen 2",
        },
        {
            backgroundColor: "red",
            image: <Image source={require("../../images/apply.jpg")} />,
            title: "screen 3",
            subtitle: "screen 3",
        },
    ]}
    pageIndexCallback={(pageIndex) => console.log("pageIndex:", pageIndex, )} // does NOT work!?
/>)}

[Bilal-Abdeen]

I found the solution. <Onboarding /> was inside <SafeAreaView></SafeAreaView>. When I removed the surrounding <SafeAreaView>, everything worked just fine! If this is the intended behaviour, I think the documentation should mention that <Onboarding /> should NOT be enclosed in a <SafeAreaView>.

[VVVi]

This problem appears for Android, and was fixed by adding flatlistProps={{ viewabilityConfig: undefined }} to <Onboarding />.