The "Disappearing Zero": Handling Numeric Inputs in React Native Forms

If you’ve spent any time building forms in React Native with React Hook Form and validation libraries like Zod or Yup, you’ve likely encountered a strange phenomenon: the "Disappearing Zero."

One minute you're building a sleek checkout or progress flow, and the next, your users are complaining that every time they try to enter 0, the input field just... wipes itself clean.

The culprit? JavaScript’s definition of "falsy."

The Trap: JavaScript Falsiness

In React Native, numeric inputs often start as null or undefined (or a number type in your state). Since TextInput (or custom Input components) expect a string, a common pattern is to cast the value like this: