Phase 9d · Tier B
RN-universal PhoneInput pilot
ScaffoldedCountry-code picker + national-number entry. Emits E.164 on every keystroke or country change. Composes RnCombobox (0.2.4) + TextInput. No new runtime dep — libphonenumber-js evaluated and rejected; in-house ~180-country data file covers the consumer use case.
Side-by-side: Sierra Leone default
shadcn (Combobox + native input)
Default country: Sierra Leone
E.164: +232
RN
Phone
Default country: Sierra Leone
E.164: +232
Default country = US (+1) — note +1684 disambiguation
The detector sorts dial codes longest-first so an E.164 starting with +1684 resolves to American Samoa, not the US.
Phone
E.164: +1
Error state + soft length validation
Type fewer than 10 digits in the UK number below and the helper line nudges (soft validation only — authoritative validation happens server-side).
Phone *
Phone number is required.
E.164: +44
Library decision
Per Phase 9 Q2, every Tier B primitive must record its library choice. RnPhoneInput ships with no new runtime dependency.
- libphonenumber-js@1.12.42 (MIT, ~16 M/wk) — evaluated and rejected. Universal parser, mature, would solve live international formatting. Rejected because the in-house ~180-country data file (
phone-input-data.ts, shipped inside the package) covers every TpEMIS use case today, and ~140 KB minified is significant for a bandwidth- constrained mobile-web audience. 0.3.x candidate if a consumer reports the missing live formatting. - awesome-phonenumber (~7 M/wk, MIT) — evaluated and rejected. Google's libphonenumber port; ~270 KB. Same blocker, larger bundle.
- react-native-phone-number-input (~150 k/wk, MIT) — evaluated and rejected. UI-kit wrapper around libphonenumber-js; pulls Material-styled components. Out of scope for a primitive.
- This implementation — composes already-shipped
RnCombobox(0.2.4) for the country picker plus aTextInputwithkeyboardType="phone-pad",autoComplete="tel", andtextContentType="telephoneNumber". Same shape as the existing showcasePhoneInput; no new bundle weight.
Semantics
| Aspect | shadcn (Combobox + input) | RN | Notes |
|---|---|---|---|
| Country picker | Combobox | RnCombobox (0.2.4) | Already shipped; same data file |
| Number input | native <input type="tel"> | TextInput keyboardType="phone-pad" | iOS surfaces the digit keypad; Android picks numeric |
| Autofill | autoComplete="tel" | autoComplete="tel" + textContentType | Native picks up OS contact-card autofill |
| Value format | E.164 (e.g. +23276123456) | E.164 | Same; emits on every keystroke |
| Validation | soft length (digit count) | soft length | Authoritative validation belongs server-side |
| Country detection | +1684 -> AS, +1 -> US | +1684 -> AS, +1 -> US | Longest dial code wins |
| Live formatting | no | no | Both raw digits in v1 |