index.js

import "react-native-gesture-handler";
import { GestureHandlerRootView } from "react-native-gesture-handler";
import { registerRootComponent } from "expo";
import React, { useState, useEffect } from "react";
import { AppState, Appearance } from "react-native";
import { retrieveItem } from "./app/config/utils";
import { ThemeContext } from "./app/theme-context";
import { KeyboardProvider } from "react-native-keyboard-controller";
import { Provider } from "react-redux";
import {
  NavigationContainer,
  createNavigationContainerRef,
} from "@react-navigation/native";
import {
  clearLastScreen,
  loadRestoreState,
  saveLastScreen,
} from "./app/utils/lastScreen";
import { dark, standard } from "./app/utils/themes";
import { StatusBar } from "expo-status-bar";
import store from "./app/store";
import { login } from "./app/actions";
import * as SplashScreen from "expo-splash-screen";
import * as ScreenOrientation from "expo-screen-orientation";
import { AppWrapper } from "./app/components";
import MapNavigator from "./app/config/router";
import * as Sentry from "@sentry/react-native";
import * as Device from "expo-device";
import {
  KEY_THEME,
  THEME_DARK,
  THEME_DARK_SETTING_VALUE,
  THEME_DEFAULT_VALUE,
  THEME_LIGHT,
  THEME_LIGHT_SETTING_VALUE,
  THEME_SYSTEM_SETTING_VALUE,
} from "./app/utils/constants";

Sentry.init({
  dsn: "https://057bae9b04f2410db6e4f1bd8d3eff2c@o1352308.ingest.sentry.io/6633526",
  debug: false,
});

SplashScreen.preventAutoHideAsync();

SplashScreen.setOptions({
  duration: 1000,
  fade: true,
});

const navigationRef = createNavigationContainerRef();

const App = () => {
  const calculateTheme = (themePreference) => {
    switch (themePreference ?? THEME_DEFAULT_VALUE) {
      case THEME_DARK_SETTING_VALUE:
        return THEME_DARK;
      case THEME_LIGHT_SETTING_VALUE:
        return THEME_LIGHT;
      case THEME_SYSTEM_SETTING_VALUE:
      default:
        return Appearance.getColorScheme() === THEME_DARK
          ? THEME_DARK
          : THEME_LIGHT;
    }
  };

  // The actual theme, such as "dark" or ""
  const [selectedTheme, setSelectedTheme] = useState(
    calculateTheme(THEME_DEFAULT_VALUE),
  );
  const [restoreReady, setRestoreReady] = useState(false);
  const [initialNavState, setInitialNavState] = useState();

  useEffect(() => {
    loadRestoreState().then(async (state) => {
      // Map only logs in after its GPS fix, but a restored stack mounts
      // LocationDetails/MachineDetails right away and they read loggedIn on
      // mount - so hydrate auth before the navigator renders.
      if (state) {
        const auth = await retrieveItem("auth");
        if (auth?.id) store.dispatch(login(auth));
      }
      setInitialNavState(state);
      setRestoreReady(true);
    });

    // The OS only kills us while backgrounded, so snapshot on the way out.
    // Clear on return so a warm resume never leaves a stale snapshot behind.
    const appStateListener = AppState.addEventListener("change", (next) => {
      if (next === "background" && navigationRef.isReady()) {
        saveLastScreen(navigationRef.getRootState());
      } else if (next === "active") {
        clearLastScreen();
      }
    });
    return () => appStateListener.remove();
  }, []);

  useEffect(() => {
    retrieveItem(KEY_THEME).then((theme) => {
      setThemePreference(theme);
    });

    async function lockOrientation() {
      if (Device.deviceType.TABLET) {
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.ALL,
        );
      } else {
        await ScreenOrientation.lockAsync(
          ScreenOrientation.OrientationLock.PORTRAIT_UP,
        );
      }
    }

    async function prepare() {
      await SplashScreen.preventAutoHideAsync();
    }

    const appearanceListener = Appearance.addChangeListener(
      ({ colorScheme }) => {
        retrieveItem(KEY_THEME).then((selectedThemePreference) => {
          // Update theme only if "system" preference is selected
          if (
            (selectedThemePreference ?? THEME_DEFAULT_VALUE) ===
            THEME_SYSTEM_SETTING_VALUE
          ) {
            setSelectedTheme(
              colorScheme === THEME_DARK ? THEME_DARK : THEME_LIGHT,
            );
          }
        });
      },
    );

    lockOrientation();
    prepare();

    // Cleanup the listener when the component is unmounted
    return () => {
      appearanceListener.remove();
    };
  }, []);

  const setThemePreference = (newThemePreference) => {
    setSelectedTheme(calculateTheme(newThemePreference));
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <ThemeContext.Provider
        value={{
          setThemePreference,
          theme: selectedTheme === "dark" ? dark : standard,
        }}
      >
        <KeyboardProvider>
          <Provider store={store}>
            <AppWrapper>
              {restoreReady && (
                <NavigationContainer
                  ref={navigationRef}
                  initialState={initialNavState}
                  navigationInChildEnabled
                  theme={selectedTheme === "dark" ? dark : standard}
                >
                  <MapNavigator />
                </NavigationContainer>
              )}
            </AppWrapper>
          </Provider>
          <StatusBar
            style={selectedTheme === "dark" ? "light" : "dark"}
            translucent={true}
          />
        </KeyboardProvider>
      </ThemeContext.Provider>
    </GestureHandlerRootView>
  );
};

export default registerRootComponent(App);