I have a react context state for my multi form input values:
const [formValues, setFormValues] = useState({
sex: "male",
unitSystem: "metric",
heightInCm: "173",
weightInKg: "60",
dateOfBirth: null,
});
and I am struggling to undestand how I should handle my number inputs, like height and weight. At the moment I have to store them in a string format, because TextInput only accepts a string. I find myself having to keep converting string to number for validations.
For example this is my input handler:
const toCm = (foot: string, inches: string) => {
const footInCm = convert(parseInt(foot)).from("ft").to("cm");
const inchesToCm = convert(parseInt(inches)).from("in").to("cm");
const actualCm = footInCm + inchesToCm;
return actualCm;
};
const handleImperialSubmit = () => {
toCm(foot, inches);
setFormValues((prev) => ({
...prev,
heightInCm: toCm(foot, inches).toString(),
}));
setModalVisible(!modalVisible);
};
is there a way to work with actual numbers in react native, because this is very confusing.
The short answer: No.
The longer answer: Still no, there is no way to have react native's TextInput return numbers to you, partially probably because there's no way to restrict the input to numbers only that's built into TextInput. You do have a couple options that might make your life easier.
const [number, onChangeNumber] = React.useState(null)
return (
<TextInput
style={styles.input}
onChangeText={textValue => {
if(!isNaN(textValue) && !isNaN(parseInt(textValue))) {
onChangeNumber(parseInt(textValue))
} else if (textValue === "") {
onChangeNumber(null)
}
}}
value={number?.toString()}
keyboardType="numeric"
/>
)
You could create a component out of this or wrap the logic into a hook for reuse on all your "numeric inputs". The example above might be a little overkill after setting the keyboard to numeric but from that keyboard you can include a decimal which you may or may not want. The logic can be updated accordingly.
among others.