feat: setup app navigation and tabs

This commit is contained in:
imsophis
2026-05-22 18:13:22 -06:00
parent 34dbfd051b
commit 44cfca0eeb
7 changed files with 133 additions and 11 deletions

View File

@@ -1,15 +1,64 @@
import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
import { useColorScheme } from 'react-native';
import { Tabs } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { AnimatedSplashOverlay } from '@/components/animated-icon';
import AppTabs from '@/components/app-tabs';
export default function TabLayout() {
const colorScheme = useColorScheme();
export default function Layout() {
return (
<ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
<AnimatedSplashOverlay />
<AppTabs />
</ThemeProvider>
<Tabs
screenOptions={{
headerShown: false,
tabBarActiveTintColor: "#0E8A61",
tabBarInactiveTintColor: "#9CA3AF",
tabBarStyle: {
height: 70,
paddingBottom: 10,
paddingTop: 10,
backgroundColor: "#FFFFFF",
borderTopWidth: 0,
elevation: 8,
},
}}
>
<Tabs.Screen
name="index"
options={{
title: "Inicio",
tabBarIcon: ({ color, size }) => (
<Ionicons name="home-outline" size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="alerts"
options={{
title: "Alertas",
tabBarIcon: ({ color, size }) => (
<Ionicons name="notifications-outline" size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="guide"
options={{
title: "Guía",
tabBarIcon: ({ color, size }) => (
<Ionicons name="leaf-outline" size={size} color={color} />
),
}}
/>
<Tabs.Screen
name="profile"
options={{
title: "Perfil",
tabBarIcon: ({ color, size }) => (
<Ionicons name="person-outline" size={size} color={color} />
),
}}
/>
</Tabs>
);
}

View File

@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
export default function AlertsScreen() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Alertas</Text>
</View>
);
}

View File

@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
export default function GuideScreen() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Guía</Text>
</View>
);
}

View File

@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
export default function HomeScreen() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Inicio</Text>
</View>
);
}

View File

@@ -0,0 +1,15 @@
import { View, Text } from "react-native";
export default function ProfileScreen() {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Text>Perfil</Text>
</View>
);
}