Want to show your love?

Table of Contents

• Table of Contents
• Installation
• Features
• Usage
• Props
• Methods
• FAQ
  • Is it supported and tested both on android and iOS?
  • NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?
• Contributing
  • Step 1
  • Step 2
  • Step 3
• Support
• License
• Hire

Installation

$ yarn add react-native-phone-number-input-with-country-code

OR

$ npm i react-native-phone-number-input-with-country-code --save

Features

• :iphone: Works with iOS and Android, Cross-platform :100:
• :crossed_flags: Built-in country picker (uses react-native-country-picker-modal)
• :wrench: Completely customizable UI!
• :heavy_check_mark: Proper validation (uses google-libphonenumber)

Props

• defaultCode?: CountryCode
• withDarkTheme?: boolean
• withShadow?: boolean
• autoFocus?: boolean
• defaultValue?: string
• value?: string
• disabled?: boolean
• disableArrowIcon?: boolean
• placeholder?: string;
• onChangeCountry?: (country: Country) => void;
• onChangeText?: (text: string) => void;
• onChangeFormattedText?: (text: string) => void;
• containerStyle?: StyleProp<ViewStyle>;
• textContainerStyle?: StyleProp<ViewStyle>;
• renderDropdownImage?: JSX.Element;
• textInputProps?: TextInputProps;
• textInputStyle?: StyleProp<TextStyle>;
• codeTextStyle?: StyleProp<TextStyle>;
• flagButtonStyle?: StyleProp<ViewStyle>;
• countryPickerButtonStyle : StyleProp<ViewStyle>;
• layout?: "first" | "second";
• filterProps?: CountryFilterProps;
• countryPickerProps?: any;

Methods

• getCountryCode: () => CountryCode
• getCallingCode: () => string | undefined
• getNumberAfterPossiblyEliminatingZero: () => {number: string , formattedNumber: string };
• isValidNumber: (number: string) => boolean

License

• MIT license