Dingdong_app/navigation/GuideStackNavigator.js

import {
    createStackNavigator,
    CardStyleInterpolators,
} from "@react-navigation/stack";
import * as React from "react";
import { useModel } from "flooks";

import Guide1Screen from "../screens/Guide1Screen";
import Guide2Screen from "../screens/Guide2Screen";
import Guide3Screen from "../screens/Guide3Screen";
import Guide4Screen from "../screens/Guide4Screen";
import StoreAudit from "../screens/StoreAudit";

const GuideStack = createStackNavigator();

const config = {
    animation: "spring",
    config: {
        stiffness: 1000,
        damping: 500,
        mass: 3,
        overshootClamping: true,
        restDisplacementThreshold: 0.01,
        restSpeedThreshold: 0.01,
    },
};

export default function GuideStackNavigator() {
    const { guideStep } = useModel("userModel");
    const initial = React.useMemo(() => {
        if (guideStep == 0) {
            return "Guide1";
        } else if (guideStep == 1) {
            return "Guide2";
        } else if (guideStep == 2) {
            return "Guide3";
        } else if (guideStep == 3) {
            return "Guide4";
        } else if (guideStep == 4) {
            return "StoreAudit";
        } else {
            return "Guide1";
        }
    }, [guideStep]);

    return (
        <GuideStack.Navigator
            headerMode='none'
            screenOptions={{
                gestureEnabled: true,
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
            }}
            initialRouteName={initial}
        >
            <GuideStack.Screen name='Guide1' component={Guide1Screen} />
            <GuideStack.Screen name='Guide2' component={Guide2Screen} />
            <GuideStack.Screen name='Guide3' component={Guide3Screen} />
            <GuideStack.Screen name='Guide4' component={Guide4Screen} />
            <GuideStack.Screen name='StoreAudit' component={StoreAudit} />
        </GuideStack.Navigator>
    );
}