1.1.0 • Published 4 years ago

react-native-country-picker-modal-vcf v1.1.0

Weekly downloads
3
License
MIT
Repository
github
Last release
4 years ago

NPM version Downloads Circle CI codecov

Support me with a Follow

react-native-country-picker-modal

The best Country Picker for React Native.

iOSAndroid
npm.ionpm.io

Demo on Expo

npm.io

Installation

$ npm i react-native-country-picker-modal --save

or

$ yarn add react-native-country-picker-modal

Basic Usage

  • Install react-native first
$ npm i react-native -g
  • Initialization of a react-native project
$ react-native init myproject
  • Then, edit myproject/index.ios.js, like this:
import DeviceInfo from 'react-native-device-info';

import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  StatusBarIOS,
  PixelRatio
} from 'react-native';
import CountryPicker, {getAllCountries} from 'react-native-country-picker-modal';

const NORTH_AMERICA = ['CA', 'MX', 'US'];

class Example extends Component {
  constructor(props){
    StatusBarIOS.setHidden(true);
    super(props);
    let userLocaleCountryCode = DeviceInfo.getDeviceCountry();
    const userCountryData = getAllCountries()
      .filter((country) => NORTH_AMERICA.includes(country.cca2))
      .filter((country) => country.cca2 === userLocaleCountryCode).pop();
    let callingCode = null;
    let cca2 = userLocaleCountryCode;
    if (!cca2 || !userCountryData) {
      cca2 = 'US';
      callingCode = '1';
    } else {
      callingCode = userCountryData.callingCode;
    }
    this.state = {
      cca2,
      callingCode
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to Country Picker !
        </Text>
        <CountryPicker
          countryList={NORTH_AMERICA}
          onChange={(value)=> {
            this.setState({cca2: value.cca2, callingCode: value.callingCode});
          }}
          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);

Props

KeyTypeDefaultDescription
cca2string*requiredcode ISO 3166-1 alpha-2 (ie. FR, US, etc.)
translationstring'eng'The language display for the name of the country (deu, fra, hrv, ita, jpn, nld, por, rus, spa, svk, fin, zho, cym)
onChangefunction*requiredThe handler when a country is selected
onClosefunction*requiredThe handler when the close button is clicked
countryListarraySee cca2.jsonList of custom CCA2 countries to render in the list. Use getAllCountries to filter what you need if you want to pass in a custom list
excludeCountriesarray[]List of custom CCA2 countries you don't want to render
closeableboolfalseIf true, the CountryPicker will have a close button
filterableboolfalseIf true, the CountryPicker will have search bar
filterPlaceholderstring'Filter'The search bar placeholder
autoFocusFilterbooltrueWhether or not the search bar should be autofocused
stylesobject{}Override any style specified in the component (see source code)
disabledboolfalseWhether or not the Country Picker onPress is disabled

Dependencies

FAQ

Is it supported and tested both on android and iOS?

YES

Is the data that is populated inside the list saved offline once I install your package?

YES : It used the world-countries package and image is stored into json and base64.

Tiers lib using this lib

https://github.com/joinspontaneous/react-native-phone-verification

Contribution

Questions

Feel free to contact me or create an issue

made with ♥

Licence

MIT