UNPKG

react-native-region-picker-modal

Version:
404 lines (397 loc) 5.98 kB
import { StyleProp, ViewStyle, ImageProps } from 'react-native' import * as React from 'react' /** * Country metadata stored in this library to display and query * `<CountryPicker />` */ export interface Country { currency: CurrencyCode callingCode: CallingCode flag: string name: { [key in TranslationLanguageCode]: string } cca2: CCA2Code } /** * Country code, as specified in ISO 3166-1 alpha-2 (ie. `FR`, `US`, etc.) */ export type CCA2Code = | 'AF' | 'AL' | 'DZ' | 'AS' | 'AD' | 'AO' | 'AI' | 'AQ' | 'AG' | 'AR' | 'AM' | 'AW' | 'AU' | 'AT' | 'AZ' | 'BS' | 'BH' | 'BD' | 'BB' | 'BY' | 'BE' | 'BZ' | 'BJ' | 'BM' | 'BT' | 'BO' | 'BA' | 'BW' | 'BV' | 'BR' | 'IO' | 'VG' | 'BN' | 'BG' | 'BF' | 'BI' | 'KH' | 'CM' | 'CA' | 'CV' | 'KY' | 'CF' | 'TD' | 'CL' | 'CN' | 'CX' | 'CC' | 'CO' | 'KM' | 'CK' | 'CR' | 'HR' | 'CU' | 'CW' | 'CY' | 'CZ' | 'CD' | 'DK' | 'DJ' | 'DM' | 'DO' | 'EC' | 'EG' | 'SV' | 'GQ' | 'ER' | 'EE' | 'ET' | 'FK' | 'FO' | 'FJ' | 'FI' | 'FR' | 'GF' | 'PF' | 'TF' | 'GA' | 'GM' | 'GE' | 'DE' | 'GH' | 'GI' | 'GR' | 'GL' | 'GD' | 'GP' | 'GU' | 'GT' | 'GG' | 'GN' | 'GW' | 'GY' | 'HT' | 'HM' | 'HN' | 'HK' | 'HU' | 'IS' | 'IN' | 'ID' | 'IR' | 'IQ' | 'IE' | 'IM' | 'IL' | 'IT' | 'CI' | 'JM' | 'JP' | 'JE' | 'JO' | 'KZ' | 'KE' | 'KI' | 'XK' | 'KW' | 'KG' | 'LA' | 'LV' | 'LB' | 'LS' | 'LR' | 'LY' | 'LI' | 'LT' | 'LU' | 'MO' | 'MK' | 'MG' | 'MW' | 'MY' | 'MV' | 'ML' | 'MT' | 'MH' | 'MQ' | 'MR' | 'MU' | 'YT' | 'MX' | 'FM' | 'MD' | 'MC' | 'MN' | 'ME' | 'MS' | 'MA' | 'MZ' | 'MM' | 'NA' | 'NR' | 'NP' | 'NL' | 'NC' | 'NZ' | 'NI' | 'NE' | 'NG' | 'NU' | 'NF' | 'KP' | 'MP' | 'NO' | 'OM' | 'PK' | 'PW' | 'PS' | 'PA' | 'PG' | 'PY' | 'PE' | 'PH' | 'PN' | 'PL' | 'PT' | 'PR' | 'QA' | 'CG' | 'RO' | 'RU' | 'RW' | 'RE' | 'BL' | 'KN' | 'LC' | 'MF' | 'PM' | 'VC' | 'WS' | 'SM' | 'SA' | 'SN' | 'RS' | 'SC' | 'SL' | 'SG' | 'SX' | 'SK' | 'SI' | 'SB' | 'SO' | 'ZA' | 'GS' | 'KR' | 'SS' | 'ES' | 'LK' | 'SD' | 'SR' | 'SJ' | 'SZ' | 'SE' | 'CH' | 'SY' | 'ST' | 'TW' | 'TJ' | 'TZ' | 'TH' | 'TL' | 'TG' | 'TK' | 'TO' | 'TT' | 'TN' | 'TR' | 'TM' | 'TC' | 'TV' | 'UG' | 'UA' | 'AE' | 'GB' | 'US' | 'UM' | 'VI' | 'UY' | 'UZ' | 'VU' | 'VA' | 'VE' | 'VN' | 'WF' | 'EH' | 'YE' | 'ZM' | 'ZW' | 'AX' /** * Calling code for a given country. For example, the entry for United States is * `1` (referring to "+1`") */ export type CallingCode = string /** * Currency code for a country, as specified in ISO 4217. For example, the entry * for United States is `USD` (referring to US Dollars) */ export type CurrencyCode = string /** * Language codes for available translations in this library */ export type TranslationLanguageCode = | 'common' | 'cym' | 'deu' | 'fra' | 'hrv' | 'ita' | 'jpn' | 'nld' | 'por' | 'rus' | 'spa' | 'svk' | 'fin' | 'zho' | 'isr' export enum FlagType { FLAT = 'flat', EMOJI = 'emoji' } export enum AnimationType { SLIDE = 'slide', FADE = 'fade', NONE = 'none' } export interface CountryPickerProps { /** * Country code, as specified in ISO 3166-1 alpha-2 (ie. `FR`, `US`, etc.) */ cca2: CCA2Code /** * The handler when a country is selected */ onChange: (value: Country) => void /** * Override any style specified in the component (see source code) */ styles?: StyleProp<ViewStyle> /** * If set to true, Country Picker List will show calling code after country name. For example: `United States (+1)` */ showCallingCode?: boolean /** * The handler when the close button is clicked */ onClose?: () => void /** * List of custom CCA2 countries to render in the list. Use getAllCountries to filter what you need if you want to pass in a custom list */ countryList?: CCA2Code[] /** * The language display for the name of the country */ translation?: TranslationLanguageCode /** * If true, the CountryPicker will have a close button */ closeable?: boolean /** * If true, the CountryPicker will have search bar */ filterable?: boolean /** * List of custom CCA2 countries you don't want to render */ excludeCountries?: CCA2Code[] /** * The search bar placeholder */ filterPlaceholder?: string /** * Whether or not the search bar should be autofocused */ autoFocusFilter?: boolean /** * Whether or not the Country Picker onPress is disabled */ disabled?: boolean /** * The search bar placeholder text color */ filterPlaceholderTextColor?: string /** * Custom close button Image */ closeButtonImage?: ImageProps['source'] /** * If true, the CountryPicker will render the modal over a transparent background */ transparent?: boolean /** * The handler that controls how the modal animates */ animationType?: AnimationType /** * If set, overwrites the default OS based flag type. */ flagType?: FlagType /** * If set to true, prevents the alphabet filter rendering */ hideAlphabetFilter?: boolean /** * If set, then country name will appear next to flag in the view */ showCountryNameWithFlag?: boolean /** * If 'filterable={true}' and renderFilter function is provided, render custom filter component.* */ renderFilter?: (args: { value: string onChange: CountryPickerProps['onChange'] onClose: CountryPickerProps['onClose'] }) => React.ReactNode } export default class CountryPicker extends React.Component<CountryPickerProps> { openModal: () => void } export function getAllCountries(): Country[]