How to return ControlledInput value as number ?

[premdasvm]

Hi,

I've a component as shown below, i'm trying to return the value of amount as number

const schema = z.object({
	customerId: z.number({ required_error: "Customer is required." }),
	amount: z.number({ required_error: "Amount is required." }),
});

type FormType = z.infer<typeof schema>;

export const AddDailyCollection = () => {
	const { control, handleSubmit,  } = useForm<FormType>({
		resolver: zodResolver(schema),
	});

	const userId = useUser.use.id();

	if (!userId) return;

	const { data } = useAssignedCustomer({ variables: { userId } });

	const onSubmit = (data: FormType) => {
		console.log(data);
	};

	return (
		<View className="flex-1 p-4">
			<ControlledSelect
				name="customerId"
				label="Customer"
				placeholder="Select a customer"
				control={control}
				options={data?.map(({ id, name, phone }) => ({
					label: `${name} - ${phone}`,
					value: id,
				}))}
			/>
			<ControlledInput name="amount" label="Amount" control={control}  />
			<View>
				<Button label="Save" onPress={handleSubmit(onSubmit)} />
			</View>
		</View>
	);
};

I tried removing valueAsNumber from the Omit<RegisterOptions, "valueAsNumber" | "valueAsDate" | "setValueAs">.
But still zod was throwing an error saying the Expected number, received string.

[premdasvm]

const schema = z.object({
customerId: z.number({ required_error: "Customer is required." }),
amount: z
	.string()
	.refine(value => /^\d+$/.test(value), { message: "Amount must be a valid number." }),
});

const onSubmit = ({ customerId, amount }: FormType) => {
	console.log({ customerId, amount: Number(amount) });
};

this is how i'm handling it as of now. Let me know if there is a better way for this.

[yjose]

React Native TextInput always returns a string. Therefore, you need to convert the value before validation. What you did here is the right answer, I guess.