Integration Example of React-Boostrap + Formik + Yup

form.js

/* eslint-disable no-template-curly-in-string */
import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import { setLocale } from 'yup';
import './AuthForm.css';
import { Form, Col, Button, Container } from 'react-bootstrap';
import FormInput from "../../../components/Form/Input";

setLocale({
    mixed: {
        default: 'Não é válido',
        required: '${path} é necessário',
    },
    number: {
        min: 'Deve ser maior que ${min}',
    },
    string: {
        min: 'Mínimo de ${min} caracteres'
    }
});

export default class AuthForm extends Component {
    schema = Yup.object().shape({
        name: Yup.string().min(3).required().label("Nome"),
        email: Yup.string().email().required().label("Email"),
        password: Yup.string().min(6).required().label("Senha"),
        passwordConfirmation: Yup.string().required().label("Confirmação de Senha")
            .oneOf([Yup.ref('password')], 'Senhas devem coincidir')
    })

    render() {
        return (
            <Formik
                initialValues={{
                    name: '',
                    email: '',
                    password: '',
                    passwordConfirmation: ''
                }}
                validationSchema={this.schema}
                onSubmit={(values, actions) => {
                    // same shape as initial values
                    console.log(values);
                    actions.setSubmitting(false);
                }}
            >
                {({ handleSubmit,
                    isSubmitting,
                    ...formik }) => (
                        <Form onSubmit={handleSubmit}>
                            <Container style={{ width: "100%", margin: "auto" }}>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="validationName">
                                        <Form.Label>Nome</Form.Label>
                                        <FormInput feedback="Belo Nome!" formik={formik}>
                                            <Form.Control
                                                type="text"
                                                name="name"
                                                placeholder="Seu Nome"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="validationEmail">
                                        <Form.Label>Email</Form.Label>
                                        <FormInput feedback="Email Bonito!" formik={formik}>
                                            <Form.Control
                                                type="email"
                                                name="email"
                                                placeholder="Seu melhor Email"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={4} controlId="validationPassword">
                                        <Form.Label>Senha</Form.Label>
                                        <FormInput feedback="Deveras Seguro!" formik={formik}>
                                            <Form.Control
                                                type="password"
                                                name="password"
                                                placeholder="Sua senha"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                    <Form.Group as={Col} md={4} controlId="validationPasswordConfirmation">
                                        <Form.Label>Confirmar Senha</Form.Label>
                                        <FormInput feedback="Já vi isso antes!" formik={formik}>
                                            <Form.Control
                                                type="password"
                                                name="passwordConfirmation"
                                                placeholder="Sua senha - O Retorno"
                                            />
                                        </FormInput>
                                    </Form.Group>
                                </Form.Row>
                                <Form.Row bsPrefix="row justify-content-center">
                                    <Form.Group as={Col} md={8} controlId="authSubmissionButton">
                                        <Button
                                            block
                                            size="lg"
                                            variant="success"
                                            type="submit"
                                            disabled={isSubmitting}
                                        >
                                            Enviar
                                        </Button>
                                    </Form.Group>
                                </Form.Row>
                            </Container>
                        </Form>
                    )}
            </Formik>
        )
    }
}

inputForm.js

import React from 'react'
import Form from 'react-bootstrap/Form';

const formInput = (props) => {
    const { formik } = props;
    const { name } = props.children.props;

    const childrenProps = {
        ...props,
        onChange: formik.handleChange,
        onBlur: formik.handleBlur,
        value: formik.values[name],
        isValid: props.isValid || (formik.touched[name] && !formik.errors[name]),
        isInvalid: props.isInvalid || (props.formik.touched[name] && formik.errors[name]),
        children: null
    };

    return (
        <React.Fragment>
            {React.cloneElement(props.children, childrenProps)}
            <Form.Control.Feedback>{props.feedback}</Form.Control.Feedback>
            <Form.Control.Feedback type="invalid">{formik.errors[name]}</Form.Control.Feedback>
        </React.Fragment>
    )
}

export default formInput;

The idea is to transfer common properties passed from Formik to the react-bootstrap form component without having to type it for every input you have. Feedback is always welcome. Also, if you know a better solution, please tell me!