Adding scroll view to change password screens

src/app/screens/PasswordRecoveryChangePswdScreen.js

@@ -8,6 +8,7 @@ import { dimensions } from "../config/dimensions";
 import PasswordFormField from "../components/forms/PasswordFormField";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { updatePassword } from "../api/auth";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const validationSchema = Yup.object().shape({
   password: Yup.string()
@@ -81,54 +82,56 @@ export default function PasswordRecoveryChangePswd({ navigation, route }) {
         }}
       />
 
-      <Form
-        validationSchema={validationSchema}
-        initialValues={{
-          password: "",
-          confirmPassword: "",
-        }}
-        onSubmit={(form, actions) => {
-          const psw_not_match = comparePassword(
-            form.password,
-            form.confirmPassword
-          );
-          if (psw_not_match) {
-            actions.setFieldError(
-              "confirmPassword",
-              "As senhas não correspondem"
+      <KeyboardAwareScrollView>
+        <Form
+          validationSchema={validationSchema}
+          initialValues={{
+            password: "",
+            confirmPassword: "",
+          }}
+          onSubmit={(form, actions) => {
+            const psw_not_match = comparePassword(
+              form.password,
+              form.confirmPassword
             );
-          } else {
-            handleSubmit(form.password);
-          }
-        }}
-      >
-        <View style={{ padding: 16 }}>
-          <Text style={styles.textHeader}>Redefinir sua senha</Text>
-          <Text style={styles.textSubtitle}>
-            Digite uma nova senha nos campos abaixo para redefini-la
-          </Text>
-        </View>
+            if (psw_not_match) {
+              actions.setFieldError(
+                "confirmPassword",
+                "As senhas não correspondem"
+              );
+            } else {
+              handleSubmit(form.password);
+            }
+          }}
+        >
+          <View style={{ padding: 16 }}>
+            <Text style={styles.textHeader}>Redefinir 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>
+            <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>
+          <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>
+          <SubmitButton title="confirmar" backgroundColor={colors.primary} />
+        </Form>
+      </KeyboardAwareScrollView>
     </View>
   );
 }

src/app/screens/PasswordRecoveryScreen.js

@@ -9,6 +9,7 @@ import PhoneNumberFormField from "../components/forms/PhoneNumberFormField";
 import SearchablePicker from "../components/SearchablePicker";
 import ConfirmationModal from "../components/ConfirmationModal";
 import { loginByUsernamAnswers, existUsername } from "../api/auth";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 function SecQuestionPicker({ name }) {
   const [items, setItems] = useState([
@@ -67,7 +68,6 @@ const validationSchema = Yup.object().shape({
 
 export default function PasswordRecovery({ navigation, route }) {
   const user = route.params.user;
-  console.log(user)
 
   const [showLoading, setShowLoading] = useState(false);
   const [confirmatioModalData, setConfirmatioModalData] = useState({
@@ -78,11 +78,11 @@ export default function PasswordRecovery({ navigation, route }) {
   const handleSubmit = async (number, answer, secQuestion) => {
     setShowLoading(true);
     setTimeout(() => {
-      console.log("to rodando", showLoading)
-      showLoading && setConfirmatioModalData({
-        message: "Validando informações",
-        show: true,
-      });
+      showLoading &&
+        setConfirmatioModalData({
+          message: "Validando informações",
+          show: true,
+        });
     }, 2000);
 
     const userExists = await existUsername(number);
@@ -104,7 +104,6 @@ export default function PasswordRecovery({ navigation, route }) {
 
     switch (apiResponse.status) {
       case 200:
-        console.log("ir pra proxima tela....");
         navigation.navigate("PasswordRecoveryChangePswd", {
           authToken: apiResponse.data,
           username: number,
@@ -142,51 +141,53 @@ export default function PasswordRecovery({ navigation, route }) {
         }
       />
 
-      <Form
-        validationSchema={validationSchema}
-        initialValues={{
-          number: user.username || "",
-          answer: "",
-          secQuestion: "",
-        }}
-        onSubmit={({ number, answer, secQuestion }) => {
-          handleSubmit(number, answer, secQuestion);
-        }}
-      >
-        <View style={{ padding: 16 }}>
-          <Text style={styles.textHeader}>Recuperação de senha</Text>
-          <Text style={styles.textSubtitle}>
-            Responda à pergunta de segurança, isso ajuda a mostrar que essa
-            conta realmente pertence a você
-          </Text>
-        </View>
-
-        <View>
-          <Text style={styles.labelStyle}>Número de telefone*:</Text>
-          <PhoneNumberFormField
-            name="number"
-            maxLength={11}
-            placeholder={"(DDD) XXXXX-XXXX"}
-            editable={user.username == null}
-          />
-        </View>
-
-        <View style={{ marginTop: 24 }}>
-          <Text style={styles.labelStyle}>Pergunta*:</Text>
-          <SecQuestionPicker name="secQuestion" />
-        </View>
-
-        <View style={{ marginVertical: 24 }}>
-          <Text style={styles.labelStyle}>Resposta*:</Text>
-          <FormField
-            name="answer"
-            maxLength={255}
-            placeholder={"Digite a resposta à pergunta"}
-          />
-        </View>
-
-        <SubmitButton title="próximo" backgroundColor={colors.primary} />
-      </Form>
+      <KeyboardAwareScrollView>
+        <Form
+          validationSchema={validationSchema}
+          initialValues={{
+            number: user.username || "",
+            answer: "",
+            secQuestion: "",
+          }}
+          onSubmit={({ number, answer, secQuestion }) => {
+            handleSubmit(number, answer, secQuestion);
+          }}
+        >
+          <View style={{ padding: 16 }}>
+            <Text style={styles.textHeader}>Recuperação de senha</Text>
+            <Text style={styles.textSubtitle}>
+              Responda à pergunta de segurança, isso ajuda a mostrar que essa
+              conta realmente pertence a você
+            </Text>
+          </View>
+
+          <View>
+            <Text style={styles.labelStyle}>Número de telefone*:</Text>
+            <PhoneNumberFormField
+              name="number"
+              maxLength={11}
+              placeholder={"(DDD) XXXXX-XXXX"}
+              editable={user.username == null}
+            />
+          </View>
+
+          <View style={{ marginTop: 24 }}>
+            <Text style={styles.labelStyle}>Pergunta*:</Text>
+            <SecQuestionPicker name="secQuestion" />
+          </View>
+
+          <View style={{ marginVertical: 24 }}>
+            <Text style={styles.labelStyle}>Resposta*:</Text>
+            <FormField
+              name="answer"
+              maxLength={255}
+              placeholder={"Digite a resposta à pergunta"}
+            />
+          </View>
+
+          <SubmitButton title="próximo" backgroundColor={colors.primary} />
+        </Form>
+      </KeyboardAwareScrollView>
     </View>
   );
 }