Need help with react-native-country-picker-modal?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

xcarpentier
785 Stars 566 Forks MIT License 356 Commits 14 Opened issues

Description

🇦🇶 Country picker provides a modal allowing a user to select a country from a list. It display a flag next to each country name.

Services available

!
?

Need anything else?

Contributors list

# 4,815
TypeScr...
JavaScr...
React N...
iOS
209 commits
# 141,853
React
JavaScr...
Firebas...
TypeScr...
16 commits
# 213,311
TypeScr...
JavaScr...
countri...
country...
6 commits
# 159,336
React
Firebas...
React N...
Android
5 commits
# 226,799
C#
TypeScr...
countri...
country...
4 commits
# 98,436
React
React N...
PHP
topojso...
3 commits
# 270,765
TypeScr...
JavaScr...
countri...
country...
3 commits
# 233,955
country...
React N...
c-plus-...
ue4
3 commits
# 149,573
React
React N...
Android
iOS
2 commits
# 274,674
react-a...
React
React N...
HTML
2 commits
# 52,386
Objecti...
React N...
webrtc
C
2 commits
# 37,780
CSS
TypeScr...
sqlserv...
Electro...
2 commits
# 65,774
Objecti...
optical...
text-re...
React N...
2 commits
# 54,174
image-p...
Objecti...
TypeScr...
React N...
2 commits
# 53,467
React N...
Objecti...
webrtc
TypeScr...
2 commits
# 28,195
GitHub
Git
React N...
Markdow...
2 commits
# 239,556
JavaScr...
React N...
collaps...
TypeScr...
1 commit
# 33,526
HTML
cms-det...
reactjs
Shell
1 commit
# 301,807
TypeScr...
country...
React N...
imessag...
1 commit
# 370,215
TypeScr...
JavaScr...
countri...
country...
1 commit

Country Picker for React Native.

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

Demo

Installation

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

Basic Usage

For more complete example open App.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
  • 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

react-native-country-picker-modal-dark

A simple example to display a

CountryPicker
component with a dark theme.
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.

Tiers lib using this lib

> Your project?

See also

Contribution

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!

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.