skip to content

In a React Native checkout form, which keyboardType would you give the postcode and phone fields, and how do iOS and Android differ?

level: juniorimportance: should knowfreq 50%

answer

  1. a hint for the keyboard, not validation
  2. seven values work on both platforms
  3. numeric differs: iOS decimal pad
  4. inputMode wins over keyboardType
  5. UK postcodes are not digits

basics

~20 s

Use phone-pad for the phone, and number-pad for a digits-only postcode such as a US ZIP, but the default keyboard with autoCapitalize="characters" for alphanumeric postcodes. Seven keyboardType values work on both platforms; the rest are iOS-only, plus Android's visible-password.

solid answer

~40 s

`keyboardType` picks which keyboard opens. `default`, `number-pad`, `decimal-pad`, `numeric`, `email-address`, `phone-pad` and `url` work on both platforms; `ascii-capable`, `numbers-and-punctuation`, `name-phone-pad`, `twitter` and `web-search` are iOS-only, and `visible-password` is Android-only. For the courier's phone use `phone-pad`. A postcode depends on the country: a US ZIP is digits, so `number-pad` fits, but UK or Canadian postcodes contain letters, so they need the default keyboard with `autoCapitalize="characters"`. `numeric` is a trap: iOS maps it to the decimal pad, while Android's allows a decimal point and a sign. `inputMode` is the web-style alternative and takes precedence over `keyboardType`. Either way it is only a hint: paste, autofill and hardware keyboards still deliver any text, so validate.

code

tsx · 18 lines
tsx
import {TextInput} from 'react-native';

export function PostcodeField({digitsOnly}: {digitsOnly: boolean}) {
  return digitsOnly ? (
    <TextInput placeholder="ZIP code" keyboardType="number-pad" maxLength={5} />
  ) : (
    <TextInput
      placeholder="Postcode"
      keyboardType="default"
      autoCapitalize="characters"
      autoCorrect={false}
    />
  );
}

export function CourierPhoneField() {
  return <TextInput placeholder="Phone for the courier" keyboardType="phone-pad" />;
}

go deeper

for a junior

Recall the cross-platform keyboardType values and pick sensible ones for phone, email and numeric fields.

for a middle

Explain the numeric, number-pad and decimal-pad differences per platform, inputMode's mapping and precedence, and why the keyboard is only a hint.

for a senior

Design fields per market, such as alphanumeric postcodes, validate independently of the keyboard, and account for the missing return key on iOS number pads.

for a principal

Weigh per-market field configuration and validation against a single global form, considering how many countries the checkout must serve.

## What keyboardType does `keyboardType` tells the platform which **on-screen keyboard** to show when a `TextInput` gains focus. It is a convenience for the user, not a constraint on the data: text can still arrive by paste, autofill or a hardware keyboard, so the value must be validated like any other input. ## Values and platforms | Values | Platforms | |---|---| | `default`, `number-pad`, `decimal-pad`, `numeric`, `email-address`, `phone-pad`, `url` | iOS and Android | | `ascii-capable`, `numbers-and-punctuation`, `name-phone-pad`, `twitter`, `web-search` | iOS only | | `visible-password` | Android only | A platform-only value on the other platform does not give you the keyboard you asked for, so cross-platform forms should stay in the first row or branch per platform. ## The numeric family Three values look interchangeable and are not: - **`number-pad`**: digits only. Right for a PIN, a quantity or a digits-only postcode. - **`decimal-pad`**: digits plus a decimal separator. Right for an amount such as a tip. - **`numeric`**: on **iOS** React Native maps it to the **decimal pad**; on **Android** it opens a number keyboard that also allows a **decimal point and a sign**. Using `numeric` for a whole-number field therefore offers a decimal key on both platforms and a minus sign on Android. Prefer `number-pad` or `decimal-pad`, which say what you mean. ## inputMode `inputMode` is the web-style prop, named after the HTML attribute: `none`, `text`, `decimal`, `numeric`, `tel`, `search`, `email`, `url`. React Native translates it to a keyboard type and it **takes precedence over `keyboardType`** when both are set. | `inputMode` | Keyboard it opens | |---|---| | `numeric` | `number-pad` | | `decimal` | `decimal-pad` | | `tel` | `phone-pad` | | `email` | `email-address` | | `search` | `web-search` on iOS, `default` on Android | | `none` | no on-screen keyboard | Note the naming clash: `inputMode="numeric"` opens the digits-only `number-pad`, whereas `keyboardType="numeric"` opens a pad with a decimal key. ## Choosing for the checkout form A grocery checkout collects a street address, an apartment or unit, a postcode and a phone number for the courier. 1. **Street address**: `default`, with `autoCapitalize="words"`. 2. **Apartment or unit**: `default`; units such as "4B" mix letters and digits. 3. **Postcode**: depends on the market. - Digits-only formats (a US ZIP code): `number-pad`. - Alphanumeric formats (UK, Canada, the Netherlands): `default` with `autoCapitalize="characters"` and `autoCorrect={false}`, because a number pad makes them impossible to type. 4. **Phone**: `phone-pad`, which includes the characters used in phone numbers. On iOS the number and phone pads have no return key, which affects how the user moves on from those fields. ## Props often confused with keyboardType - **`autoCapitalize`** (`'none'`, `'sentences'` by default, `'words'`, `'characters'`) sets the keyboard's shift behaviour; some keyboard types, such as `name-phone-pad`, do not support it. - **`autoCorrect`** (default `true`) turns suggestions and corrections on or off; switch it off for codes, postcodes and email addresses. - **`keyboardAppearance`** is iOS-only and picks a light or dark keyboard. - **`showSoftInputOnFocus`** decides whether focusing opens the on-screen keyboard at all; `inputMode="none"` has the same effect. - **Autofill hints** declare what the field means so the OS can suggest saved data; the keyboard type does not do this. ## Things keyboardType does not do - It does **not** filter pasted or autofilled text; validate on submit. - It does **not** format the value (spaces in a postcode, grouping in a phone number). - It does **not** set the autofill meaning of the field; that is a separate hint. - It does **not** parse numbers; the text is always a string, so convert and range-check amounts yourself.

  • In React Native, why is keyboardType="numeric" a poor choice for a whole-number quantity field?
    On iOS React Native maps `numeric` to the decimal pad, and on Android it opens a number keyboard that also allows a decimal point and a sign. Users can therefore type `1.5` or `-2` into a quantity. `number-pad` gives digits only on both platforms, which matches the data.
  • In React Native, does keyboardType="number-pad" guarantee a TextInput only ever contains digits?
    No. It only chooses the on-screen keyboard. Text can still arrive by paste, autofill or a hardware keyboard, so the value must be validated, for example by stripping non-digits on submit or rejecting it with an error message. `maxLength` can cap the length natively, but content rules are yours.

saying these in an interview costs you the question

  • keyboardType="number-pad" guarantees the value contains only digits.
  • keyboardType="numeric" and inputMode="numeric" open the same keyboard.
  • keyboardType="web-search" works the same on Android as on iOS.
  • A number-pad is fine for every country's postcode.
  • keyboardType wins when inputMode is also set.