add tabs (prototype)

app/(tabs)/_layout.tsx

@@ -0,0 +1,56 @@
+import {Tabs} from 'expo-router';
+import React from "react";
+import {FontAwesome} from "@expo/vector-icons";
+import {useTheme} from "@/src/context/ThemeProvider";
+import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
+
+export default function TabLayout() {
+    const theme = useTheme();
+    return (
+        <AuthenticatedWrapper>
+            <Tabs
+                screenOptions={{
+                    headerStyle: {
+                        backgroundColor: theme.theme.colors.primaryContainer,
+                    },
+                    headerTitleStyle: {
+                        color: theme.theme.colors.onPrimaryContainer,
+                    },
+                    headerTitleContainerStyle: {
+                        paddingHorizontal: 16,
+                    },
+                    tabBarActiveTintColor: theme.theme.colors.primary,
+                    tabBarInactiveTintColor: theme.theme.colors.onSurfaceVariant,
+                    tabBarStyle: {
+                        backgroundColor: theme.theme.colors.surface,
+                        borderTopColor: theme.theme.colors.outline,
+                        elevation: 4,
+                    },
+                }}
+            >
+                <Tabs.Screen
+                    name={'modes/text'}
+                    options={{
+                        title: 'Text',
+                        tabBarIcon: ({color}) => <FontAwesome size={28} name="file-text" color={color}/>,
+                    }}
+                />
+                <Tabs.Screen
+                    name="index"
+                    options={{
+                        title: 'Home',
+                        tabBarIcon: ({color}) => <FontAwesome size={28} name="home" color={color}/>,
+                    }}
+                />
+                <Tabs.Screen
+                    name="settings"
+                    options={{
+                        title: 'Settings',
+                        tabBarIcon: ({color}) => <FontAwesome size={28} name="cog" color={color}/>,
+                    }}
+                />
+            </Tabs>
+        </AuthenticatedWrapper>
+
+    );
+}

app/(tabs)/index.tsx

@@ -0,0 +1,24 @@
+import ThemedButton from "@/src/components/themed/ThemedButton";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
+import {useAuth} from "@/src/context/AuthProvider";
+import {useRouter} from "expo-router";
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+
+export default function HomeScreen() {
+    const {logout} = useAuth();
+    const router = useRouter();
+    return (
+        <ThemedBackground>
+            <ThemedHeader>Welcome to the Home Page!</ThemedHeader>
+            <ThemedButton mode={"outlined"} onPress={() => {
+                console.log("Button pressed");
+                logout();
+                router.replace("/login");
+            }
+            }>
+                Logout
+            </ThemedButton>
+        </ThemedBackground>
+
+    );
+}

app/(tabs)/modes/text.tsx

@@ -0,0 +1,14 @@
+import ThemedHeader from "@/src/components/themed/ThemedHeader";
+import ThemedBackground from "@/src/components/themed/ThemedBackground";
+
+export default function TextScreen() {
+    return (
+        <ThemedBackground>
+            <ThemedHeader>
+                Text Mode
+            </ThemedHeader>
+        </ThemedBackground>
+    );
+}
+
+

app/(tabs)/settings.tsx

@@ -0,0 +1 @@
+

app/_layout.tsx

@@ -3,18 +3,14 @@ import React from "react";
 
 import {AuthProvider} from "@/src/context/AuthProvider";
 import {ThemeProvider} from "@/src/context/ThemeProvider";
