home nav

mobile-ui/App.js

@@ -18,7 +18,7 @@ export default function App() {
       <Stack.Navigator initialRouteName="LogIn">
         <Stack.Screen name="Inicio" component={LogIn} />
         <Stack.Screen name="Home" component={Home} />
-       <Stack.Screen name="Password" component={RecoverPassword} />
+        <Stack.Screen name="Password" component={RecoverPassword} />
       </Stack.Navigator>
     </NavigationContainer>
       

mobile-ui/components/Home.js

@@ -1,35 +1,60 @@
-import React from "react";
+import React from 'react';
 import {
     Text,
     HStack,
-    IconButton,
     Box,
-    StatusBar,
     Icon, 
     MaterialIcons,
-    Center
+    Center, 
+    Pressable
   } from "native-base";
 
-export default function Home(){
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+
+export default function Home({navigation}){
+
+  const [selected, setSelected] = React.useState(1);
 
     return (
-        <Center width={"100%"} marginTop={"auto"}>
+      
-             <StatusBar bg="#D7A86E" barStyle="light-content" />
+   <Box flex={1} bg="white" safeAreaTop width="100%" maxW="300px" alignSelf="center">
-      <Box safeAreaTop bg="#D7A86E" />
+        <Center flex={1}></Center>
-      <HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
+        <HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
-        <HStack alignItems="center">
+          <Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0)}>
-          <IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
+            <Center>
-          <Text color="white" fontSize="20" fontWeight="bold">
+              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="sm" />
-            Home
+              <Text color="white" fontSize="12">
-          </Text>
+                Inicio
+              </Text>
+            </Center>
+          </Pressable>
+          <Pressable opacity={selected === 1 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(1)}>
+            <Center>
+              <Icon mb="1" as={<MaterialIcons name="search" />} color="white" size="sm" />
+              <Text color="white" fontSize="12">
+                 Comunicados
+              </Text>
+            </Center>
+          </Pressable>
+          <Pressable opacity={selected === 2 ? 1 : 0.6} py="2" flex={1} onPress={() => setSelected(2)}>
+            <Center>
+              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 2 ? 'cart' : 'cart-outline'} />} color="white" size="sm" />
+              <Text color="white" fontSize="12">
+                Reservas
+              </Text>
+            </Center>
+          </Pressable>
+          <Pressable opacity={selected === 3 ? 1 : 0.5} py="2" flex={1} onPress={() => setSelected(3)}>
+            <Center>
+              <Icon mb="1" as={<MaterialCommunityIcons name={selected === 3 ? 'account' : 'account-outline'} />} color="white" size="sm" />
+              <Text color="white" fontSize="12">
+                Perfil
+              </Text>
+            </Center>
+          </Pressable>
         </HStack>
-        <HStack>
+      </Box>
-          <IconButton icon={<Icon as={MaterialIcons} name="favorite" size="sm" color="white" />} />
+   
-          <IconButton icon={<Icon as={MaterialIcons} name="search" size="sm" color="white" />} />
-          <IconButton icon={<Icon as={MaterialIcons} name="more-vert" size="sm" color="white" />} />
-        </HStack>
-      </HStack>
-      </Center>
        
-    )
+    );
 }

mobile-ui/components/LogIn.js

@@ -9,7 +9,8 @@ import {
   FormControl,
   Input,
   Button,
-  Image
+  Image,
+  Container
 } from "native-base";
 import logo from "../assets/logo-katoikia.png";
 import { Entypo } from '@expo/vector-icons'; 
@@ -40,7 +41,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    marginTop: 5
+    margin: 10
+  },
+
+  container: {
+
   }
 })
 
@@ -77,7 +82,8 @@ export default function LogIn({navigation}) {
              Su app de comunidad de confianza
           </Heading>
 
-          <VStack space={3} mt="5">
+<View style={styles.container}>
+  <VStack space={3} mt="5">
             <FormControl>
               <FormControl.Label> Correo Electrónico </FormControl.Label>
 
@@ -114,7 +120,8 @@ export default function LogIn({navigation}) {
               <Text>Continuar</Text>
             </Button>
            
-          </VStack>
+          </VStack></View>
+          
         </Box>
       </Center>
   );