xcarpentier/react-native-country-picker-modal


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

http://xcarpentier.github.io/react-native-country-picker-modal

License: MIT

Language: TypeScript

Keywords: countries, country-picker, modal, react-native


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<CountryCode>('FR')
  const [country, setCountry] = useState<Country>(null)
  const [withCountryNameButton, setWithCountryNameButton] = useState<boolean>(
    false
  )
  const [withFlag, setWithFlag] = useState<boolean>(true)
  const [withEmoji, setWithEmoji] = useState<boolean>(true)
  const [withFilter, setWithFilter] = useState<boolean>(true)
  const [withAlphaFilter, setWithAlphaFilter] = useState<boolean>(false)
  const [withCallingCode, setWithCallingCode] = useState<boolean>(false)
  const onSelect = (country: Country) => {
    setCountryCode(country.cca2)
    setCountry(country)
  }
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to Country Picker !</Text>
      <Option
        title="With country name on button"
        value={withCountryNameButton}
        onValueChange={setWithCountryNameButton}
      />
      <Option title="With flag" value={withFlag} onValueChange={setWithFlag} />
      <Option
        title="With emoji"
        value={withEmoji}
        onValueChange={setWithEmoji}
      />
      <Option
        title="With filter"
        value={withFilter}
        onValueChange={setWithFilter}
      />
      <Option
        title="With calling code"
        value={withCallingCode}
        onValueChange={setWithCallingCode}
      />
      <Option
        title="With alpha filter code"
        value={withAlphaFilter}
        onValueChange={setWithAlphaFilter}
      />
      <CountryPicker
        {...{
          countryCode,
          withFilter,
          withFlag,
          withCountryNameButton,
          withAlphaFilter,
          withCallingCode,
          withEmoji,
          onSelect
        }}
        visible
      />
      <Text style={styles.instructions}>Press on the flag to open modal</Text>
      {country !== null && (
        <Text style={styles.data}>{JSON.stringify(country, null, 2)}</Text>
      )}
    </View>
  )
}

Props

  • countryCode: CountryCode
  • region?:Region
  • subregion?: Subregion
  • countryCodes?: Subregion
  • 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<ViewStyle>
  • 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

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 = () => <CountryPicker theme={DARK_THEME} />

Dependencies

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!

Project Statistics

Sourcerank 12
Repository Size 12.1 MB
Stars 549
Forks 404
Watchers 12
Open issues 0
Dependencies 1,085
Contributors 54
Tags 23
Created
Last updated
Last pushed

Top Contributors See all

Xavier Carpentier Arthur Visser Pierre Carion Frank van der Hoek dbelchev Ivan Schurawel Tianrui Guo Vitalik7 Ray Ch Omar Diab dependabot[bot] Tuan Luong Youngsu Han Sean Holbert Ian Yu-Hsun Lin Pedro Mathias Nakibar Aleksey Israel Roth Sebastian Blank (◕ᴥ◕)

Packages Referencing this Repo

react-native-country-picker-modal
react-native country picker
Latest release 1.9.8 - Updated - 549 stars
ml-react-native-country-picker-modal
react-native country picker
Latest release 1.8.1 - Updated - 549 stars
@app2one/react-native-country-picker-modal
Country picker
Latest release 0.1.1 - Published - 549 stars
@mobilecards/mobilecards-react-native-country-picker-modal-master
Country picker
Latest release 1.0.0 - Published - 549 stars
react-native-country-picker-koodaa
Country picker
Latest release 0.5.0 - Published - 549 stars
sw-react-native-country-picker-modal
Country picker
Latest release 1.0.2 - Updated - 549 stars
react-native-country-picker-modal_fork
Country picker
Latest release 0.1.1 - Updated - 549 stars
mobilecards-react-native-country-picker-modal
Country picker
Latest release 0.7.2 - Updated - 549 stars
rn-country-picker-modal
Country picker
Latest release 1.0.2 - Updated - 549 stars
mobilecards-react-native-country-picker-modal-v2
Country picker
Latest release 0.8.0 - Published - 549 stars
nykolaydevico-react-native-country-picker-modal
Country picker
Latest release 0.8.0 - Updated - 549 stars
@andyto/react-native-country-picker-modal
Country picker
Latest release 0.5.2 - Updated - 549 stars

Recent Tags See all

v1.9.8 November 20, 2019
v1.9.3 November 15, 2019
v1.9.2 November 14, 2019
v1.9.1 November 14, 2019
v0.1.7 October 19, 2019
v0.7.1 February 06, 2019
v0.7.0 February 06, 2019
v0.6.2 June 29, 2018
v0.6.1 June 29, 2018
v0.6.0 June 22, 2018
v0.5.1 December 11, 2017
v0.5.0 December 06, 2017
v0.4.0 November 20, 2017
v0.3.0 June 30, 2017
v0.2.7 September 28, 2016

Interesting Forks See all

binzailani3136/react-native-country-picker-modal
🇫🇷 Country picker provides a modal allowing a user to select a country from a list. It display a ...
JavaScript - Updated - 2 stars
amestsantim/react-native-country-picker-modal
🇨🇭 Country picker provides a modal allowing a user to select a country from a list. It display a...
JavaScript - Last pushed - 1 stars - 1 forks
heyman333/react-native-country-picker-modal
🇨🇭 Country picker provides a modal allowing a user to select a country from a list. It display a...
JavaScript - Last pushed - 1 stars
393560589/react-native-country-picker-modal
🇨🇭 Country picker provides a modal allowing a user to select a country from a list. It display a ...
JavaScript - Updated - 1 stars
gameboyVito/react-native-country-picker-modal
🇫🇷 Country picker provides a modal allowing a user to select a country from a list. It display a ...
JavaScript - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-11-20 15:40:07 UTC

Login to resync this repository