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

Comparing version 1.0.1 to 1.0.2

package.json

 {
   "name": "react-native-country-codes-picker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "This lib. provide country iso picker with search functionality",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-country-codes-picker
 
-This lib. provide simple country picker with search functionality. Fully created on react-native.
+This lib. provide simple country picker with search functionality. Fully crossplatform and created on react-native.
+
+# Installation
+
+``
+npm i react-native-country-codes-picker
+``
+
+# Example
+
+![ezgif com-gif-maker (5)](https://user-images.githubusercontent.com/47904385/112475469-223a5080-8d71-11eb-92c0-43583056e30c.gif)
+
+# Basic usage
+```JS
+import {CountryPicker} from "react-native-country-codes-picker/components/CountryPicker";
+
+export default function App() {
+  const [show, setShow] = useState(false);
+  const [countryCode, setCountryCode] = useState('');
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        onPress={() => setShow(true)}
+        style={{
+            width: '80%',
+            height: 60,
+            backgroundColor: 'black',
+            padding: 10,
+        }}
+      >
+        <Text style={{
+            color: 'white',
+            fontSize: 20
+        }}>
+            {countryCode}
+        </Text>
+      </TouchableOpacity>
+
+      // For showing picker just put show state to show prop
+      <CountryPicker
+        show={show}
+        // when picker button press you will get the country object with dial code
+        pickerButtonOnPress={(item) => {
+          setCountryCode(item.dial_code);
+          setShow(false);
+        }}
+      />
+    </View>
+  );
+}
+```
+
+# Props
+Below are the props you can pass to the React Component.
+
+| Prop  | Type | Default | Example | Description |
+| ------------- | ------------- | ------------- | ------------- | ------------- |
+| show  | boolean | | |  This prop using for displaying the modal. Put your show state here. |
+| pickerButtonOnPress | function | | (country) => setCode(country.dial_code) | Put your function/functions here for getting country data from picker. |
+
+# ToDo
+
+1. Custom styling.
+2. Picker types (modal, input). If you need input with search.
+3. Dark theme option.
+4. Multi lang. (for supporting more languages).
+5. More speed optimization.
+
+If you have something interesting ! Just write to us :)

No alert changes

Improved metrics

Total package byte prevSize

42603

increased by4.89%

Number of lines in readme file

73

increased by1725%

No dependency changes