Skip to content
Country Name & Code List for React Native (Android & IOS)
Branch: master
Clone or download
talut Merge pull request #1 from talut/dependabot/npm_and_yarn/example/hand…
…lebars-4.1.2

Bump handlebars from 4.0.12 to 4.1.2 in /example
Latest commit bc26e6d Jul 14, 2019

README.md

React Native Countries

React Native Countries v1.0.2 will provide you directly native countries list. The names of the countries come in the native language.

Getting Started

Installation

With NPM

npm install --save react-native-countries

With YARN

yarn add react-native-countries
Linking

Automatic linking

react-native link react-native-countries

Manual Linking

Manual Installation for IOS and Android (If something went wrong with react-native link)

With Cocoapods (IOS)

İf you're using Cocoapods you should add this line to your Podfile file

  pod 'ReactNativeCountries', :path => '../node_modules/react-native-countries/ios'

Usage

import RNCountry from "react-native-countries";

This package will provide you 3 different options to getting countries.

getCountryNames
RNCountry.getCountryNames

This constant will provide you only name of countries.

getCountryCodes
RNCountry.getCountryCodes

This constant will provide you only A2 code of countries. (I.E: EN, TR, FR)

getCountryNamesWithCodes
RNCountry.getCountryNamesWithCodes

This constant will provide you name and code of countries. (I.E: [{code:'TR',name:'Turkey'},{code:'EN', name:'England'}] )

Sample Usage

import React, {Component} from 'react';
import {Picker, StyleSheet, Text, View} from 'react-native';
import RNCountry from "react-native-countries";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countryCode: "TR"
        }
    }

    componentWillMount() {
        let countryNamesWithCodes = RNCountry.getCountryNamesWithCodes;
        countryNamesWithCodes.sort((a, b) => a.name.localeCompare(b.name));
        this.setState({
            countryNameListWithCode: countryNamesWithCodes
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Picker
                    selectedValue={this.state.countryCode}
                    style={styles.picker}
                    onValueChange={(itemValue, itemIndex) => this.setState({countryCode: itemValue})}>
                    {this.state.countryNameListWithCode.map((val) => {
                        return <Picker.Item key={'country-item-' + val.code} label={val.name} value={val.code}/>
                    })}
                </Picker>
                <Text>Selected Country Code: {this.state.countryCode}</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
    picker: {
        height: 50,
        width: 200
    }
});

Example

You can find the usage example of the package in the example folder.

git clone https://github.com/talut/react-native-countries

cd react-native-countries/example

npm install

react-native run-ios or android

Thanks

License

This project is licensed under the MIT License - see the LICENSE.md file for details

You can’t perform that action at this time.