### Start Example App Packager
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Starts the Metro server for the example application. This is necessary to run the example app.
```sh
yarn example start
```
--------------------------------
### Run Example App on Web
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Builds and runs the example application in a web browser.
```sh
yarn example web
```
--------------------------------
### Install react-native-phone-entry
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Install the library using npm or yarn.
```sh
npm install react-native-phone-entry
# or
yarn add react-native-phone-entry
```
--------------------------------
### Run Example App on iOS
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Builds and runs the example application on an iOS simulator or device.
```sh
yarn example ios
```
--------------------------------
### Run Example App on Android
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Builds and runs the example application on an Android device or emulator.
```sh
yarn example android
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Run this command in the root directory to install all project dependencies using Yarn workspaces.
```sh
yarn
```
--------------------------------
### Dark Theme Example for PhoneInput
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Demonstrates how to enable dark theme support for the PhoneInput component by dynamically controlling the enableDarkTheme prop based on user preference.
```tsx
import React, { useState } from 'react';
import { Switch, View } from 'react-native';
import { PhoneInput } from 'react-native-phone-entry';
export function DarkThemeExample() {
const [dark, setDark] = useState(false);
return (
);
}
```
--------------------------------
### Basic PhoneInput Component Usage
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Renders a flag button and country picker with a masked text input. Manages country and calling code state internally. Use onChangeText to get the E.164-prefixed phone number and isValidNumber for validation.
```tsx
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { PhoneInput, isValidNumber, type CountryCode, type CallingCode } from 'react-native-phone-entry';
export default function Screen() {
const [phoneNumber, setPhoneNumber] = useState('');
const [countryCode, setCountryCode] = useState('US');
const [callingCode, setCallingCode] = useState('+1');
return (
{/* ── Basic usage ─────────────────────────────────────────── */}
{
setPhoneNumber(text);
// text is always E.164-prefixed, e.g. "+12025550142"
console.log('valid:', isValidNumber(text, countryCode));
}}
onChangeCountry={(country) => {
setCountryCode(country.cca2);
setCallingCode(country.callingCode[0] || '');
}}
/>
{/* ── Advanced usage ───────────────────────────────────────── */}
}
countryPickerProps={{
withFilter: true,
withFlag: true,
withCountryNameButton: true,
withAlphaFilter: true,
}}
maskInputProps={{
placeholderFillCharacter: '_',
}}
flagProps={{ flagSize: 24 }}
dropDownImageProps={{ style: { tintColor: '#333' } }}
theme={{
containerStyle: styles.phoneContainer,
textInputStyle: styles.input,
flagButtonStyle: styles.flagButton,
codeTextStyle: styles.code,
dropDownImageStyle: styles.arrow,
enableDarkTheme: false,
}}
onChangeText={(text) => setPhoneNumber(text)}
onChangeCountry={(country) => setCountryCode(country.cca2)}
/>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 20, backgroundColor: '#fff' },
phoneContainer: { borderRadius: 8, borderWidth: 1, borderColor: '#ddd', height: 56 },
input: { fontSize: 16, color: '#111' },
flagButton: { paddingHorizontal: 8 },
code: { fontSize: 16, fontWeight: '600' },
arrow: { height: 14, width: 14 },
});
```
--------------------------------
### Publish New Version
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Uses release-it to handle version bumping, tagging, and publishing to npm. This script automates the release process.
```sh
yarn release
```
--------------------------------
### Verify New Architecture
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Check Metro logs for confirmation that the app is running with the new architecture. Look for 'fabric':true and 'concurrentRoot':true.
```sh
Running "PhoneEntryExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
```
--------------------------------
### Lint Project Files
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Runs ESLint to check for code style and potential errors. Use the --fix flag to automatically correct formatting issues.
```sh
yarn lint
```
```sh
yarn lint --fix
```
--------------------------------
### Run Unit Tests
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Executes the unit tests for the project using Jest.
```sh
yarn test
```
--------------------------------
### Type Check Project Files
Source: https://github.com/anday013/react-native-phone-entry/blob/main/CONTRIBUTING.md
Runs TypeScript to check for type errors in the project files.
```sh
yarn typecheck
```
--------------------------------
### Basic PhoneInput Usage
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Demonstrates basic usage of the PhoneInput component with default values and event handlers for text changes and country selection.
```jsx
export default function App() {
const [countryCode, setCountryCode] = useState < CountryCode > 'US';
return (
console.log(
'Phone number:',
text,
'isValidNumber:',
isValidNumber(text, countryCode)
)
}
onChangeCountry={(country) => {
console.log('Country:', country);
setCountryCode(country.cca2);
}}
/>
);
}
```
--------------------------------
### ensurePlusPrefix()
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
A utility function that guarantees a string begins with a '+'. It is used internally to normalize calling code strings into E.164 prefixes. Returns an empty string for `undefined` or empty input.
```APIDOC
## `ensurePlusPrefix()` — Normalize calling code strings
A small utility that guarantees a string begins with `+`. Used internally whenever raw unmasked digits from the text input need to be turned into an E.164 prefix. Returns an empty string for `undefined` or `''`.
```ts
import { ensurePlusPrefix } from 'react-native-phone-entry'; // not re-exported from index; use direct import
// Missing prefix → adds it
ensurePlusPrefix('1') // '+1'
ensurePlusPrefix('44') // '+44'
// Already prefixed → no change
ensurePlusPrefix('+994') // '+994'
// Falsy → empty string
ensurePlusPrefix(undefined) // ''
ensurePlusPrefix('') // ''
```
```
--------------------------------
### Import PhoneInput and isValidNumber
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Import the necessary components and functions from the library.
```jsx
import { PhoneInput, isValidNumber } from 'react-native-phone-entry';
```
--------------------------------
### Combine prefix and subscriber number with getFullPhoneNumber
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Joins a calling code prefix and a local subscriber number into a single E.164-style string. Ensures the '+' sign is present, adding it automatically if omitted.
```typescript
import { getFullPhoneNumber } from 'react-native-phone-entry'; // internal utility
getFullPhoneNumber('+1', '2025550142') // '+12025550142'
getFullPhoneNumber('1', '2025550142') // '+12025550142' (+ auto-added)
getFullPhoneNumber('+44', '7911123456') // '+447911123456'
getFullPhoneNumber('+1', '') // '+1'
```
--------------------------------
### Normalize Calling Code with ensurePlusPrefix
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
A utility function that guarantees a string begins with '+'. Returns an empty string for `undefined` or `''`. Use direct import as it's not re-exported from the index.
```javascript
import { ensurePlusPrefix } from 'react-native-phone-entry'; // not re-exported from index; use direct import
// Missing prefix → adds it
ensurePlusPrefix('1') // '+1'
ensurePlusPrefix('44') // '+44'
// Already prefixed → no change
ensurePlusPrefix('+994') // '+994'
// Falsy → empty string
ensurePlusPrefix(undefined) // ''
ensurePlusPrefix('') // ''
```
--------------------------------
### usePhoneInput()
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
A headless hook that manages the internal state for a phone input component. It handles country code, calling code, phone number, mask, and modal visibility, and exposes necessary actions.
```APIDOC
## usePhoneInput()
### Description
An internal state hook that drives the `` component. It manages `countryCode`, `callingCode`, `phoneNumber`, `mask`, modal visibility, and provides `handleChangeText` and `onSelect` actions. This hook can be used directly to build custom phone input UIs.
### Parameters
- **options** (object) - Configuration options for the hook.
- `defaultValues` (object) - Initial values for the input.
- `countryCode` (CountryCode) - Default country code (e.g., 'US').
- `callingCode` (CallingCode) - Default calling code (e.g., '+1').
- `phoneNumber` (string) - Default phone number.
- `isCallingCodeEditable` (boolean) - Whether the calling code input is editable.
- `onChangeText` (function) - Callback function when the phone number text changes.
- `onChangeCountry` (function) - Callback function when the country changes.
### Returns
- An object containing `models`, `actions`, and `forms`.
- `models` (object): Current state values.
- `countryCode` (CountryCode): The selected country code.
- `callingCode` (CallingCode): The selected calling code.
- `phoneNumber` (string): The current phone number.
- `mask` (Mask): The current mask array for input.
- `inputRef` (React.MutableRefObject): Ref for the input element.
- `actions` (object): Functions to interact with the hook.
- `onSelect` (function): Handles country selection.
- `handleChangeText` (function): Handles text input changes.
- `setMask` (Dispatch>): Function to manually set the mask.
- `forms` (object): State and actions for modal visibility.
- `modalVisible` (boolean): Whether the country selection modal is visible.
- `showModal` (function): Shows the country selection modal.
- `hideModal` (function): Hides the country selection modal.
### Examples
```tsx
import { renderHook, act } from '@testing-library/react-hooks';
import type { Country, CountryCode } from 'react-native-country-picker-modal';
import { usePhoneInput } from 'react-native-phone-entry/src/PhoneInput/usePhoneInput';
// Using the hook directly
function CustomPhoneInput() {
const {
models: { countryCode, callingCode, phoneNumber, mask, inputRef },
actions: { handleChangeText, onSelect },
forms: { modalVisible, showModal, hideModal },
} = usePhoneInput({
defaultValues: {
countryCode: 'US',
callingCode: '+1',
phoneNumber: '+1',
},
isCallingCodeEditable: false,
onChangeText: (text) => console.log('number:', text),
onChangeCountry: (country) => console.log('country:', country.name),
});
// countryCode → 'US'
// callingCode → '+1'
// phoneNumber → '+1'
// modalVisible → false
// mask → MaskArray for US
return null; // attach to your own UI
}
// Auto-detect country from typed calling code
act(() => {
const { result } = renderHook(() => usePhoneInput({}));
result.current.actions.handleChangeText('+1', '1', '+1');
// result.current.models.countryCode === 'US'
// result.current.models.mask === getFullMaskPhoneNumber('+1', 'US')
});
```
```
--------------------------------
### getFullPhoneNumber()
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Combines a calling code prefix and a local subscriber number into a single E.164-style string, ensuring the '+' sign is present. It handles cases where the prefix might or might not include the '+'.
```APIDOC
## getFullPhoneNumber()
### Description
Joins a calling code prefix and a local subscriber number into a single E.164-style string, ensuring the `+` sign is present.
### Parameters
- **prefix** (string) - The calling code prefix (e.g., '+1' or '1').
- **subscriberNumber** (string) - The local subscriber number.
### Returns
- (string) - The combined phone number in E.164 format (e.g., '+12025550142').
### Examples
```ts
import { getFullPhoneNumber } from 'react-native-phone-entry';
getFullPhoneNumber('+1', '2025550142') // '+12025550142'
getFullPhoneNumber('1', '2025550142') // '+12025550142' (+ auto-added)
getFullPhoneNumber('+44', '7911123456') // '+447911123456'
getFullPhoneNumber('+1', '') // '+1'
```
```
--------------------------------
### Advanced PhoneInput Usage with Customization
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Shows advanced usage of PhoneInput with custom default values, explicit value prop, event handlers, autoFocus, disabled state, country picker props, theme customization, and other options.
```jsx
console.log('Phone number:', text)}
onChangeCountry={(country) => console.log('Country:', country)}
autoFocus={true}
disabled={false}
countryPickerProps={{
withFilter: true,
withFlag: true,
withCountryNameButton: true,
}}
theme={{
containerStyle: styles.phoneContainer,
textInputStyle: styles.input,
flagButtonStyle: styles.flagButton,
codeTextStyle: styles.codeText,
dropDownImageStyle: styles.dropDownImage,
enableDarkTheme: false,
}}
hideDropdownIcon={false}
isCallingCodeEditable={false}
/>
```
--------------------------------
### Map Calling Code to Country Code
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Use CALLING_CODE_PER_COUNTRY_CODE to map E.164 calling codes to their primary ISO 3166-1 alpha-2 country codes. This is useful for the autopick feature.
```typescript
import { CALLING_CODE_PER_COUNTRY_CODE } from 'react-native-phone-entry';
CALLING_CODE_PER_COUNTRY_CODE['+1'] // 'US'
CALLING_CODE_PER_COUNTRY_CODE['+44'] // 'GB'
CALLING_CODE_PER_COUNTRY_CODE['+994'] // 'AZ'
CALLING_CODE_PER_COUNTRY_CODE['+81'] // 'JP'
CALLING_CODE_PER_COUNTRY_CODE['+86'] // 'CN'
// Lookup country from a typed prefix:
function detectCountry(input: string) {
return CALLING_CODE_PER_COUNTRY_CODE[input] ?? null;
}
detectCountry('+49') // 'DE'
detectCountry('+999') // null (unknown)
```
--------------------------------
### Manage phone input state with usePhoneInput hook
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
The headless hook that manages state for phone number inputs, including country code, calling code, phone number, mask, and modal visibility. It can be used to build custom UI components.
```tsx
import { renderHook, act } from '@testing-library/react-hooks';
import type { Country, CountryCode } from 'react-native-country-picker-modal';
import { usePhoneInput } from 'react-native-phone-entry/src/PhoneInput/usePhoneInput';
// ── Using the hook directly ──────────────────────────────────────
function CustomPhoneInput() {
const {
models: { countryCode, callingCode, phoneNumber, mask, inputRef },
actions: { handleChangeText, onSelect },
forms: { modalVisible, showModal, hideModal },
} = usePhoneInput({
defaultValues: {
countryCode: 'US',
callingCode: '+1',
phoneNumber: '+1',
},
isCallingCodeEditable: false,
onChangeText: (text) => console.log('number:', text),
onChangeCountry: (country) => console.log('country:', country.name),
});
// countryCode → 'US'
// callingCode → '+1'
// phoneNumber → '+1'
// modalVisible → false
// mask → MaskArray for US
return null; // attach to your own UI
}
// ── Hook return shape ────────────────────────────────────────────
// {
// models: {
// countryCode: CountryCode,
// callingCode: CallingCode,
// phoneNumber: string,
// mask: Mask, // MaskArray from react-native-mask-input
// inputRef: React.MutableRefObject
// },
// actions: {
// onSelect: (country: Country) => void,
// handleChangeText: (masked: string, unmasked: string, obfuscated: string) => void,
// setMask: React.Dispatch>
// },
// forms: {
// modalVisible: boolean,
// showModal: () => void,
// hideModal: () => void,
// }
// }
// ── Auto-detect country from typed calling code ──────────────────
// When handleChangeText receives '+1', the hook automatically sets
// countryCode → 'US' and rebuilds the mask:
act(() => {
const { result } = renderHook(() => usePhoneInput({}));
result.current.actions.handleChangeText('+1', '1', '+1');
// result.current.models.countryCode === 'US'
// result.current.models.mask === getFullMaskPhoneNumber('+1', 'US')
});
```
--------------------------------
### PhoneInputProps
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Complete TypeScript type for all props accepted by the `` component. This includes props for default values, controlled values, event handlers, styling, and pass-through props to underlying components.
```APIDOC
## `PhoneInputProps` — Prop reference
Complete TypeScript type for all props accepted by ``.
```ts
import type {
ImageProps, ImageStyle, StyleProp, TextStyle, ViewStyle,
} from 'react-native';
import type {
CallingCode, Country, CountryCode, Flag,
} from 'react-native-country-picker-modal';
import type { MaskInputProps } from 'react-native-mask-input';
import CountryPicker from 'react-native-country-picker-modal';
type PhoneInputProps = {
// Pre-fill country, calling code, and/or phone number on mount
defaultValues?: {
countryCode: CountryCode; // e.g. 'US'
callingCode: CallingCode; // e.g. '+1'
phoneNumber: string; // e.g. '+1'
};
// Controlled value (overrides internal state for the text input)
value?: string;
// Fires with the raw E.164-prefixed string on every keystroke
onChangeText?: (text: string) => void;
// Fires when the user picks a different country from the modal
onChangeCountry?: (country: Country) => void;
autoFocus?: boolean; // default: false
disabled?: boolean; // default: false
// Pass-through props to react-native-country-picker-modal
countryPickerProps?: Partial[0]>;
// Pass-through props to react-native-mask-input
maskInputProps?: MaskInputProps;
// Styling & theming
theme?: {
containerStyle?: StyleProp;
textInputStyle?: StyleProp;
codeTextStyle?: StyleProp;
flagButtonStyle?: StyleProp;
dropDownImageStyle?: StyleProp;
enableDarkTheme?: boolean; // default: follows system color scheme
};
hideDropdownIcon?: boolean; // default: false
renderCustomDropdown?: JSX.Element; // replaces built-in arrow image
flagProps?: Parameters[0];
dropDownImageProps?: ImageProps;
// When false, user cannot delete/change the calling code digits
isCallingCodeEditable?: boolean; // default: true
};
```
```
--------------------------------
### Build MaskArray for a country with getFullMaskPhoneNumber
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Constructs a react-native-mask-input-compatible MaskArray for a given country code. This array is used as the `mask` prop for input components.
```typescript
import { getFullMaskPhoneNumber, MASK_PER_COUNTRY } from 'react-native-phone-entry';
// US: +1 (XXX) XXX-XXXX
const usMask = getFullMaskPhoneNumber('+1', 'US');
// → ['+', /\d/, ' ', '(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// Azerbaijan: +994 XX-XXX-XX-XX
const azMask = getFullMaskPhoneNumber('+994', 'AZ');
// → ['+', /\d/, /\d/, /\d/, ' ', /\d/, /
// Supply the mask directly to MaskInput when building a custom input
import MaskInput from 'react-native-mask-input';
console.log(masked, unmasked)}
/>
```
--------------------------------
### Access per-country mask definitions with MASK_PER_COUNTRY
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Provides a record mapping country codes to their respective MaskArrays. Useful for custom input implementations or extending default masks.
```typescript
import { MASK_PER_COUNTRY } from 'react-native-phone-entry';
// US → '(XXX) XXX-XXXX'
console.log(MASK_PER_COUNTRY.US);
// ['(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// AZ → 'XX-XXX-XX-XX'
console.log(MASK_PER_COUNTRY.AZ);
// [/
// FR → 'X XX XX XX XX'
console.log(MASK_PER_COUNTRY.FR);
// [/
// Check if a country has a defined mask before using it
const mask = MASK_PER_COUNTRY['DE'];
if (mask) {
console.log('Germany mask:', mask);
// [/
}
```
--------------------------------
### isValidNumber()
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Validates a full phone number string against a given ISO 3166-1 alpha-2 country code using Google's `libphonenumber`. Returns `true` only when the number is structurally valid for that country. Exceptions from the underlying parser are caught and return `false`.
```APIDOC
## `isValidNumber()` — Phone number validation
Validates a full phone number string against a given ISO 3166-1 alpha-2 country code using Google's `libphonenumber`. Returns `true` only when the number is structurally valid for that country. Exceptions from the underlying parser are caught and return `false`.
```ts
import { isValidNumber } from 'react-native-phone-entry';
// Valid US number → true
console.log(isValidNumber('+12025550142', 'US')); // true
// Too short → false
console.log(isValidNumber('+1202', 'US')); // false
// Wrong country context → false
console.log(isValidNumber('+447911123456', 'US')); // false
// Valid UK number → true
console.log(isValidNumber('+447911123456', 'GB')); // true
// Garbage input never throws, just returns false
console.log(isValidNumber('not-a-number', 'DE')); // false
// ------------------------------------------------------------------
// Real-world usage: live validation inside a form
import React, { useState } from 'react';
import { Text } from 'react-native';
import { PhoneInput, isValidNumber, type CountryCode } from 'react-native-phone-entry';
export function ValidatedPhoneField() {
const [phone, setPhone] = useState('');
const [country, setCountry] = useState('US');
const valid = phone.length > 4 && isValidNumber(phone, country);
return (
<>
setCountry(c.cca2)}
theme={{
containerStyle: {
borderColor: valid ? '#4CAF50' : '#f44336',
borderWidth: 1,
borderRadius: 8,
},
}}
/>
{phone ? (valid ? '✓ Valid number' : '✗ Invalid number') : ''}
);
}
```
```
--------------------------------
### getFullMaskPhoneNumber()
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Constructs a `react-native-mask-input`-compatible `MaskArray` by concatenating digit slots for the calling code with the country-specific mask. This is used as the `mask` prop of the internal `` component.
```APIDOC
## getFullMaskPhoneNumber()
### Description
Builds a `react-native-mask-input`-compatible `MaskArray` for a given country code and calling code. This mask can be directly used with the `react-native-mask-input` library.
### Parameters
- **callingCode** (string) - The international calling code (e.g., '+1', '+44').
- **countryCode** (string) - The ISO 3166-1 alpha-2 country code (e.g., 'US', 'GB', 'AZ').
### Returns
- (MaskArray) - A `MaskArray` compatible with `react-native-mask-input`.
### Examples
```ts
import { getFullMaskPhoneNumber, MASK_PER_COUNTRY } from 'react-native-phone-entry';
// US: +1 (XXX) XXX-XXXX
const usMask = getFullMaskPhoneNumber('+1', 'US');
// → ['+', /\d/, ' ', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// Azerbaijan: +994 XX-XXX-XX-XX
const azMask = getFullMaskPhoneNumber('+994', 'AZ');
// → ['+', /\d/, /\d/, /\d/, ' ', /\d/, /
// Supply the mask directly to MaskInput when building a custom input
import MaskInput from 'react-native-mask-input';
console.log(masked, unmasked)}
/>
```
```
--------------------------------
### PhoneInputProps TypeScript Type Definition
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Defines all available props for the PhoneInput component, including options for default values, controlled input, event handlers, and theming.
```typescript
import type {
ImageProps, ImageStyle, StyleProp, TextStyle, ViewStyle,
} from 'react-native';
import type {
CallingCode, Country, CountryCode, Flag,
} from 'react-native-country-picker-modal';
import type { MaskInputProps } from 'react-native-mask-input';
import CountryPicker from 'react-native-country-picker-modal';
type PhoneInputProps = {
// Pre-fill country, calling code, and/or phone number on mount
defaultValues?: {
countryCode: CountryCode; // e.g. 'US'
callingCode: CallingCode; // e.g. '+1'
phoneNumber: string; // e.g. '+1'
};
// Controlled value (overrides internal state for the text input)
value?: string;
// Fires with the raw E.164-prefixed string on every keystroke
onChangeText?: (text: string) => void;
// Fires when the user picks a different country from the modal
onChangeCountry?: (country: Country) => void;
autoFocus?: boolean; // default: false
disabled?: boolean; // default: false
// Pass-through props to react-native-country-picker-modal
countryPickerProps?: Partial[0]>;
// Pass-through props to react-native-mask-input
maskInputProps?: MaskInputProps;
// Styling & theming
theme?: {
containerStyle?: StyleProp;
textInputStyle?: StyleProp;
codeTextStyle?: StyleProp;
flagButtonStyle?: StyleProp;
dropDownImageStyle?: StyleProp;
enableDarkTheme?: boolean; // default: follows system color scheme
};
hideDropdownIcon?: boolean; // default: false
renderCustomDropdown?: JSX.Element; // replaces built-in arrow image
flagProps?: Parameters[0];
dropDownImageProps?: ImageProps;
// When false, user cannot delete/change the calling code digits
isCallingCodeEditable?: boolean; // default: true
};
```
--------------------------------
### MASK_PER_COUNTRY
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
A record mapping supported `CountryCode` values to their respective `MaskArray` definitions. This is useful for custom input implementations or extending default masks.
```APIDOC
## MASK_PER_COUNTRY
### Description
A record mapping every supported `CountryCode` to a `MaskArray`. This object is useful when building custom phone input UIs or extending the default masks provided by the library.
### Usage
Access the mask for a specific country code directly from the `MASK_PER_COUNTRY` object.
### Examples
```ts
import { MASK_PER_COUNTRY } from 'react-native-phone-entry';
// US → '(XXX) XXX-XXXX'
console.log(MASK_PER_COUNTRY.US);
// → ['(', /\d/, /\d/, /\d/, ')', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
// AZ → 'XX-XXX-XX-XX'
console.log(MASK_PER_COUNTRY.AZ);
// → [/
// FR → 'X XX XX XX XX'
console.log(MASK_PER_COUNTRY.FR);
// → [/
// Check if a country has a defined mask before using it
const mask = MASK_PER_COUNTRY['DE'];
if (mask) {
console.log('Germany mask:', mask);
// → [/
}
```
```
--------------------------------
### Validate Phone Number with isValidNumber
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
Validates a full phone number string against a given ISO 3166-1 alpha-2 country code. Returns `true` only when the number is structurally valid for that country. Exceptions are caught and return `false`.
```javascript
import { isValidNumber } from 'react-native-phone-entry';
// Valid US number → true
console.log(isValidNumber('+12025550142', 'US')); // true
// Too short → false
console.log(isValidNumber('+1202', 'US')); // false
// Wrong country context → false
console.log(isValidNumber('+447911123456', 'US')); // false
// Valid UK number → true
console.log(isValidNumber('+447911123456', 'GB')); // true
// Garbage input never throws, just returns false
console.log(isValidNumber('not-a-number', 'DE')); // false
```
```javascript
import React, { useState } from 'react';
import { Text } from 'react-native';
import { PhoneInput, isValidNumber, type CountryCode } from 'react-native-phone-entry';
export function ValidatedPhoneField() {
const [phone, setPhone] = useState('');
const [country, setCountry] = useState('US');
const valid = phone.length > 4 && isValidNumber(phone, country);
return (
<>
setCountry(c.cca2)}
theme={{
containerStyle: {
borderColor: valid ? '#4CAF50' : '#f44336',
borderWidth: 1,
borderRadius: 8,
},
}}
/>
{phone ? (valid ? '✓ Valid number' : '✗ Invalid number') : ''}
);
}
```
--------------------------------
### isValidNumber Utility Function
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Validates a phone number for a specific country using Google's libphonenumber.
```APIDOC
## isValidNumber
### Description
Validates a phone number for a specific country using Google's libphonenumber.
### Signature
`isValidNumber(phoneNumber: string, countryCode: string): boolean`
### Parameters
#### Path Parameters
- **phoneNumber** (string) - Required - The phone number to validate.
- **countryCode** (string) - Required - The ISO country code (e.g., 'US').
### Request Example
```jsx
import { isValidNumber } from 'react-native-phone-entry';
const isValid = isValidNumber('+1234567890', 'US');
```
```
--------------------------------
### Validate Phone Number with isValidNumber
Source: https://github.com/anday013/react-native-phone-entry/blob/main/README.md
Use the `isValidNumber` utility to validate a phone number against a specific country code. Ensure you import the function from 'react-native-phone-entry'.
```jsx
import { isValidNumber } from 'react-native-phone-entry';
const isValid = isValidNumber('+1234567890', 'US');
```
--------------------------------
### Filter Excluded Countries
Source: https://context7.com/anday013/react-native-phone-entry/llms.txt
EXCLUDED_COUNTRIES is an array of CountryCode values removed from the country picker modal by default. You can override this behavior using countryPickerProps.excludeCountries.
```typescript
import { EXCLUDED_COUNTRIES } from 'react-native-phone-entry';
// Default excluded list (sample):
// ['AQ', 'BV', 'TF', 'HM', 'UM', 'SX', 'PM', 'TK', 'PN', ...]
console.log(EXCLUDED_COUNTRIES.includes('AQ')); // true
```
```jsx
```
```jsx
import { EXCLUDED_COUNTRIES } from 'react-native-phone-entry';
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.