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
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
App.js
import React, { AppRegistry, Component, StyleSheet, Text, View, StatusBarIOS, PixelRatio } from 'react-native'; import CountryPicker from 'react-native-country-picker-modal'; class App extends Component { constructor(props){ StatusBarIOS.setHidden(true); super(props); this.state = { cca2: 'US' }; } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to Country Picker ! </Text> <CountryPicker onSelect={(value)=> this.setState({country: value, cca2: value.cca2})} cca2={this.state.cca2} translation='eng' /> <Text style={styles.instructions}> press on the flag </Text> {this.state.country && <Text style={styles.data}> {JSON.stringify(this.state.country, null, 2)} </Text> } </View> ); } } 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' } });
Props
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