eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

home nav

This commit is contained in:
Maria Sanchez 2022-08-16 14:27:34 -06:00
parent 235e3f7bc9
commit dcb77ae10e
3 changed files with 59 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mobile-ui/App.js
View File

@ -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>

69
mobile-ui/components/Home.js
View File

@ -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 safeAreaTop bg="#D7A86E" />
<HStack bg="#D7A86E" px="2" py="4" justifyContent="space-between" alignItems="center" w="100%" maxW="100%">
<HStack alignItems="center">
<IconButton icon={<Icon size="sm" as={MaterialIcons} name="menu" color="white" />} />
<Text color="white" fontSize="20" fontWeight="bold">
Home
</Text>
<Box flex={1} bg="white" safeAreaTop width="100%" maxW="300px" alignSelf="center">
<Center flex={1}></Center>
<HStack bg="indigo.600" alignItems="center" safeAreaBottom shadow={6}>
<Pressable opacity={selected === 0 ? 1 : 0.5} py="3" flex={1} onPress={() => setSelected(0)}>
<Center>
<Icon mb="1" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="white" size="sm" />
<Text color="white" fontSize="12">
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>
<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>
</Box>
)
);
}

15
mobile-ui/components/LogIn.js
View File

@ -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>
);