Basic routing implementation.

app/_layout.tsx

@@ -1,24 +1,31 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
+import { ApolloProvider } from "@apollo/client";
+import { Icon, Label, NativeTabs } from "expo-router/unstable-native-tabs";
+import { useTranslation } from "react-i18next";
+import { Provider } from "react-redux";
+import { PersistGate } from "redux-persist/integration/react";
+import { client } from "../graphql/client";
+import { persistor, store } from "../redux/store";
+import "../translations/i18n";
 
-import { useColorScheme } from '@/hooks/use-color-scheme';
-
-export const unstable_settings = {
-  anchor: '(tabs)',
-};
-
-export default function RootLayout() {
-  const colorScheme = useColorScheme();
+export default function TabLayout() {
+  const { t } = useTranslation();
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-      <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen name="modal" options={{ presentation: 'modal', title: 'Modal' }} />
-      </Stack>
-      <StatusBar style="auto" />
-    </ThemeProvider>
+    <Provider store={store}>
+      <PersistGate persistor={persistor}>
+        <ApolloProvider client={client}>
+          <NativeTabs>
+            <NativeTabs.Trigger name="jobs">
+              <Label>{t("joblist.labels.activejobs")}</Label>
+              <Icon sf="checklist" drawable="custom_android_drawable" />
+            </NativeTabs.Trigger>
+            <NativeTabs.Trigger name="settings">
+              <Icon sf="gear" drawable="custom_settings_drawable" />
+              <Label>{t("settings.titles.settings")}</Label>
+            </NativeTabs.Trigger>
+          </NativeTabs>
+        </ApolloProvider>
+      </PersistGate>
+    </Provider>
   );
 }