react-navigation 5 and Formik handle submit not working

user_4476960 0
Viewed 815

I was following this example on the react-navigation docs and the handleSubmit from the Formik form mainly on onPress={handleSubmit} isn't handled.

React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => <Button onPress={handleSubmit} title='Update' />,
    });
  }, [navigation]);

  const handleSubmit = (values: IUser) => {
    setLoadingVisible(true);
    updateAccountDetails(values);
    setUser(values);
  };

 <Form
          initialValues={{
            id: user.id,
            name: user.name,
            email: user.email,
            address: user.address,
          }}
          onSubmit={handleSubmit}
          validationSchema={accountDetailsValidationSchema}
        >
react-navigation-v5 formik react-native reactjs
1 Answers

There is no <Form/> component in react-native formik https://formik.org/docs/guides/react-native#the-gist

also you might want to add button component with layoutEffect to separate component as a child of 

 <Formik
  initialValues={{ email: '' }}
  onSubmit={handleSubmit}>
  {({ handleChange, handleBlur, handleSubmit, values }) => (
   <View>
     <TextInput
       onChangeText={handleChange('email')}
       onBlur={handleBlur('email')}
       value={values.email}
     />
     <HeaderButton onSubmit={handleSubmit} navigation={navigation}/>
   </View>
 )}

add layoutEffect to <HeaderButton/>

const HeaderButton = ({ handleSubmit, navigation }) => {
  React.useLayoutEffect(() => {
   navigation.setOptions({
     headerRight: () => <Button onPress={handleSubmit} title='Update' />,
     });
  }, [navigation, handleSubmit]);

   return (<></>);

}
user_42887060
Related