How can I fire a function in headerRight using Formik?

user_2262829 0
Viewed 466

I'm new to react-native and formik and I encountered this problem that I'm trying to build up.

How can I fire a function in headerRight using Formik? I have updateCorporation function that will do fire api, and formik will do the job to fire this function and after I press the Update button, but the results are undefined I didn`t understand why its happening.

File_1.js

const CorporationContainer = (props) => {
    const {
    navigation,
} = props;

const updateCorporation = (values) => {
    // do patch stuff with values
    // but its undefined
};

useEffect(() => {
    navigation.setParams({ updateCorporation: updateCorporation.bind() });
}, []);

return (
    <Corporation
        updateCorporation={updateCorporation} />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
    headerRight: (
        <EditBtn
        onPress={() => navigation.state.params.updateCorporation()}
        >
        <EditText>Update</EditText>
        </EditBtn>
    ),
});

export default CorporationContainer;

File_2.js

const Corporation = (props) => {
    const {
        updateCorporation,
    } = props;

    const emailField = useRef(null);

    const validationSchema = yup.object().shape({
        email: yup.string()
        .ensure()
        .email('Email must be valid')
        .required('Email'),
    });

    return (
        <Formik
            initialValues={{
                email,
            }}
            onSubmit={values => updateCorporation(values)}
            validateOnBlur={false}
            validateOnChange={false}
            validationSchema={validationSchema}
            >
        {(formProps) => {
            const {
            errors,
            setFieldValue,
            values,
            } = formProps;
            return (
                <Container>
                    <Input
                        name="email"
                        placeholder="Email Corporation"
                        textContentType="emailAddress"
                        keyboardType="email-address"
                        returnKeyType="done"
                        autoCapitalize="none"
                        autoCorrect={false}
                        ref={emailField}
                        value={values.email}
                        onChangeText={setFieldValue}
                        editable={!email}
                        error={errors.email}}
                    />
                </Container>
            );
        }}
        </Formik>
    );
};

export default Corporation;
formik react-native
2 Answers

In File_1.js I had to use withForm and remove all Formik things in File_2.js and use the props instead.

const CorporationContainer = (props) => {
    const {
        navigation,
        handleSubmit,
        errors,
        setFieldValue,
        values,
    } = props;

    useEffect(() => {
        navigation.setParams({ updateCorporation: handleSubmit.bind() });
    }, []);

    return (
        <ProfileProfessional
        errors={errors}
        setFieldValue={setFieldValue}
        values={values}
        />
    );
};

CorporationContainer.navigationOptions = ({ navigation }) => ({
headerRight: (
    <EditBtn
    onPress={() => navigation.state.params.updateCorporation()}
    >
    <EditText>Editar</EditText>
    </EditBtn>
),
});

export default withFormik({
    // ...
})(CorporationContainer);
user_22628290

Formik author here...

Haven't tried this out, and idk exactly how navigation binding works, but you want to bind Formik's submitForm() prop to the navigation and not the updateCorporation function. However, You will need to do this where you have access to Formik props/context (i.e. as a child of <Formik>). 

import React from 'react'
import { connect } from 'formik'

const updateCorporation = (values) => {
    // do patch stuff with values
    // but its undefined
};

const BindSubmit = connect(({ formik, navigation }) => {
  useEffect(() => {
    navigation.setParams({ updateCorporation: submitForm.bind() });
   }, []);
  return null
})


// ... and then just render it somewhere under Formik

const Corporation = () => {
 return (
   <Formik>
    <BindSubmit />
    {/* ... same */}
   </Formik>
 )
}
user_29389740
Related