@linhnguyen96114/react-native-phone-input NPM

✨ Features

📱 Cross-platform support (iOS & Android)
🎨 Highly customizable UI
🔍 Built-in country search
✅ Google LibPhoneNumber validation
🎯 TypeScript support
🔄 Two flexible layouts
🏳️ Country emoji flags support
📞 Automatic country detection
🎨 Dark theme support
🔧 Extensive API

🚀 Installation

# Using npm
npm i @linhnguyen96114/react-native-phone-input

# Using yarn
yarn add @linhnguyen96114/react-native-phone-input

# For iOS
cd ios && pod install

💡 Examples

Basic Usage

import PhoneInput from '@linhnguyen96114/react-native-phone-input';

const BasicExample = () => {
  const [value, setValue] = useState('');

  return (
    <PhoneInput
      defaultValue={value}
      defaultCode="US"
      onChangeText={setValue}
      withShadow
      autoFocus
    />
  );
};

Custom Styled Input

const CustomStyledExample = () => {
  const [value, setValue] = useState('');

  return (
    <PhoneInput
      defaultValue={value}
      defaultCode="US"
      onChangeText={setValue}
      containerStyle={{
        width: '100%',
        borderRadius: 30,
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 3,
        elevation: 3,
      }}
      textContainerStyle={{
        borderRadius: 30,
        backgroundColor: '#fff',
        paddingHorizontal: 15,
      }}
    />
  );
};

Dark Theme

const DarkThemeExample = () => {
  const [value, setValue] = useState('');

  return (
    <PhoneInput
      defaultValue={value}
      defaultCode="GB"
      onChangeText={setValue}
      withDarkTheme
      containerStyle={{
        backgroundColor: '#2A2A2A',
        borderRadius: 12,
      }}
      textContainerStyle={{
        backgroundColor: '#2A2A2A',
        borderRadius: 12,
      }}
      textInputStyle={{
        color: '#fff',
      }}
    />
  );
};

Form Integration with Validation

const FormExample = () => {
  const [value, setValue] = useState('');
  const [valid, setValid] = useState(false);
  const phoneInput = useRef<PhoneInputRefType>(null);

  const checkValidation = () => {
    const isValid = phoneInput.current?.isValidNumber(value);
    setValid(isValid || false);
  };

  return (
    <PhoneInput
      ref={phoneInput}
      defaultValue={value}
      defaultCode="FR"
      onChangeText={setValue}
      onChangeFormattedText={(text) => {
        console.log('Formatted:', text);
      }}
      containerStyle={{
        width: '100%',
        borderRadius: 8,
        borderWidth: 1,
        borderColor: valid ? '#4CAF50' : '#dee2e6',
      }}
    />
  );
};

🛠️ Props

Prop	Type	Description
`withDarkTheme`	`boolean`	Enable dark theme
`withShadow`	`boolean`	Add shadow effect
`autoFocus`	`boolean`	Auto focus input
`defaultCode`	`CountryCode`	Default country code
`defaultCallingCode`	`string`	Default calling code
`value`	`string`	Controlled input value
`defaultValue`	`string`	Default phone number value
`disabled`	`boolean`	Disable input
`disableArrowIcon`	`boolean`	Hide the dropdown arrow icon
`placeholder`	`string`	Input placeholder text
`onChangeCountry`	`(country: Country) => void`	Callback when country changes
`onChangeText`	`(text: string) => void`	Callback when input text changes
`onChangeFormattedText`	`(text: string) => void`	Callback with formatted phone number
`onBlur`	`() => void`	Callback when input loses focus
`onFocus`	`() => void`	Callback when input gains focus
`renderDropdownImage`	`JSX.Element`	Custom dropdown icon component
`containerStyle`	`StyleProp<ViewStyle>`	Container style
`textContainerStyle`	`StyleProp<ViewStyle>`	Text input container style
`textInputProps`	`TextInputProps`	Additional TextInput props
`textInputStyle`	`StyleProp<TextStyle>`	Text input style
`codeTextStyle`	`StyleProp<TextStyle>`	Country code text style
`flagButtonStyle`	`StyleProp<ViewStyle>`	Flag button container style
`countryPickerButtonStyle`	`StyleProp<ViewStyle>`	Country picker button style
`layout`	`"first" \\| "second"`	Layout style
`filterProps`	`CountryFilterProps`	Country filter props
`countryPickerProps`	`CountryPickerModalProps`	Country picker modal props
`flagSize`	`number`	Size of the country flag
`showCountryCode`	`boolean`	Show the country code

🔧 Methods

Method	Return Type	Description
`getCountryCode`	`CountryCode`	Get the currently selected country code
`getCallingCode`	`CallingCode \\| undefined`	Get the calling code for the selected country
`isValidNumber`	`boolean`	Validate if the provided phone number is valid
`getNumberAfterPossiblyEliminatingZero`	`{ number: string; formattedNumber: string; }`	Get the phone number with leading zero removed if present