Browse Source

[not finished] Implementing some components of the registration screen

master
GabrielTrettel 3 years ago
parent
commit
8575c74faa
  1. 303
      src/app/screens/RegisterScreen.js

303
src/app/screens/RegisterScreen.js

@ -8,10 +8,18 @@ import React, { useState } from "react";
import { StyleSheet, View, Text, TouchableNativeFeedback } from "react-native";
import Screen from "../components/Screen";
import { dimensions } from "../config/dimensions";
import {
FontAwesome5,
FontAwesome,
MaterialCommunityIcons,
} from "@expo/vector-icons";
import colors from "../config/colors";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
import assets from "../config/assets";
import * as Yup from "yup";
import FormDatePicker from "../components/forms/FormDatePicker";
import moment from "moment";
import { Shadow } from "react-native-shadow-2";
import SearchablePicker from "../components/SearchablePicker";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@ -32,9 +40,96 @@ const validationSchema = Yup.object().shape({
.required("A senha é obrigatória")
.min(8, "Senha muito curta, minimo 8 caracteres")
.matches(/[a-zA-Z]/, "A senha só pode conter letras"),
state: Yup.string().required("O estado é obrigatório"),
});
function LocalDatePicker({ date, setDate, _moment }) {
const formatDate = () => date.format("DD/MM/YYYY");
return (
<View flex={1}>
<FormDatePicker
onDateChange={(value) => setDate(value)}
minimumDate={new Date(moment().subtract(110, "year"))}
date={date}
>
<View style={[styles.dateInput, { flex: 1, marginRight: 12 }]}>
<Shadow
offset={[0, 4]}
distance={4}
radius={4}
startColor="rgba(0, 0, 0, 0.25)"
paintInside={true}
viewStyle={{ width: "100%", height: 42 }}
>
<View
style={{
paddingLeft: 8,
backgroundColor: colors.white,
height: 42,
borderColor: colors.grayBG,
borderWidth: 1,
borderRadius: 5,
flexDirection: "row",
alignItems: "center",
}}
>
<Text
style={{
color: colors.medium,
fontSize: 18,
}}
>
{date != _moment
? formatDate()
: "Selecione a data de nascimento"}
</Text>
</View>
</Shadow>
</View>
</FormDatePicker>
</View>
);
}
function GenderPicker({ value, setValue }) {
const [items, setItems] = useState([
{ value: "Feminino", label: "Feminino" },
{ value: "Masculino", label: "Masculino" },
{ value: "Prefiro não dizer", label: "Prefiro não dizer" },
]);
return (
<SearchablePicker
value={value}
setValue={setValue}
items={items}
setItems={setItems}
formPlaceholder={"Selecione o seu gênero"}
searchPlaceholder={"Busca..."}
/>
);
}
function StatePicker({ value, setValue }) {
const [items, setItems] = useState([{value: "a", label: "a"}]);
return (
<SearchablePicker
value={value}
setValue={setValue}
items={items}
setItems={setItems}
formPlaceholder={"Selecione o seu estado"}
searchPlaceholder={"Busca..."}
/>
);
}
export default function RegisterScreen(props) {
const [gender, setGender] = useState("");
const [state, setState] = useState("")
const _moment = moment();
const [date, setDate] = useState(_moment);
const [singUpFailed, setSingUpFailed] = useState(false);
const comparePassword = (password, confirmPassword) => {
@ -53,6 +148,8 @@ export default function RegisterScreen(props) {
number: "",
password: "",
confirmPassword: "",
state: "",
gender: "",
}}
onSubmit={({ name, number, password, confirmPassword }) => {
comparePassword(password, confirmPassword);
@ -61,78 +158,133 @@ export default function RegisterScreen(props) {
validationSchema={validationSchema}
>
<View
style={{ flex: 1, flexDirection: "column", justifyContent: "center" }}
style={{ flexDirection: "column", justifyContent: "center", flex: 1 }}
>
<View style={{ flex: 1, justifyContent: "flex-end" }}>
<assets.AppLogoTitle
preserveAspectRatio="xMidYMid meet"
width={300}
height={30}
alignSelf="center"
marginBottom={dimensions.spacing.big_padding}
<KeyboardAwareScrollView scrollEnabled={true}>
<Text style={styles.labelStyle}>Apelido de usuário*</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="account"
size={25}
color={colors.primary}
/>
<FormField
flex={1}
maxLength={12}
name="name"
numberOfLines={2}
placeholder="Nome Completo"
/>
</View>
<Text style={styles.labelStyle}>Número do telefone:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="phone"
size={24}
color={colors.primary}
/>
<FormField
flex={1}
maxLength={12}
name="number"
numberOfLines={2}
placeholder="Número de telefone celular"
/>
</View>
<Text style={styles.labelStyle}>Senha:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="lock"
size={25}
color={colors.primary}
/>
<FormField
flex={1}
maxLength={12}
name="password"
secureTextEntry={true}
numberOfLines={2}
placeholder="Senha"
/>
</View>
<Text style={styles.labelStyle}>Confirmar senha:*</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="lock"
size={25}
color={colors.primary}
/>
<FormField
flex={1}
maxLength={12}
name="confirmPassword"
secureTextEntry={true}
numberOfLines={2}
placeholder="Repetir a senha"
/>
</View>
<ErrorMessage
error="As senhas não correspondem"
visible={singUpFailed}
/>
</View>
<View style={{ flex: 6 }}>
<KeyboardAwareScrollView scrollEnabled={true}>
<View>
<Text style={styles.labelStyle}> Nome Completo: </Text>
<FormField
maxLength={12}
name="name"
numberOfLines={1}
placeholder="Nome Completo"
/>
</View>
<View>
<Text style={styles.labelStyle}> Número do telefone: </Text>
<FormField
maxLength={12}
name="number"
numberOfLines={1}
placeholder="Número de telefone celular"
/>
</View>
<View>
<Text style={styles.labelStyle}> Senha: </Text>
<FormField
maxLength={12}
name="password"
numberOfLines={1}
placeholder="Senha"
/>
</View>
<View>
<Text style={styles.labelStyle}> Confirmar senha: </Text>
<FormField
maxLength={12}
name="confirmPassword"
numberOfLines={1}
placeholder="Repetir a senha"
/>
</View>
<ErrorMessage
error="As senhas não correspondem"
visible={singUpFailed}
<Text style={styles.labelStyle}>Data de nascimento</Text>
<View style={styles.iconField}>
<MaterialCommunityIcons
name="calendar-today"
size={30}
color={colors.primary}
/>
<LocalDatePicker
date={date}
setDate={setDate}
_moment={_moment}
/>
</View>
<SubmitButton
title="cadastrar"
backgroundColor={colors.primary}
marginTop={10}
<Text style={styles.labelStyle}>Gênero:</Text>
<View style={[styles.iconField]}>
<MaterialCommunityIcons
name="account"
size={25}
color={colors.primary}
/>
<GenderPicker value={gender} setValue={setGender} />
</View>
<TouchableNativeFeedback
onPress={() => {
props.navigation.goBack();
}}
>
<View style={{ flexDirection: "row", alignSelf: "center" }}>
<Text> tem uma conta? </Text>
<Text style={{ color: colors.lightBlue }}>Faça Login</Text>
</View>
</TouchableNativeFeedback>
</KeyboardAwareScrollView>
</View>
<Text style={styles.labelStyle}>Estado*:</Text>
<View style={[styles.iconField]}>
<MaterialCommunityIcons
name="map-marker"
size={25}
color={colors.primary}
/>
<StatePicker value={state} setValue={setState} />
</View>
<SubmitButton
title="cadastrar"
backgroundColor={colors.primary}
marginTop={10}
/>
<TouchableNativeFeedback
onPress={() => {
props.navigation.goBack();
}}
>
<View style={{ flexDirection: "row", alignSelf: "center" }}>
<Text> tem uma conta? </Text>
<Text style={{ color: colors.lightBlue }}>Faça Login</Text>
</View>
</TouchableNativeFeedback>
</KeyboardAwareScrollView>
</View>
</Form>
</Screen>
@ -144,13 +296,26 @@ const styles = StyleSheet.create({
flex: 1,
justifyContent: "center",
textAlign: "center",
padding: 10,
paddingHorizontal: 10,
},
labelStyle: {
fontSize: dimensions.text.secondary,
fontWeight: "bold",
textAlign: "left",
color: colors.lightBlue,
color: colors.secondary,
marginTop: 10,
},
iconField: {
width: "100%",
flex: 1,
alignItems: "center",
flexDirection: "row",
marginTop: 12,
marginBottom: 24,
},
dateInput: {
paddingLeft: 12,
// flexDirection: "column",
// justifyContent: "center",
},
});
Loading…
Cancel
Save