This repository has been archived on 2026-04-20. You can view files and clone it, but you cannot make any changes to it's state, such as pushing and creating new issues, pull requests or comments.
interaktive-systeme/app/(tabs)/_layout.tsx

68 lines
No EOL
2.3 KiB
TypeScript

import { Tabs } from "expo-router/tabs";
import { StyleSheet } from "react-native";
import { FontAwesome } from "@expo/vector-icons";
import { Redirect } from "expo-router";
import React, { useEffect } from "react";
import { useThemeColor } from "../../hooks/useThemeColor";
import { useAuth } from "../contexts/AuthContext";
export default function Layout() {
// const selectedColor: string = useThemeColor( "tabIconSelected");
// const defaultColor: string = useThemeColor("tabIconDefault");
// const backgroundColor: string = useThemeColor("backgroundColor");
// const tabBarColor: string = useThemeColor("tabBarColor");
const {authState} = useAuth()
useEffect(()=>{
console.log(authState, "in root Layout")
},[authState])
const styles = StyleSheet.create({
sceneContainer: {
backgroundColor: useThemeColor("backgroundColor"),
},
tabBar: {
backgroundColor: useThemeColor("backgroundColor"),
}
});
const screenOptions = {
tabBarActiveTintColor: useThemeColor( "tabIconSelected"),
tabBarInactiveTintColor: useThemeColor("tabIconDefault"),
headerShown: false,
tabBarStyle: styles.tabBar,
}
if(!authState?.authenticated){
return (
<Redirect href={"/"} />)
}
return (
<Tabs sceneContainerStyle={styles.sceneContainer} screenOptions={screenOptions}>
<Tabs.Screen name="budget/index" options={
{
tabBarLabel: "Budget",
tabBarIcon: ({size, color}) => (
<FontAwesome name="money" size={size} color={color}/>),
}
}/>
<Tabs.Screen name="home" options={
{
tabBarLabel: "Home",
tabBarIcon: ({size, color}) => (
<FontAwesome name="home" size={size} color={color}/>),
unmountOnBlur: true
}
}/>
<Tabs.Screen name="stats/index" options={
{
tabBarLabel: "Stats",
tabBarIcon: ({size, color}) => (
<FontAwesome name="bar-chart" size={size} color={color}/>),
}
}/>
</Tabs>
);
}