react-native-countries

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

• Thanks to you @cagriyilmaz for IOS part.

License

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