🔨 Add form,form validation,form validation style

mirsahib · Mar 12, 2021 · 8236a19 · 8236a19
1 parent b38d6fe
commit 8236a19
Showing 1 changed file with 81 additions and 32 deletions.
diff --git a/app/containers/Registration/Registration.js b/app/containers/Registration/Registration.js
@@ -8,9 +8,10 @@ import {
   TextInput,
 } from "react-native";
 import InputScrollView from "react-native-input-scroll-view";
-
 import { Button } from "native-base";
+import { Formik } from "formik";
 import colors from "../../assets/colors/colors";
+import { registrationSchema } from "../../helper/validation";
 
 export default function Registration({ navigation }) {
   return (
@@ -21,6 +22,7 @@ export default function Registration({ navigation }) {
           style={styles.header_shape}
         />
       </View>
+      {/**end of header shape */}
       <View
         style={{
           flex: 1,
@@ -33,6 +35,7 @@ export default function Registration({ navigation }) {
           Let’s manage your books and make some friends
         </Text>
       </View>
+      {/**end of text */}
       <View
         style={{
           flex: 2,
@@ -41,37 +44,81 @@ export default function Registration({ navigation }) {
         }}
       >
         {/** Add Text input */}
-        <TextInput style={styles.input_field} placeholder="Enter your name" />
-        <TextInput
-          style={styles.input_field}
-          placeholder="Enter email address"
-        />
-        <TextInput
-          style={styles.input_field}
-          placeholder="Enter password"
-          secureTextEntry={true}
-        />
-        <TextInput
-          style={styles.input_field}
-          placeholder="Confirm password"
-          secureTextEntry={true}
-        />
-      </View>
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
-        <Button
-          style={styles.button}
-          success
-          full
-          onPress={() => navigation.navigate("Registration")}
+        <Formik
+          initialValues={{
+            name: "",
+            email: "",
+            password: "",
+            confirmPassword: "",
+          }}
+          validationSchema={registrationSchema}
+          onSubmit={(values, actions) => {
+            actions.resetForm();
+            /** put api request
+             *
+             *
+             **/
+            console.log(values);
+          }}
         >
-          <Text style={styles.button_text}>Register</Text>
-        </Button>
+          {(props) => (
+            <>
+              <TextInput
+                style={styles.input_field}
+                placeholder="Enter your name"
+                onChangeText={props.handleChange("name")}
+                value={props.values.name}
+                onBlur={props.handleBlur("name")}
+              />
+              <Text style={styles.warning_text}>
+                {props.touched.name && props.errors.name}
+              </Text>
+              <TextInput
+                style={styles.input_field}
+                placeholder="Enter email address"
+                onChangeText={props.handleChange("email")}
+                value={props.values.email}
+                onBlur={props.handleBlur("email")}
+              />
+              <Text style={styles.warning_text}>
+                {props.touched.email && props.errors.email}
+              </Text>
+
+              <TextInput
+                style={styles.input_field}
+                placeholder="Enter password"
+                secureTextEntry={true}
+                onChangeText={props.handleChange("password")}
+                value={props.values.password}
+                onBlur={props.handleBlur("password")}
+              />
+              <Text style={styles.warning_text}>
+                {props.touched.password && props.errors.password}
+              </Text>
+
+              <TextInput
+                style={styles.input_field}
+                placeholder="Confirm password"
+                secureTextEntry={true}
+                onChangeText={props.handleChange("confirmPassword")}
+                value={props.values.confirmPassword}
+                onBlur={props.handleBlur("confirmPassword")}
+              />
+              <Text style={styles.warning_text}>
+                {props.touched.confirmPassword && props.errors.confirmPassword}
+              </Text>
+
+              <Button
+                style={styles.button}
+                success
+                full
+                onPress={props.handleSubmit}
+              >
+                <Text style={styles.button_text}>Register</Text>
+              </Button>
+            </>
+          )}
+        </Formik>
         <Text style={styles.bottom_text}>
           Already have an account ?{" "}
           <Text
@@ -85,6 +132,7 @@ export default function Registration({ navigation }) {
           </Text>
         </Text>
       </View>
+      {/**end of input and register button */}
     </InputScrollView>
   );
 }
@@ -114,8 +162,9 @@ const styles = StyleSheet.create({
     fontFamily: "Poppins-Medium",
     fontSize: 18,
     paddingLeft: 15,
-    marginBottom: 15,
+    marginTop: 10,
   },
+  warning_text: { color: "crimson", fontFamily: "Poppins-Bold" },
   button: {
     backgroundColor: colors.background_secondary,
     width: "95%",