Cannot change country code

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+[*]
+end_of_line = lf
+insert_final_newline = true
+indent_size = 4
+
+[{*.js,.jsx,.ts,.tsx}]
+charset = utf-8
+indent_style = space
+indent_size = 4
+
+[{package.json,*.yml,*.css,*.scss}]
+indent_style = space
+indent_size = 4

.eslintignore

@@ -0,0 +1,5 @@
+bin/
+coverage/
+dist/
+examples/
+node_modules/

.eslintrc.js

@@ -0,0 +1,42 @@
+module.exports = {
+    extends: [
+        'airbnb-base',
+        'plugin:@typescript-eslint/recommended',
+        'plugin:react/recommended'
+    ],
+    plugins: [
+        '@typescript-eslint',
+    ],
+    parser: '@typescript-eslint/parser',
+    env: {
+        node: true,
+        mocha: true,
+    },
+    settings: {
+        react: {
+            version: 'detect'
+        }
+    },
+    rules: {
+        '@typescript-eslint/explicit-function-return-type': 'off',
+        '@typescript-eslint/interface-name-prefix': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        'import/extensions': 'off',
+        'import/prefer-default-export': 'off',
+        'no-console': 'warn',
+        'max-len': ['error', { code: 160 }],
+        'no-plusplus': 'off',
+        'import/no-unresolved': 'off',
+        indent: [
+            'error',
+            4,
+        ],
+        'comma-dangle': ['warn', 'only-multiline'],
+        'react/sort-comp': [
+            2,
+            {
+                order: ['static-variables', 'static-methods', 'instance-variables', 'constructor', 'lifecycle', 'everything-else', 'render']
+            }
+        ],
+    },
+};

.gitignore

@@ -42,3 +42,6 @@ jspm_packages
 
 # MacOS files
 .DS_Store
+
+# Output
+dist/

.huskyrc.js

@@ -0,0 +1,8 @@
+const huskyConfig = {
+    "hooks": {
+        "pre-commit": "./bin/pre-commit.sh",
+        "pre-push": "./bin/pre-push.sh",
+    }
+  };
+
+  module.exports = huskyConfig;

.mocharc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extension: ['js'],
+};

README.md

@@ -1,10 +1,14 @@
 # React Native Phone Input
 
-Phone input box for React Native
+Demo of Phone Input box for React Native (android/ios)
 