-import {Stack} from "expo-router";
+import CustomStack from "@/src/core/Stack";
 
 
 export default function Layout() {
     return (
         <ThemeProvider>
             <AuthProvider>
-                <Stack
+                <CustomStack />
-                    screenOptions={{
-                        headerShown: false
-                    }}
-                />
             </AuthProvider>
         </ThemeProvider>
     );

app/index.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-
-import {useRouter} from "expo-router";
-
-import ThemedBackground from "../src/components/themed/ThemedBackground";
-import Logo from "../src/components/Logo";
-import ThemedHeader from "../src/components/themed/ThemedHeader";
-import ThemedParagraph from "../src/components/themed/ThemedParagraph";
-import ThemedButton from "../src/components/themed/ThemedButton";
-
-import {useAuth} from "@/src/context/AuthProvider";
-import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
-
-export default function HomeScreen() {
-    const router = useRouter();
-    const {token, logout} = useAuth();
-
-    return (
-        <AuthenticatedWrapper>
-            <ThemedBackground>
-                <Logo/>
-                <ThemedHeader>Welcome 💫</ThemedHeader>
-                <ThemedParagraph>Congratulations you are logged in.</ThemedParagraph>
-                <ThemedParagraph>{token}</ThemedParagraph>
-                <ThemedButton
-                    mode="outlined"
-                    onPress={() => router.push("/protected")}>
-                    OwO what's this?
-                </ThemedButton>
-
-                <ThemedButton
-                    mode="outlined"
-                    onPress={async () => {
-                        await logout();
-                        router.replace("/login");
-                    }
-                    }
-                >
-                    Sign out
-                </ThemedButton>
-            </ThemedBackground>
-        </AuthenticatedWrapper>
-    );
-}

app/protected/index.tsx

@@ -1,35 +0,0 @@
-import React from "react";
-import {useAuth} from "@/src/context/AuthProvider";
-import Logo from "@/src/components/Logo";
-import ThemedHeader from "@/src/components/themed/ThemedHeader";
-import ThemedParagraph from "@/src/components/themed/ThemedParagraph";
-import ThemedButton from "../../src/components/themed/ThemedButton";
-import ThemedBackground from "@/src/components/themed/ThemedBackground";
-import {useRouter} from "expo-router";
-import AuthenticatedWrapper from "@/src/components/AuthenticatedWrapper";
-
-export default function ProtectedScreen(): JSX.Element {
-    const router = useRouter();
-    const {token, logout} = useAuth();
-
-    return (
-        <AuthenticatedWrapper>
-            <ThemedBackground>
-                <Logo/>
-                <ThemedHeader>Welcome 💫</ThemedHeader>
-                <ThemedParagraph>Dies ist geheim. PSST !</ThemedParagraph>
-                <ThemedParagraph>{token}</ThemedParagraph>
-                <ThemedButton
-                    mode="outlined"
-                    onPress={async () => {
-                        await logout();
-                        router.replace("/login");
-                    }
-                    }
-                >
-                    Sign out
-                </ThemedButton>
-            </ThemedBackground>
-        </AuthenticatedWrapper>
-    );
-}

package-lock.json

@@ -41,7 +41,6 @@
         "@babel/core": "^7.26.0",
         "@types/jest": "^29.5.14",
         "@types/react": "~18.3.12",
-        "@types/react-native-vector-icons": "^6.4.18",
         "@types/react-test-renderer": "^18.3.0",
         "compression": "^1.7.5",
         "eslint-config-expo": "~8.0.1",
@@ -5027,27 +5026,6 @@
         "csstype": "^3.0.2"
       }
     },
-    "node_modules/@types/react-native": {
-      "version": "0.70.19",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.70.19.tgz",
-      "integrity": "sha512-c6WbyCgWTBgKKMESj/8b4w+zWcZSsCforson7UdXtXMecG3MxCinYi6ihhrHVPyUrVzORsvEzK8zg32z4pK6Sg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
-    "node_modules/@types/react-native-vector-icons": {
-      "version": "6.4.18",
-      "resolved": "https://registry.npmjs.org/@types/react-native-vector-icons/-/react-native-vector-icons-6.4.18.tgz",
-      "integrity": "sha512-YGlNWb+k5laTBHd7+uZowB9DpIK3SXUneZqAiKQaj1jnJCZM0x71GDim5JCTMi4IFkhc9m8H/Gm28T5BjyivUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*",
-        "@types/react-native": "^0.70"
-      }
-    },
     "node_modules/@types/react-test-renderer": {
       "version": "18.3.0",
       "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-18.3.0.tgz",

src/components/AuthenticatedWrapper.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import {useAuth} from "@/src/context/AuthProvider";
-import {Redirect} from "expo-router";
+import NotAuthenticated from "@/src/components/NotAuthenticated";
 
 const AuthenticatedWrapper: React.FC<{ children: React.ReactNode }> = ({children}) => {
     const {isAuthenticated} = useAuth();
 
     if (!isAuthenticated) {
-        return <Redirect href={"/login"}/>;
+        return <NotAuthenticated />;
+       // return <Redirect href={"/login"}/>;
     }
 
     return <>{children}</>;

src/components/themed/ThemedHeader.tsx

@@ -1,14 +1,12 @@
 import React from "react";
 import {StyleSheet} from "react-native";
 import {Text} from "react-native-paper";
-import {useTheme} from "@/src/context/ThemeProvider";
 
 type Props = {
     children: React.ReactNode;
 }
 
 export default function ThemedHeader(props: Props) {
-    const {theme} = useTheme();
     return <Text style={styles.header} {...props} />;
 }
 

src/core/Stack.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import {Stack} from "expo-router";
+
+
+export default function CustomStack() {
+    return (
+        <Stack
+            screenOptions={{
+                headerShown: false,
+            }}>
+        </Stack>
+    );
+}