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 { useNavigation } from "@react-navigation/native";
import { useState } from 'react';
import { Center, Heading, Image, ScrollView, Text, VStack } from '@gluestack-ui/themed';
import { useNavigation } from '@react-navigation/native';
import BackgroundImg from '@assets/background.png';
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() {
const navigation = useNavigation<AuthNavigatorRoutesProps>();
const handleLogin = () => {
navigation.navigate('SignIn');
const [name, setName] = useState('');
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 (
<ScrollView
contentContainerStyle={{ flexGrow: 1 }}
showsVerticalScrollIndicator={false}
>
<VStack flex={1}>
<Image
source={BackgroundImg}
defaultSource={BackgroundImg}
alt="Pessoas treinando"
position="absolute"
w="$full"
h={624}
/>
<ScrollView contentContainerStyle={{ flexGrow: 1 }} showsVerticalScrollIndicator={false}>
<VStack flex={1}>
<Image
source={BackgroundImg}
defaultSource={BackgroundImg}
alt="Pessoas treinando"
position="absolute"
w="$full"
h={624}
/>
<VStack flex={1} px="$10" pb="$16">
<Center my="$24">
<Logo />
<Text fontSize="$sm" color="$gray100">
Treine a sua mente e o seu corpo
</Text>
</Center>
<VStack flex={1} px="$10" pb="$16">
<Center my="$24">
<Logo />
<Text fontSize="$sm" color="$gray100">
Treine a sua mente e o seu corpo
</Text>
</Center>
<Center gap="$2" flex={1}>
<Heading color="$gray100">
Crie sua a conta
</Heading>
<Center gap="$2" flex={1}>
<Heading color="$gray100">Crie sua a conta</Heading>
<Input
placeholder="Nome"
autoCorrect={false}
/>
<Input placeholder="Nome" autoCorrect={false} onChangeText={setName} />
<Input
placeholder="E-mail"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
/>
<Input
placeholder="E-mail"
keyboardType="email-address"
autoCapitalize="none"
autoCorrect={false}
onChangeText={setEmail}
/>
<Input
placeholder="Senha"
autoCapitalize="none"
secureTextEntry
/>
<Input
placeholder="Senha"
autoCapitalize="none"
secureTextEntry
onChangeText={setPassword}
/>
<Button
title="Criar e acessar"
/>
</Center>
<Input
placeholder="Confirme a senha"
autoCapitalize="none"
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>
</ScrollView>
)
);
}