T
TanStack•7mo ago
rare-sapphire

onSubmit callback does not get invoked - React Native

Hi! Im trying to use tanstack form with react-native (expo). So far, validation works, but the onSubmit callback never gets called This is how my code looks like. I would expect to see the console.logs inside of onSubmit, but instead I only see "SUBMITTING FORM" and thats it. I dont know if i am doing something incredibly stupid that I am not seeing or what, but I cant get this to work 
  export const ExerciseForm = () => {
  const form = useForm({
    onSubmit: async ({ value }) => {
      console.log("onSubmit invoked")
      console.log(value)
    },
    validators: {
      onChange: schema.insertExercisesSchema
    },
  })

  return (
    <View className='p-2'>
      <DialogHeader>
        <DialogTitle
          style={{ fontFamily: "ContrailOne_400Regular" }}
        >New exercise</DialogTitle>
        <DialogDescription
          style={{ fontFamily: "ContrailOne_400Regular" }}
        >
          Create a new exercise to add to your workout.
        </DialogDescription>
      </DialogHeader>
      <View className='py-3 flex flex-col gap-2'>
        <form.Field
          name="name"
        >
          {field => (
            <>
              <Label style={{ fontFamily: "ContrailOne_400Regular" }} nativeID={field.name}>Name:</Label>
              <Input
                value={field.state.value as string}
                onChangeText={field.handleChange}
                placeholder='Pushups' />
              {
                field.state.meta.errors
                  ? <Text className='text-red-500'>{field.state.meta.errors[0]?.message}</Text>
                  : null
              }
            </>
          )
          }
        </form.Field>
      </View>
      <Button
        onPress={() => {
          console.log("SUBMITTING FORM")
          form.handleSubmit()
        }}
      >
        <Text>Save</Text>
      </Button>
    </View>
  );
}
  export const ExerciseForm = () => {
  const form = useForm({
    onSubmit: async ({ value }) => {
      console.log("onSubmit invoked")
      console.log(value)
    },
    validators: {
      onChange: schema.insertExercisesSchema
    },
  })

  return (
    <View className='p-2'>
      <DialogHeader>
        <DialogTitle
          style={{ fontFamily: "ContrailOne_400Regular" }}
        >New exercise</DialogTitle>
        <DialogDescription
          style={{ fontFamily: "ContrailOne_400Regular" }}
        >
          Create a new exercise to add to your workout.
        </DialogDescription>
      </DialogHeader>
      <View className='py-3 flex flex-col gap-2'>
        <form.Field
          name="name"
        >
          {field => (
            <>
              <Label style={{ fontFamily: "ContrailOne_400Regular" }} nativeID={field.name}>Name:</Label>
              <Input
                value={field.state.value as string}
                onChangeText={field.handleChange}
                placeholder='Pushups' />
              {
                field.state.meta.errors
                  ? <Text className='text-red-500'>{field.state.meta.errors[0]?.message}</Text>
                  : null
              }
            </>
          )
          }
        </form.Field>
      </View>
      <Button
        onPress={() => {
          console.log("SUBMITTING FORM")
          form.handleSubmit()
        }}
      >
        <Text>Save</Text>
      </Button>
    </View>
  );
}
1 Reply
rare-sapphire
rare-sapphireOP•7mo ago
I must add if i log the form values inside of the onPress function they get logged correctly

Did you find this page helpful?