react-native-phone-number-hint

Lightweight, permission-free phone number picker for React Native. Android uses Google's current Phone Number Hint API (Identity / play-services-auth). iOS gets autofill-friendly TextInput props. No contacts, phone, or SMS permissions. No third-party native wrappers.

A hint is not verification. After the user confirms the number, send OTP with your own auth flow.

Why this exists

Older React Native helpers wrap the deprecated credentials HintRequest API. This package calls GetPhoneNumberHintIntentRequest from Google Identity, autolinks as a TurboModule, and fails closed (null) when Play services, a SIM, or the user is missing.

Requirements

• React Native 0.76+ (New Architecture)
• Android minSdk 24, with Google Play services
• iOS: no native dependency; requestPhoneNumber() returns null

Installation

npm install react-native-phone-number-hint
# or
yarn add react-native-phone-number-hint

Rebuild the native app after install (npx pod-install is not required; there is no iOS native code).

Expo

This is a native Android module. It does not run in Expo Go. Use a development build or npx expo prebuild.

Usage

import { useState } from 'react';
import { Pressable, Text, TextInput } from 'react-native';
import {
  isPhoneNumberHintAvailable,
  phoneNumberInputProps,
  requestPhoneNumber,
} from 'react-native-phone-number-hint';

export function PhoneField() {
  const [phone, setPhone] = useState('');

  const onPick = async () => {
    const selected = await requestPhoneNumber();
    if (selected) setPhone(selected);
  };

  return (
    <>
      <TextInput
        {...phoneNumberInputProps}
        value={phone}
        onChangeText={setPhone}
        placeholder="Phone number"
      />
      <Pressable onPress={onPick}>
        <Text>Use phone number on this device</Text>
      </Pressable>
    </>
  );
}

// Optional: hide the picker button when the sheet cannot be shown.
void isPhoneNumberHintAvailable();

Call requestPhoneNumber() from a user gesture (button press). Normalize the returned string for your country before sending OTP.

API

| Export | Returns | Notes | | --- | --- | --- | | requestPhoneNumber() | Promise<string \| null> | Android sheet. Concurrent JS callers share one chooser. Cancel, error, iOS, and missing Play services resolve null. | | isPhoneNumberHintAvailable() | Promise<boolean> | true on Android when an Activity is active and Play services are available. This does not guarantee a number can be selected; the request can still return null. | | phoneNumberInputProps | TextInput props | autoComplete, textContentType, keyboardType, importantForAutofill. Uses iOS name-phone-pad (for name/phone entry) and Android phone-pad. iOS does not open a chooser sheet. |

This package never sends OTPs, authenticates, persists, or logs numbers.

Troubleshooting

| Symptom | What to check | | --- | --- | | Always null on Android | Physical device or emulator with Google Play, a signed-in Google account, and a phone number on the SIM / account | | Sheet never appears | Call from a tap handler while an Activity is in the foreground; wait for the previous request to finish | | Expo Go | Use a dev client / prebuild | | Play services version | Override with rootProject.ext.playServicesAuthVersion (default 22.0.0) |

Contributing

See CONTRIBUTING.md. Please follow the code of conduct.

License

MIT © Vikram Jangid Malani