https://github.com/fakeheal/react-native-intl-phone-field

🌐 Text Input Component for validating and formatting international phone numbers.
https://github.com/fakeheal/react-native-intl-phone-field

component input number phone react-native

Last synced: 2 months ago
JSON representation

🌐 Text Input Component for validating and formatting international phone numbers.

• Host: GitHub
• URL: https://github.com/fakeheal/react-native-intl-phone-field
• Owner: fakeheal
• License: mit
• Created: 2022-03-01T17:22:26.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-03-07T10:19:06.000Z (almost 3 years ago)
• Last Synced: 2024-10-12T09:46:30.686Z (3 months ago)
• Topics: component, input, number, phone, react-native
• Language: JavaScript
• Homepage:
• Size: 1.18 MB
• Stars: 28
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        







React Native Intl Phone Field



 

    

    





    

    Try the Expo Snack 👏

    






## 🕹️ Demo

It's a javascript-only (no native code) component that can run in iOS, Android, Expo & React Native Web. Below you can gifs of the demo app that showcases the component in action. 



    





    



_Click on the image to see it in a larger size_. 

## 👋 Introduction

A simple `` that validates and formats international phone numbers using Google's library [libphonenumber](https://github.com/google/libphonenumber)  and [phonenumber-js](https://gitlab.com/catamphetamine/libphonenumber-js).  Works with pre-propulated data and displays an emoji flag if country code is derived from the number. Additionally, adds a `+` sign infront of the number, so it's considered international.

## ⚙️ Installation

```sh

yarn add react-native-intl-phone-field

```

## ✂️ Usage

```js

import IntlPhoneField from 'react-native-intl-phone-field';

 console.log(result)}

  onValidation={(isValid) => console.log(isValid)}

  defaultCountry="BG"

  defaultPrefix="+359"

  defaultFlag="🇧🇬"

/>

```

For more detailed example, take a look at the demo app inside [example/](./example).

## ⚪ Props

| Property          | Type       | Default   | Description                                                                                                                                                              |

|-------------------|------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|

| flagUndetermined  | string?    | `❓`       | Displayed when country code cannot be derived from current phone number.                                                                                                 |

| onEndEditing  | `function` | undefined | Callback that is called when text input ends [ text input ends](https://reactnative.dev/docs/textinput#onendediting). 
 It receives [`result`](.src/index.ts#L124). |

| onValidation          | `function` | undefined | Callback that is called each time the validation status changes.                                                                                                         |

| onValueUpdate          | `function` | undefined | Callback that is called each time the underlying `value` changes.                                                                                                        |

| defaultCountry          | `string`   | undefined | Two letter code for default country, eg. `BG`                                                                                                                            |

| defaultPrefix          | `string`   | undefined | Default number prefix, eg. `+359`                                                                                                                                        |

| defaultValue          | `string`   | undefined | Default value for the `TextInput`, if you want to pre-populate it.                                                                                                       |

| defaultFlag          | `string`   | undefined | Emoji for the default flag, eg. `🇧🇬`                                                                                                                                   |

| containerStyle          | `object`   | undefined | Styles for the component's wrapper ``                                                                                                                            |

| flagContainerStyle          | `object`   | undefined | Styles for the flag emoji wrapper ``                                                                                                                             |

| flagTextStyle          | `object`   | undefined | Styles for the flag emoji ``                                                                                                                                     |

| textInputStyle          | `object`   | undefined | Styles for the underlying ``                                                                                                                                |

| textInputProps          | `object`   | undefined | [Additional props](https://reactnative.dev/docs/textinput#props) for the underlying ``                                                                      |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT