Skip to content

Instantly share code, notes, and snippets.

@ajaykumar97

ajaykumar97/Formik.js

Last active December 13, 2019 05:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ajaykumar97/89463b69abe1bfe8a6a14de5751899a2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ajaykumar97/89463b69abe1bfe8a6a14de5751899a2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ajaykumar97 created this gist Dec 13, 2019.
    134 changes: 134 additions & 0 deletions Formik.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,134 @@
    import React from 'react';
    import { Button, TextInput, View, Text, StyleSheet } from 'react-native';
    import SplashScreen from 'react-native-splash-screen';
    import { Formik } from 'formik';
    import * as yup from 'yup';

    class MyReactNativeForm extends React.Component {
    componentDidMount() {
    SplashScreen.hide();
    }

    render() {
    return (
    <View style={styles.container}>
    <Formik
    initialValues={{
    email: '',
    password: '',
    checkButton: false
    }}
    onSubmit={values => console.log(values)}
    validationSchema={
    yup.object().shape({
    email: yup
    .string()
    .email('Not a valid e-mail')
    .required('Email is required'),
    password: yup.string()
    .min(4, 'Password must be at least 4 characters')
    .max(6, 'Password must be at most 4 characters')
    .required('Password is required'),
    checkButton: yup.boolean()
    .oneOf([true], 'Please check the agreement')
    })}
    >
    {({
    values,
    handleChange,
    handleSubmit,
    errors,
    setFieldTouched,
    touched,
    // isValid,
    setFieldValue
    }) => (
    <View>
    <TextInput
    onChangeText={handleChange('email')}
    onBlur={() => setFieldTouched('email')}
    value={values.email}
    style={styles.textInput}
    placeholder={'Enter email'}
    keyboardType={'email-address'}
    autoCapitalize={'none'}
    autoCorrect={false}
    />

    <View style={styles.errorContainer}>
    {touched.email && errors.email &&
    <Text style={styles.errorText}>
    {errors.email}
    </Text>
    }
    </View>

    <TextInput
    onChangeText={handleChange('password')}
    onBlur={() => setFieldTouched('password')}
    value={values.password}
    style={styles.textInput}
    placeholder={'Enter password'}
    autoCapitalize={'none'}
    autoCorrect={false}
    secureTextEntry
    />

    <View style={styles.errorContainer}>
    {touched.password && errors.password &&
    <Text style={styles.errorText}>
    {errors.password}
    </Text>
    }
    </View>

    <Text
    onPress={() => setFieldValue('checkButton', !values.checkButton)}
    style={styles.check}
    >Click on me to check: {String(values.checkButton)}</Text>

    <View style={styles.errorContainer}>
    {errors.checkButton &&
    <Text style={styles.errorText}>
    {errors.checkButton}
    </Text>
    }
    </View>

    <Button
    onPress={handleSubmit}
    // disabled={!isValid}
    title="Submit"
    />
    </View>
    )}
    </Formik>
    </View>
    );
    }
    }

    const styles = StyleSheet.create({
    container: {
    flex: 1,
    marginHorizontal: 15
    },
    errorContainer: {
    height: 20
    },
    errorText: {
    marginTop: 2,
    fontSize: 10,
    color: 'red'
    },
    textInput: {
    marginTop: 10,
    borderBottomWidth: 1
    },
    check: {
    marginTop: 10,
    color: 'blue'
    }
    });

    export default MyReactNativeForm;