CODEWITHSUNDEEP
javascriptreactjstypescriptreact-native
Lukas Vis
Lukas Vis

Reputation: 475

Is there a way to handle number inputs instead of string with React Native?

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.

Upvotes: 1

Views: 4933

Answers (1)

Donovan Hiland
Donovan Hiland

Reputation: 1499

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.

  1. Because this is all just javascript (or typescript we don't discriminate) you could implement this functionality yourself:
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.

  1. Speaking of hooks, there are a plethora of form libraries that you might be interested in that do a lot of the heavy lifting for you. Some options include:

among others.

Upvotes: 4

Related Questions