handleSubmit is does not called in formik with reactnative?

Question

Problem:

I have created a react native application. There I am using Formik. My code looks like this.

<Formik
  initialValues={{
    // fineId: "",
    licenceNo: "",
    location: "",
    vehicleNo: "",
    vehicle: "",
    driverDetails: "",
    // offenceId: ""
  }}
  validationSchema={Yup.object({
    licenceNo: Yup.string().required("LicenceNo Required!"),
    vehicleNo: Yup.string().required("VehicleNo Required!"),
    vehicle: Yup.string().required("Vehicle Required!"),
    driverDetails: Yup.string().required(
      "DriverDetails Required!"
    ),
    // offenceId: Yup.string().required("OffenceId Required!"),
  })}
  onSubmit={(values, formikActions) => {
    this._onPress(values);
    setTimeout(() => {
      formikActions.setSubmitting(false);
    }, 500);
  }}
>
  {props => (
    <View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          value={this.state.fineId}
          placeholder="FineId"
          placeholderTextColor="#9b9b9b"
          autoFocus
          autoCorrect={false}
          autoCapitalize="none"
          editable={false}
          selectTextOnFocus={false}
        ></TextInput>
      </View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          value={props.values.licenceNo}
          onBlur={props.handleBlur("licenceNo")}
          placeholder="Driver Licence No"
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          onChangeText={props.handleChange("licenceNo")}
          onSubmitEditing={() => {
            this.vehicleInput.focus();
          }}
        ></TextInput>
      </View>
      {props.touched.licenceNo && props.errors.licenceNo ? (
        <View style={styles.errorMessage}>
          <Text>{props.errors.licenceNo}</Text>
        </View>
      ) : null}
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Location"
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          editable={true}
          value={props.values.location}
          onChangeText={props.handleChange("location")}
        ></TextInput>
      </View>
      <View
        style={{
          flex: 1,
          marginLeft: "10%",
          marginRight: "10%",
          marginBottom: "5%"
        }}
      >
        <MapView
          provider={PROVIDER_GOOGLE}
          initialRegion={this.state.focusedLocation}
          showsUserLocation={true}
          zoomEnabled={true}
          zoomControlEnabled={true}
          style={styles.map}
          onPress={this.pickLocationHandler}
          ref={ref => (this.map = ref)}
        >
          {marker}
        </MapView>
      </View>
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Vehicle"
          value={props.values.vehicle}
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          onChangeText={props.handleChange("vehicle")}
          onBlur={props.handleBlur("vehicle")}
          ref={el => (this.vehicleInput = el)}
        ></TextInput>
      </View>
      {props.touched.vehicle && props.errors.vehicle ? (
        <View style={styles.errorMessage}>
          <Text>{props.errors.vehicle}</Text>
        </View>
      ) : null}
      <View style={styles.FormGroup}>
        <TextInput
          style={styles.input}
          placeholder="Driver Details"
          value={props.values.driverDetails}
          placeholderTextColor="#9b9b9b"
          autoCorrect={false}
          autoCapitalize="none"
          selectTextOnFocus={false}
          multiline={true}
          numberOfLines={4}
          onChangeText={props.handleChange("driverDetails")}
          onBlur={props.handleBlur("driverDetails")}
        ></TextInput>
      </View>
      {props.touched.driverDetails &&
        props.errors.driverDetails ? (
          <View style={styles.errorMessage}>
            <Text>{props.errors.driverDetails}</Text>
          </View>
        ) : null}


      <Button title="Do Fine" type="submit" onPress={() => (props.handleSubmit)}></Button>

    </View>
  )}
</Formik>

The problem that I facing is when I try to press the submit button it does not call the function. I tried a lot to find a solution to this problem. But I was not able to do so. Can someone help me to overcome this issue? Thank you.

Answer 1

The problem is that you are not calling the handleSubmit function.

<Button title="Do Fine" type="submit" onPress={() => props.handleSubmit} />

In this part of your code you are defining your button's onPress as a function returning another function. Doing this the button will not call the handleSubmit from formik but will return it inside the button. You can either directly place the handleSubmit function inside the onPress

onPress={props.handleSubmit}

or call it after the callback:

onPress={() => props.handleSubmit()}

Answer 2

You should use

onPress={handleSubmit(submit)}

in your button. And then give the handleSubmit props by putting

const { handleSubmit } = props

in your form. Finally just add

const submit = values => {
  console.log('submitting form', values)
}

outside of your form.