Base dark theme implementation

app/_layout.tsx

@@ -2,6 +2,11 @@ import { checkUserSession } from "@/redux/user/user.actions";
 import { selectBodyshop, selectCurrentUser } from "@/redux/user/user.selectors";
 import { ApolloProvider } from "@apollo/client";
 import MaterialIcons from "@expo/vector-icons/MaterialIcons";
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
 import { Stack } from "expo-router";
 import {
   Icon,
@@ -9,7 +14,7 @@ import {
   NativeTabs,
   VectorIcon,
 } from "expo-router/unstable-native-tabs";
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { ActivityIndicator, Platform, View } from "react-native";
 import { Provider as PaperProvider } from "react-native-paper";
@@ -17,45 +22,55 @@ import { connect, Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 import { createStructuredSelector } from "reselect";
 import { client } from "../graphql/client";
+import { useTheme as usePaperTheme } from "../hooks/useTheme";
 import { persistor, store } from "../redux/store";
 import "../translations/i18n";
-import theme from "../util/theme";
 
 function AuthenticatedLayout() {
   const { t } = useTranslation();
+  const paperTheme = usePaperTheme();
   return (
-    <NativeTabs minimizeBehavior="onScrollDown" disableTransparentOnScrollEdge>
-      <NativeTabs.Trigger name="jobs">
-        <Label>{t("joblist.labels.activejobs")}</Label>
+    <ThemeProvider
+      value={paperTheme.theme === "dark" ? DarkTheme : DefaultTheme}
+    >
+      <NativeTabs
+        minimizeBehavior="onScrollDown"
+        disableTransparentOnScrollEdge
+      >
+        <NativeTabs.Trigger name="jobs">
+          <Label>{t("joblist.labels.activejobs")}</Label>
 
-        {Platform.select({
-          ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
-          android: (
-            <Icon
-              src={<VectorIcon family={MaterialIcons} name="checklist" />}
-            />
-          ),
-        })}
-      </NativeTabs.Trigger>
-      <NativeTabs.Trigger name="settings">
-        {Platform.select({
-          ios: <Icon sf="gear" drawable="custom_android_drawable" />,
-          android: (
-            <Icon src={<VectorIcon family={MaterialIcons} name="settings" />} />
-          ),
-        })}
-        <Label>{t("settings.titles.settings")}</Label>
-      </NativeTabs.Trigger>
-      <NativeTabs.Trigger name="search" role="search">
-        {Platform.select({
-          //ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
-          android: (
-            <Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
-          ),
-        })}
-        <Label>Search</Label>
-      </NativeTabs.Trigger>
-    </NativeTabs>
+          {Platform.select({
+            ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
+            android: (
+              <Icon
+                src={<VectorIcon family={MaterialIcons} name="checklist" />}
+              />
+            ),
+          })}
+        </NativeTabs.Trigger>
+        <NativeTabs.Trigger name="settings">
+          {Platform.select({
+            ios: <Icon sf="gear" drawable="custom_android_drawable" />,
+            android: (
+              <Icon
+                src={<VectorIcon family={MaterialIcons} name="settings" />}
+              />
+            ),
+          })}
+          <Label>{t("settings.titles.settings")}</Label>
+        </NativeTabs.Trigger>
+        <NativeTabs.Trigger name="search" role="search">
+          {Platform.select({
+            //ios: <Icon sf="checklist" drawable="custom_android_drawable" />,
+            android: (
+              <Icon src={<VectorIcon family={MaterialIcons} name="search" />} />
+            ),
+          })}
+          <Label>Search</Label>
+        </NativeTabs.Trigger>
+      </NativeTabs>
+    </ThemeProvider>
   );
 }
 
@@ -79,21 +94,38 @@ const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   currentUser: selectCurrentUser,
 });
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch: any) => ({
   checkUserSession: () => dispatch(checkUserSession()),
 });
-function AppContent({ currentUser, checkUserSession, bodyshop }) {
+function AppContent({ currentUser, checkUserSession, bodyshop }: any) {
   useEffect(() => {
     checkUserSession();
-  }, []);
+  }, [checkUserSession]);
 
   if (currentUser.authorized === null) {
-    return <LoadingLayout />;
+    return (
+      <ThemedLayout>
+        <LoadingLayout />
+      </ThemedLayout>
+    );
   }
   if (currentUser.authorized) {
-    return <AuthenticatedLayout />;
+    return (
+      <ThemedLayout>
+        <AuthenticatedLayout />
+      </ThemedLayout>
+    );
   }
-  return <UnauthenticatedLayout />;
+  return (
+    <ThemedLayout>
+      <UnauthenticatedLayout />
+    </ThemedLayout>
+  );
+}
+
+function ThemedLayout({ children }: { children: React.ReactNode }) {
+  const themeToApply = usePaperTheme();
+  return <PaperProvider theme={themeToApply}>{children}</PaperProvider>;
 }
 const ConnectedAppContent = connect(
   mapStateToProps,
@@ -105,9 +137,7 @@ export default function AppLayout() {
     <Provider store={store}>
       <PersistGate persistor={persistor}>
         <ApolloProvider client={client}>
-          <PaperProvider theme={theme}>
-            <ConnectedAppContent />
-          </PaperProvider>
+          <ConnectedAppContent />
         </ApolloProvider>
       </PersistGate>
     </Provider>