Finishing user register screen

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 (
+    <View>
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+      >
+        <View width={35}>
+        <CheckBox
+          value={toggleCheckBox}
+          onValueChange={(newValue) => setToggleCheckBox(newValue)}
+          type={"checkbox"}
+          tintColors={{ true: colors.primary }}
+          onCheckColor={colors.primary}
+          {...props}
+        />
+          </View>
+
+        <TouchableOpacity
+          onPress={() => {
+            setToggleCheckBox(!toggleCheckBox);
+          }}
+        >
+          <Text
+            style={{
+              fontSize: dimensions.text.default,
+              color: colors.medium,
+            }}
+          >Li e estou de acordo com os{" "}</Text>
+        </TouchableOpacity>
+      </View>
+
+      <TouchableOpacity onPress={() => navigate()}>
+        <Text
+          style={{
+            marginLeft: 35,
+            color: colors.lightBlue,
+            fontSize: dimensions.text.default,
+          }}
+        >Termos de uso e condições</Text>
+      </TouchableOpacity>
+      <ErrorMessage error={errors[name]} visible={touched[name]} />
+    </View>
+  );
+};
+
+export default Checkbox;

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} }}
     />
+    <Stack.Screen
+      name="UserAgreement"
+      component={UserAgreement}
+      options={{ headerTitle: "" }} //headerStyle: {backgroundColor: colors.primary} }}
+    />
   </Stack.Navigator>
 );
 

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 (
+    <View justifyContent={"center"} height={48}>
+      <MaterialCommunityIcons name={name} size={size} color={color} />
+    </View>
+  );
+}
 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 }}
         >
           <KeyboardAwareScrollView scrollEnabled={true}>
+            <Text
+              style={{
+                color: colors.primary,
+                fontSize: 20,
+                fontWeight: "bold",
+                alignSelf: "center",
+                marginVertical: 24,
+              }}
+            >
+              Cadastro do usuário
+            </Text>
             <Text style={styles.labelStyle}>Apelido de usuário*</Text>
-
             <View style={styles.iconField}>
-              <MaterialCommunityIcons
-                name="account"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="account" />
               <FormField
                 paddingRight={2}
                 flex={1}
@@ -251,14 +273,9 @@ export default function RegisterScreen(props) {
                 placeholder="Nome Completo"
               />
             </View>
-
             <Text style={styles.labelStyle}>Número do telefone:*</Text>
             <View style={styles.iconField}>
-              <MaterialCommunityIcons
-                name="phone"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="phone" />
               <FormField
                 flex={1}
                 maxLength={12}
@@ -268,14 +285,9 @@ export default function RegisterScreen(props) {
                 paddingRight={2}
               />
             </View>
-
             <Text style={styles.labelStyle}>Senha:*</Text>
             <View style={styles.iconField}>
-              <MaterialCommunityIcons
-                name="lock"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="lock" />
               <FormField
                 flex={1}
                 maxLength={12}
@@ -286,14 +298,9 @@ export default function RegisterScreen(props) {
                 paddingRight={2}
               />
             </View>
-
             <Text style={styles.labelStyle}>Confirmar senha:*</Text>
             <View style={styles.iconField}>
-              <MaterialCommunityIcons
-                name="lock"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="lock" />
               <FormField
                 flex={1}
                 maxLength={12}
@@ -308,69 +315,42 @@ export default function RegisterScreen(props) {
               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={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="calendar-today" />
               <LocalDatePicker
                 date={date}
                 setDate={setDate}
                 _moment={_moment}
               />
             </View>
-
             <Text style={styles.labelStyle}>Gênero:</Text>
             <View style={[styles.iconField]}>
-              <MaterialCommunityIcons
-                name="account"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="account" />
               <GenderPicker name="gender" />
             </View>
 
             <Text style={styles.labelStyle}>Estado*:</Text>
             <View style={[styles.iconField]}>
-              <MaterialCommunityIcons
-                name="map-marker"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="map-marker" />
               <StatePicker name="state" />
             </View>
 
             <Text style={styles.labelStyle}>Cidade*:</Text>
             <View style={[styles.iconField]}>
-              <MaterialCommunityIcons
-                name="map-marker"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="map-marker" />
               <CityPicker name={"city"} />
             </View>
 
             <Text style={styles.labelStyle}>Tipo de instituição:</Text>
             <View style={[styles.iconField]}>
-              <MaterialCommunityIcons
-                name="bank"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="bank" />
               <InstitutionPicker name="institution" />
             </View>
 
             <Text style={styles.labelStyle}>Nome da instituição</Text>
-
             <View style={styles.iconField}>
-              <MaterialCommunityIcons
-                name="bank"
-                size={25}
-                color={colors.primary}
-              />
+              <MaterialCommunityIconsCustom name="bank" />
               <FormField
                 flex={1}
                 maxLength={12}
@@ -380,7 +360,6 @@ export default function RegisterScreen(props) {
                 paddingRight={2}
               />
             </View>
-
             <Text style={styles.labelStyle}>Pergunta de segurança*:</Text>
             <View
               style={{
@@ -391,7 +370,6 @@ export default function RegisterScreen(props) {
             >
               <SecQuestionPicker name="secQuestion" />
             </View>
-
             <Text style={styles.labelStyle}>Resposta*:</Text>
             <View style={styles.iconField}>
               <FormField
@@ -405,19 +383,29 @@ export default function RegisterScreen(props) {
               />
             </View>
 
+            <Text style={styles.labelStyle}>Termos de uso*</Text>
+            <View flexDirection="column" alignItems={"flex-start"} marginBottom={24} marginTop={12}>
+              <Checkbox name={"consent"} navigate={() => props.navigation.navigate("UserAgreement")}/>
+            </View>
+
             <SubmitButton
               flex={1}
               title="cadastrar"
               backgroundColor={colors.primary}
-              marginTop={10}
             />
-
             <TouchableNativeFeedback
               onPress={() => {
                 props.navigation.goBack();
               }}
             >
-              <View style={{ flexDirection: "row", alignSelf: "center" }}>
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignSelf: "center",
+                  paddingBottom: 34,
+                  marginTop: 6,
+                }}
+              >
                 <Text>Já tem uma conta? </Text>
                 <Text style={{ color: colors.lightBlue }}>Faça Login</Text>
               </View>
@@ -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,

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 (
+    <View>
+      <Text>tela Termos de uso</Text>
+    </View>
+  );
+}