navigation and more components

This commit is contained in:
Maria Sanchez 2022-08-12 21:56:58 -06:00
parent ec0d604e34
commit 4b08969ebe
4 changed files with 69 additions and 21 deletions

View File

@ -2,7 +2,6 @@ import React from "react";
import {
Text,
HStack,
NativeBaseProvider,
IconButton,
Box,
StatusBar,
@ -14,10 +13,10 @@ import {
export default function Home(){
return (
<Center w="100%">
<Center width={"100%"} marginTop={"auto"}>
<StatusBar bg="#D7A86E" barStyle="light-content" />
<Box safeAreaTop bg="#D7A86E" />
<HStack bg="#6200ee" px="1" py="3" justifyContent="space-between" alignItems="center" w="100%" maxW="350">
<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">

View File

@ -2,22 +2,20 @@ import React from "react";
import {
Text,
Link,
HStack,
View,
Center,
Heading,
Switch,
useColorMode,
NativeBaseProvider,
extendTheme,
VStack,
Box,
FormControl,
Input,
Button,
Image
Image,
TextInput
} from "native-base";
import logo from "../assets/logo-katoikia.png";
import { Entypo } from '@expo/vector-icons';
import { MaterialCommunityIcons } from '@expo/vector-icons';
export default function LogIn({navigation}) {
return (
@ -55,11 +53,19 @@ export default function LogIn({navigation}) {
<VStack space={3} mt="5">
<FormControl>
<FormControl.Label> Correo Electrónico </FormControl.Label>
<Input />
<View>
<Entypo name="email" size={20} color="grey" />
<Input type="text" />
</View>
</FormControl>
<FormControl>
<FormControl.Label> Contraseña </FormControl.Label>
<View>
<MaterialCommunityIcons name="form-textbox-password" size={20} color="grey" />
<Input type="password" />
</View>
<Link
_text={{
fontSize: "xs",
@ -69,7 +75,9 @@ export default function LogIn({navigation}) {
alignSelf="flex-end"
mt="1"
onPress={() => navigation.navigate('Password')}
>
Recuperar contraseña
</Link>
@ -82,7 +90,5 @@ export default function LogIn({navigation}) {
</VStack>
</Box>
</Center>
);
}

View File

View File

@ -1,13 +1,56 @@
import { Center } from "native-base";
import React from "react";
import {
Text,
Link,
Center,
Heading,
VStack,
Box,
FormControl,
Input,
Button
} from "native-base";
export default function RecoverPassword () {
return (
<Center w="100%">
<Box safeArea p="2" py="8" w="90%" maxW="290">
<Heading
size="lg"
fontWeight="600"
color="coolGray.800"
_dark={{
color: "warmGray.50",
}}
>
Recupere su contraseña
</Heading>
<Heading
mt="1"
_dark={{
color: "warmGray.200",
}}
color="coolGray.600"
fontWeight="medium"
size="xs"
>
Se le enviaran las instrucciones al correo electrónico
</Heading>
<Center>
<VStack space={3} mt="5">
<FormControl>
<FormControl.Label> Correo Electrónico</FormControl.Label>
<Input />
</FormControl>
<Button mt="2" colorScheme="primary" onPress={() => navigation.navigate('Home')}
>
<Text>Recuperar contraseña</Text>
</Button>
</VStack>
</Box>
</Center>
)
}