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
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>
);
}
