diff --git a/src/app/components/forms/CheckBox.js b/src/app/components/forms/CheckBox.js
new file mode 100644
index 0000000..43f375e
--- /dev/null
+++ b/src/app/components/forms/CheckBox.js
@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from "react";
+import { CheckBox, View, Text } from "react-native";
+import { useFormikContext } from "formik";
+import colors from "../../config/colors";
+import { TouchableOpacity } from "react-native-gesture-handler";
+import ErrorMessage from "./ErrorMessage";
+import { dimensions } from "../../config/dimensions";
+
+const Checkbox = ({ name, children, navigate, ...props }) => {
+ const { setFieldValue, errors, touched } = useFormikContext();
+ const [toggleCheckBox, setToggleCheckBox] = useState(false);
+
+ useEffect(() => {
+ setFieldValue(name, toggleCheckBox, true);
+ }, [toggleCheckBox]);
+
+ return (
+
+
+
+ setToggleCheckBox(newValue)}
+ type={"checkbox"}
+ tintColors={{ true: colors.primary }}
+ onCheckColor={colors.primary}
+ {...props}
+ />
+
+
+ {
+ setToggleCheckBox(!toggleCheckBox);
+ }}
+ >
+ Li e estou de acordo com os{" "}
+
+
+
+ navigate()}>
+ Termos de uso e condições
+
+
+
+ );
+};
+
+export default Checkbox;
diff --git a/src/app/navigation/AuthNavigator.js b/src/app/navigation/AuthNavigator.js
index edcdb7b..99f2a2d 100644
--- a/src/app/navigation/AuthNavigator.js
+++ b/src/app/navigation/AuthNavigator.js
@@ -3,6 +3,7 @@ import { createStackNavigator } from "@react-navigation/stack";
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import colors from "../config/colors";
+import UserAgreement from "../screens/UserAgreement";
const Stack = createStackNavigator();
@@ -18,6 +19,11 @@ const AuthNavigator = () => (
component={RegisterScreen}
options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
/>
+
);
diff --git a/src/app/screens/RegisterScreen.js b/src/app/screens/RegisterScreen.js
index ecff241..c04301a 100644
--- a/src/app/screens/RegisterScreen.js
+++ b/src/app/screens/RegisterScreen.js
@@ -18,6 +18,8 @@ import { Shadow } from "react-native-shadow-2";
import SearchablePicker from "../components/SearchablePicker";
import { states, statesToCities } from "../assets/cities_states";
import { useFormikContext } from "formik";
+import Checkbox from "../components/forms/CheckBox";
+import { TouchableOpacity } from "react-native-gesture-handler";
const phoneRegex = RegExp(
/^\(?[\(]?([0-9]{2})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -25,7 +27,7 @@ const phoneRegex = RegExp(
const validationSchema = Yup.object().shape({
name: Yup.string()
- .required("O nome é obrigatória")
+ .required("O nome é obrigatório")
.matches(/[a-zA-Z]/, "O nome e só pode conter letras"),
number: Yup.string()
.matches(phoneRegex, "Número inválido")
@@ -39,10 +41,13 @@ const validationSchema = Yup.object().shape({
.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"),
+ city: Yup.string().required("A cidade é obrigatória"),
institutionName: Yup.string(),
+ secQuestion: Yup.string().required("Escolha a pergunta de segurança"),
secQuestionAns: Yup.string()
.required("A resposta da pergunta de segurança é obrigatória")
.max(255),
+ consent: Yup.bool().equals([true], "Este campo é obrigatório"),
});
function LocalDatePicker({ date, setDate, _moment }) {
@@ -176,7 +181,6 @@ function SecQuestionPicker({ name }) {
{ value: "d", label: "Qual o nome da rua em que você cresceu?" },
{ value: "f", label: "Qual o nome do seu bicho de estimação predileto?" },
{ value: "g", label: "Qual a sua comida predileta?" },
- { value: "h", label: "Qual cidade você nasceu?" },
{ value: "j", label: "Qual é o seu país preferido?" },
{ value: "k", label: "Qual é a sua marca de carro predileto?" },
]);
@@ -193,6 +197,17 @@ function SecQuestionPicker({ name }) {
);
}
+function MaterialCommunityIconsCustom({
+ name,
+ color = colors.primary,
+ size = 25,
+}) {
+ return (
+
+
+
+ );
+}
export default function RegisterScreen(props) {
const _moment = moment();
const [date, setDate] = useState(_moment);
@@ -216,12 +231,13 @@ export default function RegisterScreen(props) {
confirmPassword: "",
gender: "",
institutionName: "",
- secQuestionAns: "",
gender: "",
state: "",
city: "",
institution: "",
secQuestion: "",
+ secQuestionAns: "",
+ consent: false,
}}
onSubmit={(form) => {
comparePassword(form.password, form.confirmPassword);
@@ -234,14 +250,20 @@ export default function RegisterScreen(props) {
style={{ flexDirection: "column", justifyContent: "center", flex: 1 }}
>
+
+ Cadastro do usuário
+
Apelido de usuário*
-
-
+
-
Número do telefone:*
-
+
-
Senha:*
-
+
-
Confirmar senha:*
-
+
-
Data de nascimento:
-
+
-
Gênero:
-
+
Estado*:
-
+
Cidade*:
-
+
Tipo de instituição:
-
+
Nome da instituição
-
-
+
-
Pergunta de segurança*:
-
Resposta*:
+ Termos de uso*
+
+ props.navigation.navigate("UserAgreement")}/>
+
+
-
{
props.navigation.goBack();
}}
>
-
+
Já tem uma conta?
Faça Login
@@ -441,12 +429,10 @@ const styles = StyleSheet.create({
fontWeight: "bold",
textAlign: "left",
color: colors.secondary,
- marginTop: 10,
},
iconField: {
width: "100%",
flex: 1,
- alignItems: "center",
flexDirection: "row",
marginTop: 12,
marginBottom: 24,
diff --git a/src/app/screens/UserAgreement.js b/src/app/screens/UserAgreement.js
new file mode 100644
index 0000000..dcfb5ed
--- /dev/null
+++ b/src/app/screens/UserAgreement.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { View, Text } from "react-native";
+
+export default function UserAgreement(props) {
+ return (
+
+ tela Termos de uso
+
+ );
+}