The best Country Picker for React Native.
iOS | Android |
---|---|
- Install
react-native
first
$ npm i react-native -g
- Install the package
$ npm install react-native-country-picker-modal
- Initialization of a react-native project
$ react-native init myproject
- Then, edit
myproject/index.ios.js
, like this:
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
StatusBarIOS,
PixelRatio
} from 'react-native';
import CountryPicker from 'react-native-country-picker-modal';
class Example 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'
}
});
AppRegistry.registerComponent('example', () => Example);
Key | Type | Default | Description |
---|---|---|---|
cca2 | string | *required | code ISO 3166-1 alpha-2 (ie. FR, US, etc.) |
translation | string | 'eng' | The language display for the name of the country (deu, fra, hrv, ita, jpn, nld, por, rus, spa, svk, fin, zho, cym) |
onSelect | function | *required | The handler when a country is selected |
closeable | bool | false | If true, the CountryPicker will have a close button |
- world-countries : https://www.npmjs.com/package/world-countries
YES
YES : It used the world-countries package and image is stored into json and base64.
- @xcapentier The main author.
Feel free to contact me or create an issue
made with โฅ