react-native-country-picker-modal - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

 {
   "name": "react-native-country-picker-modal",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Country picker",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,25 +5,99 @@ # react-native-country-picker
 
-## Changelogs
+![](http://i.imgur.com/WF4sdT7.gif)
 
-## Getting Started
-- [Installation](#installation)
-- [Basic Usage](#basic-usage)
-- [Properties](#properties)
-- [Examples](#examples)
-- [Development](#development)
-
 ### Installation
-
+```bash
+$ npm i react-native-country-picker-modal --save
+```
 ### Basic Usage
+- Install `react-native` first
 
-### Properties
+```bash
+$ npm i react-native -g
+```
 
-### Examples
+- Initialization of a react-native project
 
-### Development
-
 ```bash
-$ npm start
+$ react-native init myproject
 ```
 
+- Then, edit `myproject/index.ios.js`, like this:
+
+```jsx
+'use strict';
+import React, {
+  AppRegistry,
+  Component,
+  StyleSheet,
+  Text,
+  View,
+  StatusBarIOS,
+  PixelRatio
+} from 'react-native';
+
+import CountryPicker from 'react-native-country-picker-modal';
+
+class Example extends Component {
+  constructor(props){
+    StatusBarIOS.setHidden(true);
+    super(props);
+    this.state = {
+      cca2: 'US'
+    };
+  }
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          Welcome to Country Picker !
+        </Text>
+        <CountryPicker
+          onChange={(value)=> this.setState({country: value})}
+          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);
+```
+
 ## Contribution
@@ -35,4 +109,4 @@
 
-Feel free to [contact me](mailto:[e-mail]) or [create an issue](https://github.com/leecade/react-native-swiper/issues/new)
+Feel free to [contact me](mailto:[e-mail]) or [create an issue](https://github.com/xcarpentier/react-native-country-picker/issues/new)
 
 > made with ♥

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

111

increased by200%

Worsened metrics

Total package byte prevSize

1079058

decreased by-63.18%

No dependency changes