Creating recovery password change password screen

src/app/screens/PasswordRecoveryChangePswdScreen.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { StyleSheet, View, Text } from "react-native";
+import * as Yup from "yup";
+
+import { Form, SubmitButton } from "../components/forms";
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import PasswordFormField from "../components/forms/PasswordFormField";
+
+const validationSchema = Yup.object().shape({
+  password: Yup.string()
+    .required("A senha é obrigatória")
+    .min(8, "Senha muito curta, minimo 8 caracteres")
+    .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
+  confirmPassword: Yup.string()
+    .required("A senha é obrigatória")
+    .min(8, "Senha muito curta, minimo 8 caracteres")
+    .matches(/[a-zA-Z]/, "A senha só pode conter letras"),
+});
+
+export default function PasswordRecoveryChangePswd() {
+  const comparePassword = (password, confirmPassword) => {
+    return password !== confirmPassword;
+  };
+
+  return (
+    <View>
+      <Form
+        validationSchema={validationSchema}
+        initialValues={{
+          password: "",
+          confirmPassword: "",
+        }}
+        onSubmit={(form, actions) => {
+          const psw_match = comparePassword(
+            form.password,
+            form.confirmPassword
+          );
+          if (psw_match) {
+            actions.setFieldError(
+              "confirmPassword",
+              "As senhas não correspondem"
+            );
+          }
+          console.log("redefinir senha -> atualizar senha -> confirmar");
+        }}
+      >
+        <View style={{ padding: 16 }}>
+          <Text style={styles.textHeader}>Redefenir sua senha</Text>
+          <Text style={styles.textSubtitle}>
+            Digite uma nova senha nos campos abaixo para redefini-la
+          </Text>
+        </View>
+
+        <View>
+          <Text style={styles.labelStyle}>Nova senha*:</Text>
+          <PasswordFormField
+            maxLength={20}
+            name="password"
+            placeholder="Digite a nova senha"
+          />
+        </View>
+
+        <View style={{ marginVertical: 24 }}>
+          <Text style={styles.labelStyle}>Confirmar a senha</Text>
+          <PasswordFormField
+            maxLength={20}
+            name="confirmPassword"
+            placeholder="Digite novamente a senha"
+          />
+        </View>
+
+        <SubmitButton title="confirmar" backgroundColor={colors.primary} />
+      </Form>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  labelStyle: {
+    fontSize: dimensions.text.secondary,
+    fontWeight: "bold",
+    textAlign: "left",
+    color: colors.secondary,
+    marginBottom: 14,
+    paddingHorizontal: 16,
+  },
+  textHeader: {
+    textAlign: "center",
+    fontWeight: "bold",
+    fontSize: 22,
+  },
+  textSubtitle: {
+    textAlign: "center",
+    fontSize: dimensions.text.secondary,
+    marginVertical: 22,
+  },
+});