Skip to content
This repository has been archived by the owner on Jul 2, 2020. It is now read-only.

talut/react-native-countries

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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