learning/ignitegym
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add state to sign up screen

Browse source
This commit is contained in:
Vinicius Souza 2024-10-28 11:24:14 -03:00
parent c6048fcd72
commit da533abd86
1 changed files with 69 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

122
src/screens/SignUp.tsx
View file

@ -1,73 +1,89 @@
import { Center, Heading, Image, ScrollView, Text, VStack } from "@gluestack-ui/themed"; import { useState } from 'react';
import { useNavigation } from "@react-navigation/native"; import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
import { useNavigation } from '@react-navigation/native';
import BackgroundImg from '@assets/background.png'; import BackgroundImg from '@assets/background.png';
import Logo from '@assets/logo.svg'; import Logo from '@assets/logo.svg';
import { Input } from "@components/Input";
import { Button } from "@components/Button"; import { AuthNavigatorRoutesProps } from '@routes/auth.routes';
import { AuthNavigatorRoutesProps } from "@routes/auth.routes";
import { Input } from '@components/Input';
import { Button } from '@components/Button';
export function SignUp() { export function SignUp() {
const navigation = useNavigation<AuthNavigatorRoutesProps>(); const navigation = useNavigation<AuthNavigatorRoutesProps>();
const handleLogin = () => { const [name, setName] = useState('');
navigation.navigate('SignIn'); const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
function handleSignUp() {
console.debug({
name,
email,
password,
confirmPassword,
});
} }
const handleGoBack = () => {
navigation.navigate('SignIn');
};
return ( return (
<ScrollView <ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
contentContainerStyle={{ flexGrow: 1 }} <VStack flex={1}>
showsVerticalScrollIndicator={false} <Image
> source={BackgroundImg}
<VStack flex={1}> defaultSource={BackgroundImg}
<Image alt="Pessoas treinando"
source={BackgroundImg} position="absolute"
defaultSource={BackgroundImg} w="$full"
alt="Pessoas treinando" h={624}
position="absolute" />
w="$full"
h={624}
/>
<VStack flex={1} px="$10" pb="$16"> <VStack flex={1} px="$10" pb="$16">
<Center my="$24"> <Center my="$24">
<Logo /> <Logo />
<Text fontSize="$sm" color="$gray100"> <Text fontSize="$sm" color="$gray100">
Treine a sua mente e o seu corpo Treine a sua mente e o seu corpo
</Text> </Text>
</Center> </Center>
<Center gap="$2" flex={1}> <Center gap="$2" flex={1}>
<Heading color="$gray100"> <Heading color="$gray100">Crie sua a conta</Heading>
Crie sua a conta
</Heading>
<Input <Input placeholder="Nome" autoCorrect={false} onChangeText={setName} />
placeholder="Nome"
autoCorrect={false}
/>
<Input <Input
placeholder="E-mail" placeholder="E-mail"
keyboardType="email-address" keyboardType="email-address"
autoCapitalize="none" autoCapitalize="none"
autoCorrect={false} autoCorrect={false}
/> onChangeText={setEmail}
/>
<Input <Input
placeholder="Senha" placeholder="Senha"
autoCapitalize="none" autoCapitalize="none"
secureTextEntry secureTextEntry
/> onChangeText={setPassword}
/>
<Button <Input
title="Criar e acessar" placeholder="Confirme a senha"
/> autoCapitalize="none"
</Center> secureTextEntry
onChangeText={setConfirmPassword}
/>
<Button title="Voltar para o login" mt="$12" variant="outline" onPress={handleLogin} /> <Button title="Criar e acessar" onPress={handleSignUp} />
</Center>
<Button title="Voltar para o login" mt="$12" variant="outline" onPress={handleGoBack} />
</VStack>
</VStack> </VStack>
</VStack>
</ScrollView> </ScrollView>
) );
} }