rn-phonenumber-detector

Installation

yarn add rn-phonenumber-detector
# or
npm install rn-phonenumber-detector

Android Setup

Add to android/app/build.gradle:

dependencies {
    implementation 'com.google.android.gms:play-services-auth:21.0.0'
}

Then rebuild:

cd android && ./gradlew clean
cd ..
npx react-native run-android

That's it! Auto-linking handles the rest. ✅

Usage

Option 1 — Direct call (recommended)

Best when you already have your own hook or state management:

import { requestPhoneHint } from 'rn-phonenumber-detector';
import { Platform } from 'react-native';

const triggerPhoneHint = () => {
  if (Platform.OS !== 'android') return;

  requestPhoneHint()
    .then((number) => {
      // number comes as +91XXXXXXXXXX
      const stripped = number.replace(/^\+91/, '').trim();
      setInputValue(stripped); // wire to your input state
    })
    .catch(() => {
      // silent fail — user dismissed or no number found
    });
};

// call it when screen is focused
useEffect(() => {
  triggerPhoneHint();
}, []);

Option 2 — Hook

Best for simple use cases where you manage phone input directly:

import { usePhoneHint } from 'rn-phonenumber-detector';

const MyScreen = () => {
  const [inputValue, setInputValue] = useState('');

  const { triggerHint, loading } = usePhoneHint({
    countryCallingCode: '91',
    onSuccess: (number) => setInputValue(number),
    onError: () => {},
  });

  useEffect(() => {
    triggerHint();
  }, []);

  return (
    <TextInput
      value={inputValue}
      onChangeText={setInputValue}
      keyboardType="number-pad"
      textContentType="telephoneNumber"
      placeholder="Enter phone number"
    />
  );
};

iOS

No extra code needed. Just add these props to your TextInput:

<TextInput
  keyboardType="number-pad"
  textContentType="telephoneNumber"
/>

API

requestPhoneHint()

requestPhoneHint(): Promise<string>

| | | |---|---| | Returns | Promise<string> — full number e.g. +919876543210 | | Platform | Android only | | Fails | If user dismisses or no number found |

usePhoneHint(options)

Options:

| Option | Type | Default | Description | |---|---|---|---| | countryCallingCode | string | '91' | Strips country code prefix from result | | onSuccess | (number: string) => void | — | Called with stripped local number | | onError | (error: Error) => void | — | Called on failure or dismiss |

Returns:

| Value | Type | Description | |---|---|---| | phoneNumber | string | Auto-fetched local number | | loading | boolean | true while hint is being fetched | | error | string \| null | Error message if failed | | triggerHint | () => void | Call this to show the Google picker |

Platform Support

| Platform | Support | Method | |---|---|---| | Android | ✅ | Google Identity Hint API | | iOS | ✅ | textContentType='telephoneNumber' |

Notes

• Works only on real devices — not emulators
• Requires Google Play Services on Android
• Fails silently if no number found — user types manually
• Number format from requestPhoneHint: +91XXXXXXXXXX
• Number format from usePhoneHint onSuccess: XXXXXXXXXX (country code stripped)

Changelog

v1.0.7

• Added auto-linking support
• Improved README with complete usage docs
• Added more keywords for discoverability

v1.0.1

• Initial release
• Android Google Identity API support
• requestPhoneHint direct call
• usePhoneHint hook

Contributing

Contributions are welcome! Here's how:

1. Fork the repo
2. Create your branch:

git checkout -b feature/my-feature

3. Commit your changes:

git commit -m "add my feature"

4. Push to your branch:

git push origin feature/my-feature

5. Open a Pull Request on GitHub

Please make sure your code:

• Has no TypeScript errors (npm run build)
• Is tested on a real Android device
• Updates the README if needed

License

MIT © Madhurmeet Jadhav