Sunday, May 16, 2021

React Native Country Picker

 This tutorial explains how to implement country picker in react native mobile application. We will have a fully functional Country Picker with country flag image, phone code, alphabet filter, country search and more.

This component can be used in plenty of ways, as an example in a sign up form, where the user has to add his country and phone code, or within a social media profile fill up, where the user adds his country of origin. We are going to use "react-native-country-picker-modal" react native library to implement country picker

React Native Country Picker

For this example, we will have a simple select country button and a title text displaying the selected country. Once the select country button is clicker, the full React Native Country Picker will pop up with it’s props and functions.

Install  "react-native-country-picker-modal" package :

npm install react-native-country-picker-modal


import React, {
} from 'react-native';

import CountryPicker from 'react-native-country-picker-modal';

class App extends Component {
    this.state = {
      cca2: 'US'
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Country Picker !
          onSelect={(value)=> this.setState({country: value, cca2: value.cca2})}
        <Text style={styles.instructions}>
          press on the flag
        { &&
          <Text style={}>
            {JSON.stringify(, null, 2)}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  instructions: {
    fontSize: 12,
    textAlign: 'center',
    color: '#888',
    marginBottom: 5,
  data: {
    padding: 15,
    marginTop: 10,
    backgroundColor: '#ddd',
    borderColor: '#888',
    borderWidth: 1 / PixelRatio.get(),
    color: '#777'


1. cca2 :  code ISO 3166-1 alpha-2 (ie. FR, US, etc.)

2. translation  :  The language display for the name of the country (deu, fra, hrv, ita, jpn, nld, por, rus, spa, svk, fin, zho, cym)

3. onSelect :  The handler when a country is selected

4. closeable : If true, the CountryPicker will have a close button

This is all about react native country picker example. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.

No comments:

Post a Comment