Skip to content

xcarpentier/react-native-country-picker-modal

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

…ependencies (#440)

* Updating dependencies after Modal is supported by react native web

* Updating dependencies after Modal is supported by react native web

* Update package.json

Co-authored-by: Mike Hardy <github@mikehardy.net>

* Update package.json

Co-authored-by: Mike Hardy <github@mikehardy.net>
e1f8a45

Git stats

Files

Permalink
Failed to load latest commit information.

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?: 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<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
  • 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 = () => <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!