react-native-region-picker-modal
Version:
404 lines (397 loc) • 5.98 kB
TypeScript
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[]