react-native-country-code-select

This is a pure javascript library for selecting a country with search and filter functionality

This library is easy to use and provides you full customization, so you can customize component based on your need

🎬 Preview

Quick Access

Installation | CountryPicker | Methods | Properties | Example | License

Installation

1. Install library, react-native-reanimated and react-native-gesture-handler

$ npm install react-native-country-code-select react-native-reanimated react-native-gesture-handler
# --- or ---
$ yarn add react-native-country-code-select react-native-reanimated react-native-gesture-handler

2. Install cocoapods in the ios project

cd ios && pod install

Note: Make sure to wrap your root component / entry point with GestureHandleRootView

import { GestureHandlerRootView } from 'react-native-gesture-handler';
export default const App = () => {
  return <GestureHandlerRootView>{/* content */}</GestureHandlerRootView>;
}

Note: Make sure to add Reanimated's babel plugin to your babel.config.js

  module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

Know more about react-native-gesture-handler, react-native-reanimated

Compatibility

Only supports react-native 0.62+

CountryPicker

🎬 Preview

Basic usage

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { CountryPickerModal } from 'react-native-country-code-select';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

const App = () => {
  const [isVisible, setIsVisible] = useState(false);
  const [selectedValue, setSelectedValue] = useState({});
  return (
    <GestureHandlerRootView style={styles.container}>
      <View style={styles.viewStyle}>
        <Text style={styles.textView}>
          {JSON.stringify(selectedValue, null, 2)}
        </Text>
        <Text style={styles.separator}>{'-- --'}</Text>
        <TouchableOpacity
          activeOpacity={0.8}
          style={styles.selectCountryButton}
          onPress={() => setIsVisible((oldStatus) => !oldStatus)}
        >
          <Text style={styles.selectCountry}>Select Country</Text>
        </TouchableOpacity>
        <CountryPickerModal
          isVisible={isVisible}
          onClose={() => setIsVisible(false)}
          {...{ onSelect: setSelectedValue }}
        />
      </View>
    </GestureHandlerRootView>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#e6d7b8',
  },
  textView: {
    width: '60%',
    backgroundColor: '#261a08',
    padding: 20,
    borderWidth: 1,
    borderRadius: 20,
    overflow: 'hidden',
    color: '#ffffff',
    fontWeight: '500',
  },
  viewStyle: {
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  selectCountryButton: {
    width: '60%',
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 15,
    backgroundColor: '#261a08',
    borderRadius: 20,
  },
  selectCountry: {
    color: '#ffffff',
    fontWeight: 'bold',
    fontSize: 16,
  },
  separator: {
    marginVertical: 20,
    letterSpacing: 2,
    fontSize: 15,
    fontWeight: 'bold',
  },
});

Selected Country Data

{
  name: string;
  flag: string;
  countryInitials: string;
  region: string;
  subregion: string;
  callingCode: string[];
  currency: string[];
}

Methods

| Name | Default | Type | Description | | :------------- | :------ | :------- | :----------------------------------------------------------------- | | onClose* | - | function | Close modal callback function | | onSelect* | - | function | Select country callback function that returns the selected country |

Props

| Name | Default | Type | Description | | :---------------------------- | :-----------------------------------: | :------------------ | ----------------------------------------------------------- | | isVisible* | false | boolean | Hide / show country list modal | | customBackImageSource | Image | ImageSourcePropType | Custom close modal image source | | customBackImageStyle | {} | ImageStyle | Close modal image style | | isFlagVisible | true | boolean | If false, Country flag will be hidden | | isAlphabetsVisible | true | boolean | If false, Quick country fliter will be hidden | | headerSearchPlaceholder | "Enter Country" | string | Custom search placeholder text | | isSearchInputVisible | true | boolean | If false, Search input will be hidden | | renderCustomSearchInput | - | function | Render custom search input | | searchHeaderInputStyle | {} | ViewStyle | Search input style | | isCloseButtonVisible | false | boolean | If true, Modal close button will be visible | | searchHeaderProps | {} | TextInputProps | Search input props | | countryListTitleStyle | {} | TextStyle | Country name / title style | | modalContentStyle | {} | ViewStyle | Modal content style | | modalContainerStyle | {} | ViewStyle | Modal container style | | customRowStyle | {} | ViewStyle | Country list item / row style | | customAlphabetsStyles | {} | TextStyle | Quick filter (A-Z) text style | | customAlphabetContainerStyles | {} | ViewStyle | Quick filter (A-Z) container style | | emptyText | Oops, there is no country available | string | Custom message to show when there's no search result found | | emptyTextStyle | {} | TextStyle | Custom empty message style | | emptyContainerStyles | {} | ViewStyle | Custom empty message container style | | renderCustomEmptyComponent | - | function | Render custom component when there's no search result found | | customCloseButton | - | function | Render custom modal close button | | renderSearchInputClear | - | function | Render custom cancel image in search input | | handleStyle | {} | ViewStyle | View style to be applied to the handle bar component | | handleComponent | - | function | Render custom handle bar component |

Example

A full working example project is here Example

$ yarn
$ yarn example ios   // For ios
$ yarn example android   // For Android

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues, GitHub New Feature, GitHub Feedback

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

License

• MIT License