Here, is the RegisterScreen, that I want to change the formik values before submitting.

 function RegisterScreen({ navigation }) {
        const [hidePassword, setHidePassword] = useState(true);
        const [showDatePicker, setShowDatePicker] = useState(false);
        return (
            <ScrollView>
                <View style={{ flex: 1 }}>
                    <AppImageBackground>
                        <AppForm
                            initialValues={{ name: '', date: '', checkBox: '', email: '', password: '', phone: '', gender: null, city: null, bloodGroup: null }}
                            onSubmit={(values) => {
                                navigation.navigate("Login Successfully")
                                console.log(values);
                            }}
    
                            validationSchema={validationschema}
                        >
    
                            //FormFields
                            //FormFields
    
    
    
                            
    
                            <SubmitButton title={"Register"} />
                        </AppForm>
                    </AppImageBackground>
                </View>
            </ScrollView>
        );
    }

How can I access the values and change it before submitting. Here below is Formik component. Note I want to change the values in RegisterScreen (above code).

function AppForm({ initialValues, onSubmit, validationSchema, children }) {
    return (
        <View style={styles.container}>
            <Formik
            
                initialValues={initialValues}
                onSubmit={onSubmit}
                validationSchema={validationSchema}
            >
                {() => (<>{children}</>)}
            </Formik>
        </View>
    );
}

CodePudding user response：

You can use the onSubmit handler to access / change the values -

<Formik
  onSubmit={(values, actions) => {
    const phone = values.phone.replace(...)
    const valuesToSend = { ...values, phone }

    onSubmit(valuesToSend, actions) //from props
 }
}

CodePudding user response：

You can use useFormik as below

Make common validation and scheme file

useCreateUserForm.tsx

 import * as Yup from 'yup';
 import {FormikHelpers, useFormik} from 'formik';

 export interface IUserFromType {
  name: string;
 }

 const defaultValues: IUserFromType = {
  name: '',
 };

 const schema = Yup.object().shape({
   name: Yup.string().min(4, 'Group Name must be at least 4   characters').required("Group Name is required field"),
 });

export const useCreateUserForm = (
  onSubmit: (
  values: IUserFromType,
  formikHelpers: FormikHelpers<IUserFromType>,
  ) => void | Promise<unknown>,
   initialValues: IUserFromType = defaultValues,
  ) => {
  return useFormik<IUserFromType>({
 initialValues,
 enableReinitialize: true,
 validationSchema: schema,
 validateOnChange: false,
 validateOnBlur: true,
 onSubmit,
   });
 };

After that you need to add main render file like below

const formik = useCreateUserForm(onSubmit);
<UserForm formik={formik} />

Now Create UserForm.tsx

 import React, {useState} from 'react';
 import {FormikProps, FormikProvider} from 'formik';

 interface IGroupFormProps {
 formik: FormikProps<IUserFromType>;
 
 }

function UserForm(props: IGroupFormProps) {
 const {formik} = props;


 const {values, handleChange,   handleBlur, setFieldValue, setFieldError} = formik;

 return (
 <FormikProvider value={formik}>
   <View>
   <TextInput
       onChangeText={handleChange('name')}
       onBlur={handleBlur('name')}
       value={values.name}
     /> 
   </View>
  </FormikProvider>
  );
  }
  export default UserForm;

Same render all your component inside FormikProvider. Hope This will resolve your issue.