Formik + yup example

Formik.js

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;