A decimal keyboard is an input hint, not a numeric parser. Keep the field’s editable text separate from its committed quantity, then parse and validate at an explicit boundary such as Save. This preserves unfinished input and prevents a temporary blank or separator from becoming a zero-portion log.
Prerequisites are the supported input locales, visible unit, allowed numeric range and a policy for pasted text. Keep this task separate from general localization: canonical units and formatting are important, but an editor also has incomplete states that are not yet numbers.
Let the person finish the text
React Native TextInput provides text-change events and keyboard configuration. Those APIs do not define the application’s numeric grammar. A user can paste content, use a hardware keyboard or produce locale-specific separators, so keyboardType alone cannot establish valid input.
React Native: TextInput events and keyboard options
| Editable text | Committed value | UI meaning |
|---|---|---|
| Empty string | Previous value unchanged | Draft not ready |
| 1, | Previous value unchanged | User may continue typing |
| 1,5 | Not committed until Save | Candidate: 1.5 under selected grammar |
| Save valid 1,5 | 1.5 in canonical quantity | Accepted edit |
| Paste 1,2.3 | No commit | Ambiguous mixed separators |
The table assumes a deliberately selected comma-decimal grammar. It is not a universal parsing rule for every locale. Decide whether a trailing separator can be committed as an integer or requires completion; either choice should be explicit and tested. Do not repeatedly reformat the string while the person is typing.
Parse the whole input under one grammar
A permissive prefix parser can turn malformed text into a plausible number while ignoring its suffix. Validate the whole candidate and distinguish decimal separators from grouping separators. Replacing every comma with a dot is insufficient for grouped numbers or mixed input. Restricting the supported grammar is reasonable if the interface explains it.
Proposed commit boundary:
raw text → trim under explicit rule
→ validate complete supported numeric grammar
→ parse finite value
→ validate quantity and unit
→ commit once or show a field errorThe pipeline is illustrative and not an executed parser. Preserve null for a deliberately cleared optional nutrient rather than passing blank text through Number coercion. Explicit zero needs its own allowed meaning. A zero serving might be a valid edit, a request to remove an item or an invalid amount depending on the product contract.
Keep draft, unit and derived nutrients aligned
The reviewed UltraFit360 meal editor maps quantity and unit fields from backend shapes. That is data-shape context, not proof of locale-aware parsing. Its use of quantity fallbacks also deserves a separate check for zero and missing values before the field reaches a numeric control.
While the draft is incomplete, keep calculated nutrients tied to the last accepted quantity or show a clear preview-pending state. Do not recompute with zero on the first separator keystroke. Once committed, calculate from the original nutrient basis and update the item and daily summary consistently.
Test corrections as real user sequences
Acceptance should cover clearing and retyping, separator-first input, trailing separators, paste, grouping, mixed separators, negative values, nonfinite values and unit changes. Include caret position and selection behavior when formatting is applied. A parser unit test alone does not establish that the controlled field remains editable.
No exact fictional local form state was verified, so the researched screenshot becomes an editable-text-to-commit diagram. No mobile keyboard or parser implementation was executed. A useful next milestone is a supported-grammar worksheet followed by real form journeys on the target platforms, with fictional quantities and explicit expected commit outcomes.
Specify how cancellation leaves the field. Pressing Cancel should discard the draft and restore the last accepted quantity without recalculating the meal from an unfinished string. Navigation away needs an explicit keep-draft or discard policy. Test reopening a field after typing a separator and leaving without Save. The expected result should distinguish an unsaved draft from an accepted zero, and the daily summary should continue to reflect the accepted quantity throughout that interaction.
Fitness app localization development
Bring the supported devices, installed SDK versions and a reproducible lifecycle or UI failure to scope a mobile engineering assessment.
Explore react native development
Does a decimal keyboard make a nutrition input a valid number?
No. Treat input as editable text, parse at an explicit commit boundary and apply documented locale, unit and validation rules.
Should every onChangeText value be converted to a number?
No. Temporary blank or incomplete text needs to remain editable until the chosen commit boundary.