Dingdong_app/App.js

import * as React from "react";
import * as eva from "@eva-design/eva";
import {
    ApplicationProvider,
    Layout,
    Button,
    IconRegistry,
    Text,
    Modal,
} from "@ui-kitten/components";
import { EvaIconsPack } from "@ui-kitten/eva-icons";
import { default as theme } from "./theme.json"; // <-- Import app theme
import { default as customMapping } from "./mapping.json"; // <-- Import app theme

import { SplashScreen } from "expo";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";
import { NavigationContainer, useNavigation } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Dialog from "./components/Dialog";

import { useModel } from "flooks";
import * as models from "./models";

import BottomTabNavigator from "./navigation/BottomTabNavigator";
import LoginStackNavigator from "./navigation/LoginStackNavigator";
import GuideStackNavigator from "./navigation/GuideStackNavigator";
import HomeStackNavigator from "./navigation/HomeStackNavigator";

import * as ApplyStatus from "./config/ApplyStatus";

const Stack = createStackNavigator();

export default function App(props) {
    const [isLoadingComplete, setLoadingComplete] = React.useState(false);
    const { checkLogin, isLogin, status, guideStep } = useModel("userModel");
    const { getWords } = useModel("wordsModel", true);
    const { getToken } = useModel("httpModel", true);
    // Load any resources or data that we need prior to rendering the app
    React.useEffect(() => {
        async function loadResourcesAndDataAsync() {
            try {
                SplashScreen.preventAutoHide();

                // Load fonts
                await Font.loadAsync({
                    ...Ionicons.font,
                    "space-mono": require("./assets/fonts/SpaceMono-Regular.ttf"),
                });
                getWords();
                await checkLogin();
            } catch (e) {
                // We might want to provide this error information to an error reporting service
                console.warn(e);
            } finally {
                setLoadingComplete(true);
                SplashScreen.hide();
            }
        }

        loadResourcesAndDataAsync();
    }, [props.skipLoadingScreen]);

    const initialRouteName = React.useMemo(() => {
        console.log(isLogin);
        if (isLogin) {
            if (status !== "PASS") {
                return "Guide";
            } else {
                return "Root";
            }
        } else {
            return "Login";
        }
    }, [isLogin, status]);

    if (!isLoadingComplete && !props.skipLoadingScreen) {
        return null;
    } else {
        return (
            <>
                <IconRegistry icons={EvaIconsPack} />
                <ApplicationProvider
                    {...eva}
                    theme={{ ...eva.light, ...theme }}
                    customMapping={customMapping}
                >
                    <Dialog />
                    <Layout style={{ flex: 1 }}>
                        <NavigationContainer>
                            <Stack.Navigator
                                headerMode='none'
                                initialRouteName={initialRouteName}
                            >
                                <Stack.Screen
                                    name='Home'
                                    component={HomeStackNavigator}
                                />
                                <Stack.Screen
                                    name='Root'
                                    component={BottomTabNavigator}
                                />
                                <Stack.Screen
                                    name='Guide'
                                    component={GuideStackNavigator}
                                />
                                <Stack.Screen
                                    name='Login'
                                    component={LoginStackNavigator}
                                />
                            </Stack.Navigator>
                        </NavigationContainer>
                    </Layout>
                </ApplicationProvider>
            </>
        );
    }
}

const container = {
    flex: 1,
    backgroundColor: "#fff",
};