{"id":4099,"url":"https://github.com/thegamenicorus/react-native-phone-input","last_synced_at":"2025-05-16T05:06:12.368Z","repository":{"id":17069986,"uuid":"80600089","full_name":"thegamenicorus/react-native-phone-input","owner":"thegamenicorus","description":"Phone input box for React Native","archived":false,"fork":false,"pushed_at":"2022-11-09T12:32:46.000Z","size":1846,"stargazers_count":395,"open_issues_count":93,"forks_count":453,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-08T22:28:22.225Z","etag":null,"topics":["country-picker","input","phone","react-native","telephone"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-native-phone-input","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thegamenicorus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-01T08:01:01.000Z","updated_at":"2025-02-18T12:29:18.000Z","dependencies_parsed_at":"2023-01-13T19:08:45.209Z","dependency_job_id":null,"html_url":"https://github.com/thegamenicorus/react-native-phone-input","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-phone-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-phone-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-phone-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thegamenicorus%2Freact-native-phone-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thegamenicorus","download_url":"https://codeload.github.com/thegamenicorus/react-native-phone-input/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["country-picker","input","phone","react-native","telephone"],"created_at":"2024-01-05T20:17:01.015Z","updated_at":"2025-05-16T05:06:12.350Z","avatar_url":"https://github.com/thegamenicorus.png","language":"JavaScript","funding_links":[],"categories":["Components","Others","JavaScript"],"sub_categories":["UI"],"readme":"# React Native Phone Input\n\nPhone input box for React Native\n\n| ![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) |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n\n\n## Installation\n\n```\nnpm i react-native-phone-input --save\n```\n\n## Basic Usage\n\n```jsx\nimport PhoneInput from 'react-native-phone-input'\n\nrender(){\n    return(\n        \u003cPhoneInput ref='phone'/\u003e\n    )\n}\n```\n\n[see full basic example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/BasicExample/app.js)\n\n## Custom Your Own Picker\n\n| ![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) |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n\n\n1. in componentDidMount, keep this.phone.getPickerData() in state\n2. create function for open your modal (onPressFlag in example)\n3. \\\u003cPhoneInput onPressFlag={function in 2.} /\u003e\n4. call this.phone.selectCountry for set country of \\\u003cPhoneInput /\u003e\n\n```jsx\ncomponentDidMount(){\n    this.setState({\n        pickerData: this.phone.getPickerData()\n    })\n}\n\nonPressFlag(){\n    this.myCountryPicker.open()\n}\n\nselectCountry(country){\n    this.phone.selectCountry(country.iso2)\n}\n\nrender(){\n    return(\n        \u003cView style={styles.container}\u003e\n            \u003cPhoneInput\n                ref={(ref) =\u003e { this.phone = ref; }}\n                onPressFlag={this.onPressFlag}\n            /\u003e\n\n            \u003cModalPickerImage\n                ref={(ref) =\u003e { this.myCountryPicker = ref; }}\n                data={this.state.pickerData}\n                onChange={(country)=\u003e{ this.selectCountry(country) }}\n                cancelText='Cancel'\n            /\u003e\n        \u003c/View\u003e\n    )\n}\n```\n\n[see full custom picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomPicker/app.js)\n\n## Custom Library Picker\n\nuse awesome [react-native-country-picker-modal](https://github.com/xcarpentier/react-native-country-picker-modal) to select country\n\n| ![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) |\n| ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n\n\n```jsx\nonPressFlag(){\n    this.countryPicker.openModal()\n}\n\nselectCountry(country){\n    this.phone.selectCountry(country.cca2.toLowerCase())\n    this.setState({cca2: country.cca2})\n}\n\nrender(){\n    return(\n        \u003cView style={styles.container}\u003e\n            \u003cPhoneInput\n                ref={(ref) =\u003e { this.phone = ref; }}\n                onPressFlag={this.onPressFlag}\n            /\u003e\n\n            \u003cCountryPicker\n                ref={(ref) =\u003e { this.countryPicker = ref; }}\n                onChange={(value)=\u003e this.selectCountry(value)}\n                translation='eng'\n                cca2={this.state.cca2}\n            \u003e\n                \u003cView\u003e\u003c/View\u003e\n            \u003c/CountryPicker\u003e\n        \u003c/View\u003e\n    )\n}\n```\n\n[see full custom library picker example](https://github.com/thegamenicorus/react-native-phone-input/blob/master/examples/CustomLibraryPicker/app.js)\n\n## Custom Countries\n\n```jsx\n\u003cPhoneInput countriesList={require('./countries.json')} /\u003e\n```\n\n## Configuration\n\n### Properties:\n\n| Property Name             | Type             | Default   | Description                                                                    |\n| ------------------------- | ---------------- | --------- | ------------------------------------------------------------------------------ |\n| initialCountry            | string           | 'us'      | initial selected country                                                       |\n| allowZeroAfterCountryCode | bool             | true      | allow user input 0 after country code                                          |\n| disabled                  | bool             | false     | if true, disable all interaction of this component                             |\n| value                     | string           | null      | initial phone number                                                           |\n| style                     | object           | null      | custom styles to be applied if supplied                                        |\n| flagStyle                 | object           | null      | custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}      |\n| textStyle                 | object           | null      | custom styles for phone number text input eg. {{fontSize: 14}}                 |\n| textProps                 | object           | null      | properties for phone number text input eg. {{placeholder: 'Telephone number'}} |\n| textComponent             | function         | TextField | the input component to use                                                     |\n| offset                    | int              | 10        | distance between flag and phone number                                         |\n| pickerButtonColor         | string           | '#007AFF' | set button color of country picker                                             |\n| pickerBackgroundColor     | string           | 'white'   | set background color of country picker                                         |\n| pickerItemStyle           | object           | null      | custom styles for text in country picker eg. {{fontSize: 14}}                  |\n| cancelText                | string           | 'Cancel'  | cancel word                                                                    |\n| confirmText               | string           | 'Confirm' | confirm word                                                                   |\n| buttonTextStyle           | object           | null      | custom styles for country picker button                                        |\n| onChangePhoneNumber       | function(number) | null      | function to be invoked when phone number is changed                            |\n| onSelectCountry           | function(iso2)   | null      | function to be invoked when country picker is selected                         |\n| onPressFlag               | function()       | null      | function to be invoked when press on flag image                                |\n| countriesList             | array            | null      | custom countries list                                                          |\n| autoFormat                | bool             | false     | automatically format phone number as it is entered                             |\n\n### Functions:\n\n| Function Name   | Return Type | Parameters  | Description                                       |\n| --------------- | ----------- | ----------- | ------------------------------------------------- |\n| isValidNumber   | boolean     | none        | return true if current phone number is valid      |\n| getNumberType   | string      | none        | return true type of current phone number          |\n| getValue        | string      | none        | return current phone number                       |\n| getFlag         | object      | iso2:string | return flag image                                 |\n| getAllCountries | object      | none        | return country object in country picker           |\n| getPickerData   | object      | nont        | return country object with flag image             |\n| focus           | void        | none        | focus the phone input                             |\n| blur            | void        | none        | blur the phone input                              |\n| selectCountry   | void        | iso2:string | set phone input to specific country               |\n| getCountryCode  | string      | none        | return country dial code of current phone number  |\n| getISOCode      | string      | none        | return country iso code of current phone number   |\n| onPressCancel   | func        | none        | handler to be called when taps the cancel button  |\n| onPressConfirm  | func        | none        | handler to be called when taps the confirm button |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-phone-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthegamenicorus%2Freact-native-phone-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthegamenicorus%2Freact-native-phone-input/lists"}