https://github.com/tofugear/react-native-country-picker

https://github.com/tofugear/react-native-country-picker

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/tofugear/react-native-country-picker
• Owner: tofugear
• Created: 2016-02-26T11:14:55.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2017-05-26T20:51:06.000Z (over 7 years ago)
• Last Synced: 2024-11-05T17:19:00.490Z (about 1 month ago)
• Language: Java
• Size: 747 KB
• Stars: 10
• Watchers: 13
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-native - react-native-country-picker ★8 - React Native Country Picker (Components / UI)
• awesome-react-native - react-native-country-picker ★8 - React Native Country Picker (Components / UI)
• awesome-react-native - react-native-country-picker ★8 - React Native Country Picker (Components / UI)
• awesome-react-native-ui - react-native-country-picker ★5 - React Native Country Picker (Components / UI)
• awesome-react-native - react-native-country-picker ★8 - React Native Country Picker (Components / UI)

README

        
# React Native Country Picker

A country picker for react-native support for android

## Installation

```sh

npm install react-native-country-picker --save

```

### Installation (Android)

```gradle

...

include ':react-native-country-picker'

project(':react-native-country-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-country-picker/android')

```

* In `android/app/build.gradle`

```gradle

...

dependencies {

    ...

    compile project(':react-native-country-picker')

}

```

* register module (in MainActivity.java)

```java

import com.tofugear.countrypicker.*;  // <--- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

  ......

  @Override

  protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    mReactRootView = new ReactRootView(this);

    mReactInstanceManager = ReactInstanceManager.builder()

      .setApplication(getApplication())

      .setBundleAssetName("index.android.bundle")

      .setJSMainModuleName("index.android")

      .addPackage(new MainReactPackage())

      .addPackage(new CountryPickerPackage())              // <------ add here

      .setUseDeveloperSupport(BuildConfig.DEBUG)

      .setInitialLifecycleState(LifecycleState.RESUMED)

      .build();

    mReactRootView.startReactApplication(mReactInstanceManager, "ExampleRN", null);

    setContentView(mReactRootView);

  }

  ......

}

```

### Screencasts

See [AndroidCountryPicker](https://github.com/roomorama/AndroidCountryPicker)

## Usage

### Example

```js

var React = require('react-native');

var {

    StyleSheet,

    View,

    Image

} = React;

var CountryPicker = require('react-native-country-picker');

var Button = require('react-native-simple-button');

module.exports = React.createClass({

    getInitialState() {

        return { code: null };

    },

    getSelectedCountry() {

        var _this = this;

        CountryPicker.show({

          title: 'Title',

          searchHintText: 'Search',

          preferredCountryCocde: 'HK JP',

          countryList: ['HK|+852|Hong Kong', 'JP|...'],  // Optional

          function(country){

            _this.setState({ code: country.code });

        });

    },

    render() {

        return (

            

                {this.state.code}

                

                    Launch Country Picker

                

            

        );

    },

});

var styles = StyleSheet.create({

    container: {

        flex: 1,

        justifyContent: 'space-around',

        alignItems: 'center',

        backgroundColor: 'transparent',

        paddingVertical:150,

    }

});

```

### thanks

* Thanks to [roomorama](https://github.com/roomorama) for the [AndroidCountryPicker](https://github.com/roomorama/AndroidCountryPicker) Java Fragment code.