Merge pull request #14 from mirsahib/dev-habib

functional component to registration screen
mirsahib · Mar 15, 2021 · 0d3a261 · 0d3a261
2 parents c4fca2b + 8236a19
commit 0d3a261
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 35 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%",

diff --git a/app/helper/validation.js b/app/helper/validation.js
@@ -0,0 +1,20 @@
+import * as yup from "yup";
+
+export const registrationSchema = yup.object({
+  name: yup
+    .string()
+    .required("Name is required")
+    .min(6, "Name is too short - should be 6 chars minimum."),
+  email: yup.string().required("Email is required").email(),
+  password: yup
+    .string()
+    .required("No password provided.")
+    .min(8, "Password is too short - should be 8 chars minimum.")
+    .matches(
+      /^(?=.*\d).{8,15}$/,
+      "Password must be between 4 and 8 digits long and include at least one numeric digit"
+    ),
+  confirmPassword: yup
+    .string()
+    .oneOf([yup.ref("password"), null], "Passwords must match"),
+});
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "expo-splash-screen": "~0.8.0",
     "expo-status-bar": "~1.0.3",
     "expo-updates": "~0.4.0",
+    "formik": "^2.2.6",
     "native-base": "^2.15.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
@@ -31,7 +32,8 @@
     "react-native-screens": "^2.18.0",
     "react-native-svg": "^12.1.0",
     "react-native-unimodules": "~0.12.0",
-    "react-native-web": "~0.13.12"
+    "react-native-web": "~0.13.12",
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "@babel/core": "~7.9.0",