adding warning messages to register screen

src/app/screens/RegisterScreen.js

@@ -407,7 +407,6 @@ export default function RegisterScreen(props) {
               "As senhas não correspondem"
             );
             scroll.scrollTo({ x: 0, y: 0, animated: true });
-
           } else {
             fieldsAreNotInUse(form, actions).then((isNotUsed) => {
               if (isNotUsed) {
@@ -465,26 +464,36 @@ export default function RegisterScreen(props) {
               />
             </View>
             <Text style={styles.labelStyle}>Senha:*</Text>
-            <View style={styles.iconField}>
-              <MaterialCommunityIconsCustom name="lock" />
-              <PasswordFormField
-                flex={1}
-                maxLength={20}
-                name="password"
-                placeholder="Digite a senha"
-                paddingRight={2}
-              />
+            <View style={{ flexDirection: "column", flex: 1 }}>
+              <View style={{ ...styles.iconField, marginBottom: 12 }}>
+                <MaterialCommunityIconsCustom name="lock" />
+                <PasswordFormField
+                  flex={1}
+                  maxLength={20}
+                  name="password"
+                  placeholder="Digite a senha"
+                  paddingRight={2}
+                />
+              </View>
+              <Text style={styles.warningText}>
+                A senha deve conter entre 8 e 20 caracteres
+              </Text>
             </View>
             <Text style={styles.labelStyle}>Confirmar senha:*</Text>
-            <View style={styles.iconField}>
-              <MaterialCommunityIconsCustom name="lock" />
-              <PasswordFormField
-                flex={1}
-                maxLength={20}
-                name="confirmPassword"
-                placeholder="Repita a senha"
-                paddingRight={2}
-              />
+            <View style={{ flexDirection: "column", flex: 1 }}>
+              <View style={{ ...styles.iconField, marginBottom: 12 }}>
+                <MaterialCommunityIconsCustom name="lock" />
+                <PasswordFormField
+                  flex={1}
+                  maxLength={20}
+                  name="confirmPassword"
+                  placeholder="Repita a senha"
+                  paddingRight={2}
+                />
+              </View>
+              <Text style={styles.warningText}>
+                A senha deve conter entre 8 e 20 caracteres
+              </Text>
             </View>
             <Text style={styles.labelStyle}>Data de nascimento:</Text>
             <View style={styles.iconField}>
@@ -516,9 +525,12 @@ export default function RegisterScreen(props) {
               <InstitutionPicker name="institution" />
             </View>
             <Text style={styles.labelStyle}>Nome da instituição</Text>
-            <View style={styles.iconField}>
-              <MaterialCommunityIconsCustom name="bank" />
-              <InstitutionNamePicker name="institutionName" />
+            <View style={{ flexDirection: "column", flex: 1 }}>
+              <View style={{...styles.iconField, marginBottom:12}}>
+                <MaterialCommunityIconsCustom name="bank" />
+                <InstitutionNamePicker name="institutionName" />
+              </View>
+              <Text style={styles.warningText}>O nome da instituição é fornecido pelo Cemaden Educação</Text>
             </View>
             <Text style={styles.labelStyle}>Vínculo institucional:</Text>
             <View style={[styles.iconField]}>
@@ -614,4 +626,10 @@ const styles = StyleSheet.create({
   dateInput: {
     paddingLeft: 16,
   },
+  warningText: {
+    color: colors.primary,
+    fontSize: dimensions.text.primary,
+    textAlign: "left",
+    marginBottom: 24,
+  },
 });