Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

functional component to registration screen #14

Merged
merged 3 commits into from
Mar 15, 2021
Merged

functional component to registration screen #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
899d326
:heavy_plus_sign: Add formik and yup package
mirsahib Mar 12, 2021
b38d6fe
:hammer: Add form validator schema
mirsahib Mar 12, 2021
8236a19
:hammer: Add form,form validation,form validation style
mirsahib Mar 12, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 81 additions & 32 deletions app/containers/Registration/Registration.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -21,6 +22,7 @@ export default function Registration({ navigation }) {
style={styles.header_shape}
/>
</View>
{/**end of header shape */}
<View
style={{
flex: 1,
Expand All @@ -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,
Expand All @@ -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
Expand All @@ -85,6 +132,7 @@ export default function Registration({ navigation }) {
</Text>
</Text>
</View>
{/**end of input and register button */}
</InputScrollView>
);
}
Expand Down Expand Up @@ -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%",
Expand Down
20 changes: 20 additions & 0 deletions app/helper/validation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"),
});
73 changes: 71 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down