-| ![2560-02-07 01_32_33](https://cloud.githubusercontent.com/assets/21040043/22661097/aa41852e-ecd6-11e6-84da-375cbe05020f.gif) | ![2560-02-08 00_04_18](https://cloud.githubusercontent.com/assets/21040043/22702110/3758ecc0-ed92-11e6-9d2e-421b76d4e2b5.gif) |
+| ![2560-02-08 00_04_18](https://cloud.githubusercontent.com/assets/21040043/22702110/3758ecc0-ed92-11e6-9d2e-421b76d4e2b5.gif) | ![2560-02-07 01_32_33](https://cloud.githubusercontent.com/assets/21040043/22661097/aa41852e-ecd6-11e6-84da-375cbe05020f.gif) |
 | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 
+## Versions
+ * 0.x.x has been deprecated and is no longer maintained
+ * 1.x.x is the current version and is actively maintained (please submit a PR for improvements)
+
 
 ## Installation
 
@@ -26,16 +30,18 @@ render(){
 
 [see full basic example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/BasicExample/app.js)
 
-## Custom Your Own Picker
+## Using a Custom Country Picker
+(android/ios)
 
-| ![2560-02-08 01_10_22](https://cloud.githubusercontent.com/assets/21040043/22705440/0cc61896-ed9e-11e6-83d6-e4d98cf5c06f.gif) | ![2560-02-08 01_46_21](https://cloud.githubusercontent.com/assets/21040043/22706060/73b04994-eda0-11e6-8e86-3ae1a94d9bd3.gif) |
+| ![2560-02-08 01_46_21](https://cloud.githubusercontent.com/assets/21040043/22706060/73b04994-eda0-11e6-8e86-3ae1a94d9bd3.gif) | ![2560-02-08 01_10_22](https://cloud.githubusercontent.com/assets/21040043/22705440/0cc61896-ed9e-11e6-83d6-e4d98cf5c06f.gif) |
 | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 
 
-1. in componentDidMount, keep this.phone.getPickerData() in state
-2. create function for open your modal (onPressFlag in example)
+
+1. In componentDidMount, keep this.phone.getPickerData() in state
+2. Create a function to open your modal (onPressFlag in example)
 3. \<PhoneInput onPressFlag={function in 2.} />
-4. call this.phone.selectCountry for set country of \<PhoneInput />
+4. Call this.phone.selectCountry to set the country of \<PhoneInput />
 
 ```jsx
 componentDidMount(){
@@ -58,6 +64,11 @@ render(){
             <PhoneInput
                 ref={(ref) => { this.phone = ref; }}
                 onPressFlag={this.onPressFlag}
+                initialCountry={'us'}
+                initialValue="13178675309"
+                textProps={{
+                    placeholder: 'Enter a phone number...'
+                }}
             />
 
             <ModalPickerImage
@@ -73,11 +84,12 @@ render(){
 
 [see full custom picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomPicker/app.js)
 
-## Custom Library Picker
+## Using a Custom (External) Library Picker
 
-use awesome [react-native-country-picker-modal](https://github.com/xcarpentier/react-native-country-picker-modal) to select country
+We recommend using the awesome [react-native-country-picker-modal](https://github.com/xcarpentier/react-native-country-picker-modal) to select country
 
-| ![2560-02-08 02_26_20](https://cloud.githubusercontent.com/assets/21040043/22707625/fecc68d2-eda5-11e6-868c-42d3c544fcc8.gif) | ![2560-02-08 02_43_18](https://cloud.githubusercontent.com/assets/21040043/22708333/6d0938b4-eda8-11e6-9ca1-ae217536b4cc.gif) |
+(android/ios)
+| ![2560-02-08 02_43_18](https://cloud.githubusercontent.com/assets/21040043/22708333/6d0938b4-eda8-11e6-9ca1-ae217536b4cc.gif) | ![2560-02-08 02_26_20](https://cloud.githubusercontent.com/assets/21040043/22707625/fecc68d2-eda5-11e6-868c-42d3c544fcc8.gif) |
 | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
 
 
@@ -91,12 +103,31 @@ selectCountry(country){
     this.setState({cca2: country.cca2})
 }
 
+// Updates the Flag on change
+onPhoneInputChange = (value, iso2) => {
+    const newState = {
+        phoneInputValue: value,
+    };
+
+    if (iso2) {
+        newState.countryCode = iso2?.toUpperCase();
+    }
+
+    this.setState(newState);
+}
+
 render(){
     return(
         <View style={styles.container}>
             <PhoneInput
                 ref={(ref) => { this.phone = ref; }}
                 onPressFlag={this.onPressFlag}
+                initialCountry={'us'}
+                initialValue="13178675309"
+                onChangePhoneNumber={this.onPhoneInputChange}
+                textProps={{
+                    placeholder: 'Enter a phone number...'
+                }}
             />
 
             <CountryPicker
@@ -126,10 +157,11 @@ render(){
 
 | Property Name             | Type             | Default   | Description                                                                    |
 | ------------------------- | ---------------- | --------- | ------------------------------------------------------------------------------ |
+| autoFormat                | boolean          | false     | Format while typing                                                            |
 | initialCountry            | string           | 'us'      | initial selected country                                                       |
 | allowZeroAfterCountryCode | bool             | true      | allow user input 0 after country code                                          |
 | disabled                  | bool             | false     | if true, disable all interaction of this component                             |
-| value                     | string           | null      | initial phone number                                                           |
+| initialValue              | string           | null      | initial phone number                                                           |
 | style                     | object           | null      | custom styles to be applied if supplied                                        |
 | flagStyle                 | object           | null      | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}      |
 | textStyle                 | object           | null      | custom styles for phone number text input eg. {{fontSize: 14}}                 |
@@ -141,7 +173,8 @@ render(){
 | pickerItemStyle           | object           | null      | custom styles for text in country picker eg. {{fontSize: 14}}                  |
 | cancelText                | string           | 'Cancel'  | cancel word                                                                    |
 | confirmText               | string           | 'Confirm' | confirm word                                                                   |
-| buttonTextStyle           | object           | null      | custom styles for country picker button                                        |
+| cancelTextStyle           | object           | null      | custom styles for country picker cancel button                                 |
+| confirmTextStyle          | object           | null      | custom styles for country picker confirm button                                |
 | onChangePhoneNumber       | function(number) | null      | function to be invoked when phone number is changed                            |
 | onSelectCountry           | function(iso2)   | null      | function to be invoked when country picker is selected                         |
 | onPressFlag               | function()       | null      | function to be invoked when press on flag image                                |
@@ -154,13 +187,14 @@ render(){
 | --------------- | ----------- | ----------- | ------------------------------------------------- |
 | isValidNumber   | boolean     | none        | return true if current phone number is valid      |
 | getNumberType   | string      | none        | return true type of current phone number          |
-| getValue        | string      | none        | return current phone number                       |
+| getValue        | string      | none        | return current phone number (unformatted)         |
 | getFlag         | object      | iso2:string | return flag image                                 |
 | getAllCountries | object      | none        | return country object in country picker           |
 | getPickerData   | object      | nont        | return country object with flag image             |
 | focus           | void        | none        | focus the phone input                             |
 | blur            | void        | none        | blur the phone input                              |
 | selectCountry   | void        | iso2:string | set phone input to specific country               |
+| setValue        | void        | string      | set phone input value                             |
 | getCountryCode  | string      | none        | return country dial code of current phone number  |
 | getISOCode      | string      | none        | return country iso code of current phone number   |
 | onPressCancel   | func        | none        | handler to be called when taps the cancel button  |

bin/build.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+rm -rf ./dist && \
+mkdir dist && mkdir dist/resources && mkdir dist/resources/flags &&  \
+cp -r ./src/resources/flags/images ./dist/resources/flags && \
+mkdir dist/typings && cp -r ./src/typings ./dist \
+&& tsc

bin/lib/colorize.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+set -e
+
+# Variables
+NO_FORMAT="\033[0m"
+F_BOLD="\033[1m"
+C_GREEN="\033[38;5;2m"
+C_BLUE="\033[38;5;26m"
+C_YELLOW="\033[38;5;11m"
+C_RED="\033[38;5;9m"
+
+# Methods
+printMessageSuccess() {
+    echo -e "${F_BOLD}${C_GREEN}$1${NO_FORMAT}"
+}
+
+printMessageNeutral() {
+    echo -e "${F_BOLD}${C_BLUE}$1${NO_FORMAT}"
+}
+
+printMessageWarning() {
+    echo -e "${F_BOLD}${C_YELLOW}$1${NO_FORMAT}"
+}
+
+printMessageError() {
+    echo -e "${F_BOLD}${C_RED}$1${NO_FORMAT}"
+}

bin/pre-commit.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+# This script runs before making a commit with git
+
+set -e
+
+# Get color variables for output messages
+pushd bin
+source ./lib/colorize.sh
+popd
+
+is_pre_check_success()
+{
+    npm run lint
+}
+
+if is_pre_check_success; then
+    printMessageNeutral "-- PRE COMMIT SUCCESS --"
+else
+    printMessageError "-- PRE COMMIT ERROR --"
+    exit 1
+fi

bin/pre-push.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+# This script runs before pushing a commit with git
+
+set -e
+
+# Get color variables for output messages
+pushd bin
+source ./lib/colorize.sh
+popd
+
+# Make sure test coverage passes locally before push since CI/CD pipeline doesn't run integ tests
+is_pre_check_success()
+{
+    npm test
+}
+
+if is_pre_check_success; then
+    printMessageNeutral "-- PRE PUSH SUCCESS --"
+else
+    printMessageError "-- PRE PUSH ERROR --"
+    exit 1
+fi

examples/BasicExample/__tests__/index.android.js

@@ -1,12 +1,12 @@
 import 'react-native';
 import React from 'react';
+import renderer from 'react-test-renderer';
 import Index from '../index.android.js';
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
+    const tree = renderer.create(
+        <Index />
+    );
 });

examples/BasicExample/__tests__/index.ios.js

@@ -1,12 +1,12 @@
 import 'react-native';
 import React from 'react';
+import renderer from 'react-test-renderer';
 import Index from '../index.ios.js';
 
 // Note: test renderer must be required after react-native.
-import renderer from 'react-test-renderer';
 
 it('renders correctly', () => {
-  const tree = renderer.create(
-    <Index />
-  );
+    const tree = renderer.create(
+        <Index />
+    );
 });