feat: setup navigation structure with Expo Router

2026-07-06 10:53:52 +02:00
parent ea9bbaed04
commit 1b9fd16b9b
7 changed files with 147 additions and 3 deletions
@@ -0,0 +1,41 @@
+import { Tabs } from 'expo-router';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: '#007AFF',
+        tabBarInactiveTintColor: '#8E8E93',
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: 'Buscar',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="search" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="map"
+        options={{
+          title: 'Mapa',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="map" size={size} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="profile"
+        options={{
+          title: 'Perfil',
+          tabBarIcon: ({ color, size }) => (
+            <Ionicons name="person" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}
@@ -0,0 +1,29 @@
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function HomeScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>FarmaFinder</Text>
+      <Text style={styles.subtitle}>Busca medicamentos</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F2F2F7',
+  },
+  title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    color: '#1C1C1E',
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#8E8E93',
+    marginTop: 8,
+  },
+});
@@ -0,0 +1,23 @@
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function MapScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Mapa de Farmacias</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F2F2F7',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1C1C1E',
+  },
+});
@@ -0,0 +1,23 @@
+import { View, Text, StyleSheet } from 'react-native';
+
+export default function ProfileScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Perfil</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F2F2F7',
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    color: '#1C1C1E',
+  },
+});
@@ -0,0 +1,23 @@
+import { Stack } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+const queryClient = new QueryClient();
+
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <QueryClientProvider client={queryClient}>
+        <Stack>
+          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+          <Stack.Screen name="medicine/[id]" options={{ title: 'Medicamento' }} />
+          <Stack.Screen name="pharmacy/[id]" options={{ title: 'Farmacia' }} />
+          <Stack.Screen name="auth/login" options={{ title: 'Iniciar Sesión' }} />
+          <Stack.Screen name="auth/register" options={{ title: 'Registrarse' }} />
+        </Stack>
+        <StatusBar style="auto" />
+      </QueryClientProvider>
+    </GestureHandlerRootView>
+  );
+}