RN Form with Formik

form.js

import React, { PureComponent, Fragment } from 'react';
import { View, ScrollView } from 'react-native';
import { withFormik } from 'formik';

import ButtonLoading from '../../../react-component/buttonLoading';

import InputComponent from '../../../components/inputComponent';

import { enderecoSchema } from '../../../constants/schemas';

import styles from './styles';

import { getEnderecoCep, saveEnderecoUsuario } from '../api';

class Form extends PureComponent {
    state = {
        isCepChecked: false,
        isLoading: false,
        isNewAddress: true,
    };

    componentDidMount() {}

    componentDidUpdate(prevProps) {
        const { isNewAddress, endereco } = this.props;

        if (prevProps.isNewAddress !== isNewAddress) {
            if (!isNewAddress) {
                this.props.setValues({ ...endereco });
                this.setState({ ...this.state, isCepChecked: true });
            }
        }
    }

    loadEnderecoCep = async (nrCep) => {
        this.setState({ ...this.state, isLoading: true });
        const cepConsulta = nrCep.replace('-', '');

        await getEnderecoCep(cepConsulta)
            .then((response) => {
                const result = response.data;

                result.nrIbge = result.cidade.nrIbge;
                result.dsCidade = result.cidade.dsCidade;
                result.dsEstado = result.cidade.estado.dsEstado;

                delete result.cidade;
                delete result.idCep;

                this.props.setValues({ ...result });

                this.setState({
                    ...this.state,
                    isCepChecked: true,
                    isLoading: false,
                });
            })
            .catch((error) => {
                const message = error.response.data.message,
                    { setFieldError, setSubmitting } = this.props;

                setFieldError('nrCepPre', message);
                setSubmitting(false);

                this.setState({
                    ...this.state,
                    isCepChecked: false,
                    isLoading: false,
                });
            });
    };

    onChangeCep = () => {
        let { values, errors } = this.props,
            { nrCepPre } = values;

        if (!errors.nrCepPre && nrCepPre) {
            this.loadEnderecoCep(nrCepPre);
        }
    };

    render() {
        const { isCepChecked, isLoading } = this.state,
            {
                values,
                errors,
                touched,
                setFieldValue,
                setFieldTouched,
                handleSubmit,
                isSubmitting,
            } = this.props,
            buttonProps = {
                isLoading: isLoading || isSubmitting,
                label: 'Avançar',
                style: styles.button,
            };

        return (
            <View style={styles.container}>
                <ScrollView style={styles.formContainer}>
                    {!isCepChecked ? (
                        <Fragment>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Digite o CEP"
                                    name="nrCepPre"
                                    value={values.nrCepPre}
                                    error={errors.nrCepPre}
                                    touched={touched.nrCepPre}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                    keyboardType="phone-pad"
                                    mask={'[00000]-[000]'}
                                />
                            </View>

                            <View style={styles.lineContent}>
                                <ButtonLoading
                                    {...buttonProps}
                                    onPress={() => this.onChangeCep()}
                                />
                            </View>
                        </Fragment>
                    ) : (
                        <Fragment>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="CEP"
                                    value={values.nrCep}
                                    mask={'[00000]-[000]'}
                                    editable={false}
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Cidade"
                                    value={values.dsCidade}
                                    editable={false}
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Estado"
                                    value={values.dsEstado}
                                    editable={false}
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Logradouro"
                                    name="dsLogradouro"
                                    value={values.dsLogradouro}
                                    error={errors.dsLogradouro}
                                    touched={touched.dsLogradouro}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                    returnKeyType="next"
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Número"
                                    name="nrEndereco"
                                    value={values.nrEndereco}
                                    error={errors.nrEndereco}
                                    touched={touched.nrEndereco}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                    keyboardType="phone-pad"
                                    returnKeyType="next"
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Bairro"
                                    name="dsBairro"
                                    value={values.dsBairro}
                                    error={errors.dsBairro}
                                    touched={touched.dsBairro}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                    returnKeyType="next"
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Complemento"
                                    name="dsComplemento"
                                    value={values.dsComplemento}
                                    error={errors.dsComplemento}
                                    touched={touched.dsComplemento}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                    returnKeyType="next"
                                />
                            </View>
                            <View style={styles.lineContent}>
                                <InputComponent
                                    label="Identificação"
                                    name="dsEndereco"
                                    value={values.dsEndereco}
                                    error={errors.dsEndereco}
                                    touched={touched.dsEndereco}
                                    onTouch={setFieldTouched}
                                    onChange={setFieldValue}
                                />
                            </View>

                            <View style={styles.lineContent}>
                                <ButtonLoading
                                    loading={isLoading || isSubmitting}
                                    label="Salvar"
                                    style={styles.button}
                                    onPress={handleSubmit}
                                />
                            </View>
                        </Fragment>
                    )}
                </ScrollView>
            </View>
        );
    }
}

export default withFormik({
    mapPropsToValues: (props) => ({
        nrCepPre: '',
        dsEndereco: '',
        nrCep: '',
        dsLogradouro: '',
        nrEndereco: '',
        dsBairro: '',
        dsComplemento: '',
    }),

    validationSchema: enderecoSchema,

    handleSubmit(values, customObject, bag) {
        console.warn('handle');
        // return handleFormSubmission(values, bag);
        // saveEnderecoUsuario(values);
        // TODO Salvo com sucesso
        // navigation.navigate('EnderecoLista', {
        // });
    },
})(Form);