react-native-country

This package provides a country selector with a search engine.

Example

Basic usage

import { CountrySelector } from "react-native-countries";

export default function App() {
  const [show, setShow] = useState(false);
  const [countryCode, setCountryCode] = useState('');
  const [flag, setFlag] = useState('');
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={() => setShow(true)}
        style={{
            width: '80%',
            height: 60,
            backgroundColor: 'white',
            padding: 10,
        }}
      >
        <Text style={{
            color: 'black',
            fontSize: 20
        }}>
            {countryCode ? 'Selected  country: ' + countryCode + ` ${flag}` : 'Click Here!'}
        </Text>
      </TouchableOpacity>

      {/* For showing picker just put show state to show prop */}
      <CountrySelector
        show={show}
        searchMessage={`No country was found`}
        onBackdropPress={() => setShow(false)}
        inputPlaceholder='Search for the country by name'
        // when selector button press you will get the country object with dial code
        selectorButtonOnPress={(item) => {
          setCountryCode(item.dial_code);
          setFlag(item.flag);
          setShow(false);
        }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

Props

Below are the props you can pass to the React Component.

| Prop | Type | Default | Example | Description | | -------------------------- | --------- | ------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | show | boolean | | | this prop is used to show/hide the modal. | | selectorButtonOnPress | function | | (country) => setCode(country.dial_code) | Put your function here to get the result of the selected country. | | inputPlaceholder | string | | inputPlaceholder={'Your placeholder'} | If you want a custom placeholder | | searchMessage | string | | searchMessage={'Some search message here'} | If you want a different message when you can't find a country | | lang | string | 'en' | lang={'pl'} | If you want to change the language, just 'en'/'es'. required lang just add them and make a PR :) | | enableModalAvoiding | boolean | false | enableModalAvoiding={true} | For the modal to avoid the keyboard androidWindowSoftInputMode with value pan, by default android will avoid keyboard by itself | | androidWindowSoftInputMode | string | | androidWindowSoftInputMode={'pan'} | Basically android bypasses the keyboard by itself, if you want to use the custom bypassing you can use this prop | | itemTemplate | ReactNode | CountryButton | itemTemplate={YourTemplateComponentsHere} | This parameter gets a React Node element to render as a template for each item in the list. These properties are sent to the element: key, element, style, name and onPress. | | style | Object | | style={{yoursStylesHere}} | If you want to change the styles of the components you probably need this props. You can check the styling part below. | | disableBackdrop | boolean | false | disableBackdrop | if you don't want to show the modal background pass this prop.| | onBackdropPress | function | null | onBackdropPress={() => setShow(false)} | If you want to close the modal by pressing outside the modal. | | initialState | string | | initialState={'+380'} | Sometimes it is necessary to pre-select the country, for example, because of the user's current location, so you can use this option. | | excludedCountries | array | | excludedCountries={['RU', 'AF']} | In this option you can define the list of countries to be deleted by adding their codes. |

You can also use all the other FlatList and TextInput props if you need to.

Styling

<CountrySelector
    show={show}
    lang={'es'}
    style={{
        // styles for the modal
        modal: {
            height: 800,
            backgroundColor: '#17bebb'
        },
        // Styles for modal backdrop [View]
        backdrop: {
        
        },
        // Styles for bottom input line [View]
        line: {
        
        },
        // Styles for list of countries [FlatList]
        itemsList: {
        
        },
        // Styles for input [TextInput]
        textInput: {
              height: 80,
              borderRadius: 0,
        },
        // Styles for country button [TouchableOpacity]
        countryButtonStyles: {
              height: 80
        },
        // Styles for search message [Text]
        searchMessageText: {

        },
        // Styles for search message container [View]
        countryMessageContainer: {
        
        },
        // Flag styles [Text]
        flag: {

        },
        // Dial code styles [Text]
        dialCode: {

        },
        // Country name styles [Text]
        countryName: {

        }
    }}
    selectorButtonOnPress={(item) => {
        setCountryCode(item.dial_code);
        setShow(false);
    }}
/>