react-native-country-picker-modal

Country Picker for React Native.

| iOS | Android | Web |
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| | | |

Demo

- 🎉 GO TO WEB DEMO 🎉
- snack example

Installation

``bash
$ yarn add react-native-country-picker-modal
`

Basic Usage

For more complete example open App.tsx

`tsx
import React, { useState } from 'react'
import { View, Text, StyleSheet, PixelRatio, Switch } from 'react-native'
import CountryPicker from 'react-native-country-picker-modal'
import { CountryCode, Country } from './src/types'

const styles = StyleSheet.create({
// ...
})

export default function App() {
const [countryCode, setCountryCode] = useState('FR')
const [country, setCountry] = useState(null)
const [withCountryNameButton, setWithCountryNameButton] = useState(
false,
)
const [withFlag, setWithFlag] = useState(true)
const [withEmoji, setWithEmoji] = useState(true)
const [withFilter, setWithFilter] = useState(true)
const [withAlphaFilter, setWithAlphaFilter] = useState(false)
const [withCallingCode, setWithCallingCode] = useState(false)
const onSelect = (country: Country) => {
setCountryCode(country.cca2)
setCountry(country)
}
return (

Welcome to Country Picker !
title='With country name on button'
value={withCountryNameButton}
onValueChange={setWithCountryNameButton}
/>

title='With emoji'
value={withEmoji}
onValueChange={setWithEmoji}
/>
title='With filter'
value={withFilter}
onValueChange={setWithFilter}
/>
title='With calling code'
value={withCallingCode}
onValueChange={setWithCallingCode}
/>
title='With alpha filter code'
value={withAlphaFilter}
onValueChange={setWithAlphaFilter}
/>
{...{
countryCode,
withFilter,
withFlag,
withCountryNameButton,
withAlphaFilter,
withCallingCode,
withEmoji,
onSelect,
}}
visible
/>
Press on the flag to open modal
{country !== null && (
{JSON.stringify(country, null, 2)}
)}

)
}
`

Props

- countryCode: CountryCode
- region?:Region
- subregion?: Subregion
- countryCodes?: CountryCode
- theme?: Theme
- translation?: TranslationLanguageCode
- modalProps?: ModalProps
- filterProps?: CountryFilterProps
- flatListProps?: FlatListProps
- withAlphaFilter?: boolean
- withCallingCode?: boolean
- withCurrency?: boolean
- withEmoji?: boolean
- withCountryNameButton?: boolean
- withCurrencyButton?: boolean
- withCallingCodeButton?: boolean
- withFlagButton?: boolean
- withCloseButton?: boolean
- withFilter?: boolean
- withFlag?: boolean
- withModal?: boolean
- visible?: boolean
- containerButtonStyle?: StyleProp
- renderFlagButton?(props: (FlagButton['props'])): ReactNode (FlagButton props)
- renderCountryFilter?(props: CountryFilter['props']): ReactNode (CountryFilter props is TextInputProps)
- onSelect(country: Country): void (Country)
- onOpen(): void
- onClose(): void
- closeButtonImage?: ImageSourcePropType
- closeButtonStyle?: StyleProp
- closeButtonImageStyle?: StyleProp
- disableNativeModal?: boolean (you have to wrap your all app with CountryModalProvider)
- preferredCountries: CountryCode preferred countries they appear first (withAlphaFilter must be false)

Dark theme example

A simple example to display a CountryPicker component with a dark theme.

`tsx
import CountryPicker, { DARK_THEME } from 'react-native-country-picker-modal'

const MyDarkView = () =>
``

Dependencies

- world-countries : https://www.npmjs.com/package/world-countries

FAQ

$3

YES

$3

YES : It used the world-countries package and image is stored into json and base64.

Tiers lib using this lib

- react-native-phone-verification

> Your project?

See also

- react-native-linkedin

Contribution

- @xcapentier The main author.

Questions

Feel free to contact me or create an issue

> made with ♥

Licence

MIT

Hire an expert!

Looking for a ReactNative freelance expert with more than 12 years experience? Contact me from my website!