[not finished] Implementing some components of the registration screen

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,52 +158,72 @@ 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}
-            />
-          </View>
-          <View style={{ flex: 6 }}>
           <KeyboardAwareScrollView scrollEnabled={true}>
-              <View>
-                <Text style={styles.labelStyle}> Nome Completo: </Text>
+            <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={1}
+                numberOfLines={2}
                 placeholder="Nome Completo"
               />
             </View>
-              <View>
-                <Text style={styles.labelStyle}> Número do telefone: </Text>
+
+            <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={1}
+                numberOfLines={2}
                 placeholder="Número de telefone celular"
               />
             </View>
-              <View>
-                <Text style={styles.labelStyle}> Senha: </Text>
+
+            <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"
-                  numberOfLines={1}
+                secureTextEntry={true}
+                numberOfLines={2}
                 placeholder="Senha"
               />
             </View>
-              <View>
-                <Text style={styles.labelStyle}> Confirmar senha: </Text>
+
+            <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"
-                  numberOfLines={1}
+                secureTextEntry={true}
+                numberOfLines={2}
                 placeholder="Repetir a senha"
               />
             </View>
@@ -115,6 +232,42 @@ export default function RegisterScreen(props) {
               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>
+
+            <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>
+
+            <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}
@@ -133,7 +286,6 @@ export default function RegisterScreen(props) {
             </TouchableNativeFeedback>
           </KeyboardAwareScrollView>
         </View>
-        </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",
+  },
 });