| iOS | Android | Web |
| ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| | | |
## Installation
```bash
$ yarn add @freqwency/react-native-country-picker
```
## Basic Usage
For more complete example open [App.tsx](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/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 !Press on the flag to open modal
{country !== null && (
{JSON.stringify(country, null, 2)}
)}
)
}
```
## Props
- `countryCode`: [CountryCode](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L252)
- `region?`:[Region](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L272)
- `subregion?`: [Subregion](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L282)
- `countryCodes?`: [CountryCode](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L254)
- `theme?`: [Theme](https://github.com/Freqwency/react-native-country-picker-modal/blob/7611d34fa35744dbec3fbcdd9b4401494b1ba8c4/src/CountryTheme.ts#L5)
- `translation?`: [TranslationLanguageCode](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L309)
- `modalProps?`: [ModalProps](https://facebook.github.io/react-native/docs/modal#props)
- `filterProps?`: [CountryFilterProps](https://facebook.github.io/react-native/docs/textinput#props)
- `flatListProps?`: [FlatListProps](https://facebook.github.io/react-native/docs/flatlist#props)
- `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](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/FlagButton.tsx#L73))
- `renderCountryFilter?`(props: CountryFilter['props']): ReactNode ([CountryFilter props is TextInputProps](https://facebook.github.io/react-native/docs/textinput#props))
- `onSelect`(country: Country): void ([Country](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L263))
- `onOpen`(): void
- `onClose`(): void
- `closeButtonImage?`: [ImageSourcePropType](https://facebook.github.io/react-native/docs/image#props)
- `closeButtonStyle?`: StyleProp
- `closeButtonImageStyle?`: StyleProp
- `disableNativeModal?`: boolean (you have to wrap your all app with CountryModalProvider)
- `preferredCountries`: [CountryCode](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/src/types.ts#L254) 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
### Is it supported and tested both on android and iOS?
YES
### Is the data that is populated inside the list saved offline once I install your package?
YES : It used the world-countries package and image is stored into json and base64.
## Contribution
- [@jadsalhani](mailto:support@jadsalhani.com) The main author.
## Questions
Feel free to [contact me](mailto:contact@jadsalhani.com) or [create an issue](https://github.com/Freqwency/react-native-country-picker-modal/issues/new)
> made with ♥
## Licence
[MIT](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/LICENSE.md)
| 
| 
|
## Installation
```bash
$ yarn add @freqwency/react-native-country-picker
```
## Basic Usage
For more complete example open [App.tsx](https://github.com/Freqwency/react-native-country-picker-modal/blob/master/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