npmpackage.info

Gathering detailed insights and metrics for react-native-paper-phone-number-input

Other packages similar to react-native-paper-phone-number-input

react-native-paper-phone-input

1.0.5

<h1 align="center">React Native Phone Number Input </h1>

react-native-paper-phone-number-input

A performant phone number input component for react-native-paper with country picker

1.3.1

MIT

TypeScript

9.54 kB

3,431

Installations

npm install react-native-paper-phone-number-input

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.4.0

NPM Version

8.12.1 Pull Requests

Open

0

Total

7

Closed

1

Merged

6

Issues

Open

0

Total

4

Closed

4

Releases

v1.3.1

Published on 29 Jul 2024

v1.2.0

Published on 12 Jul 2024

v1.0.0 - First Release!

v1.0.0

Published on 13 Dec 2023

View all 3 releases

Contributors

Unable to fetch Contributors

View all 3 contributors

Languages

TypeScript

JavaScript

HTML

TypeScript (91.88%)

JavaScript (4.16%)

HTML (3.95%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

kuasha420

Download Statistics

Total Downloads

3,431

Last Day

Last Week

Last Month

382

Last Year

3,241

GitHub Statistics

7 Stars

63 Commits

1 Forks

2 Watching

1 Branches

3 Contributors

Bundle Size

40.69 kB

Minified

9.54 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.3.1

Package Id

react-native-paper-phone-number-input@1.3.1

Unpacked Size

364.46 kB

Size

53.19 kB

File Count

NPM Version

8.12.1

Node Version

18.4.0

Publised On

29 Jul 2024

Total Downloads

Cumulative downloads

Total Downloads

3,431

Last day

110%

Compared to previous day

Last week

33.3%

Compared to previous week

Last month

26.5%

382

Compared to previous month

Last year

1,605.8%

3,241

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-native react-native-paper react-native-safe-area-context react-native-vector-icons

Dev Dependencies

@types/react @types/react-native-vector-icons eslint eslint-config-prettier eslint-plugin-prettier expo prettier react react-native react-native-builder-bob react-native-paper react-native-safe-area-context react-native-vector-icons typescript

Versions

React Native Paper Phone Number Input

🔥 A material design Phone number input component for React Native Paper that has a country code picker with emoji flags for speed and low footprint. Performant and beautiful!

Screenshots

Theme	Number Input	Country Picker
Light
Dark

Features

Country code picker with emoji flags.
Allows searching for country.
Looks and feels consistent with React Native Paper.
Allows specifying default country.
Allows specifying a list of countries to show on top of the list.
Allows user to specify which countries to show or hide in the list.
Exposes imperative methods to open and close the country code picker.
Supports light and dark themes.
Works well on Android, iOS and Web.

Installation

Install with your favorite package manager.

Using Yarn:

yarn add react-native-paper-phone-number-input

Using NPM:

npm i react-native-paper-phone-number-input

Add support for Web

This package should work out of the box on most desktop and mobile browsers on Web. However, Microsoft Windows does not ship with Flags Emoji by default. While the flags will display correctly on Firefox and its derivatives, Chromium based browsers like Chrome and Edge will not display the flags correctly and will show the two-letter country code instead.

To fix this, you should install country-flag-emoji-polyfill and import it in your project. This polyfill will add support for Flag Emojis on Windows. The setup process is described in the readme of the library. Briefly:

For expo users, you can add the polyfill by adding the following to your web/index.html file:

1<script type="module" defer>
2  import { polyfillCountryFlagEmojis } from 'https://cdn.skypack.dev/country-flag-emoji-polyfill';
3  polyfillCountryFlagEmojis();
4</script>

For other setups, you can either add the above snippet in your index.html file or import the polyfill in your web entrypoint.

yarn add country-flag-emoji-polyfill

1// App.web.tsx
2import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill';
3
4polyfillCountryFlagEmojis();

See the example directory for a complete example. For further information including using local fonts instead of loading it from the CDN, please refer to the API Documentation of the library.

Note that this package uses the default font family Twemoji Country Flags for the relevant components. If you want to use a different font, in addition to using the proper parameters in polyfillCountryFlagEmojis call, you need to pass the relevant font families in the theme prop of the PhoneNumberInput or CountryPicker components.

1<PhoneNumberInput
2  code={countryCode}
3  setCode={setCountryCode}
4  phoneNumber={phoneNumber}
5  setPhoneNumber={setPhoneNumber}
6  theme={{
7    fonts: {
8      // For MD3Theme.
9      bodyLarge: {
10        fontFamily: '"YourFontFamily", ...',
11      },
12      default: {
13        fontFamily: '"YourFontFamily", ...',
14      },
15      // For MD2Theme.
16      regular: {
17        fontFamily: '"YourFontFamily", ...',
18      },
19    },
20  }}
21/>

This package also exports defaultFlagsFont which is the default font family used for the flags. You can use this to display flag emojis correctly in other components in your application on Windows.

1import { Text } from 'react-native';
2import { defaultFlagsFont } from 'react-native-paper-phone-number-input';
3
4// Use defaultFlagsFont in your components.
5<Text
6  style={{
7    fontFamily: defaultFlagsFont,
8  }}
9>
10  {selectedCountry.flag}
11</Text>;

Usage

Import the PhoneNumberInput component from the library. You can then use it in your application like so:

1// App.tsx
2import React, { useState } from 'react';
3import { PhoneNumberInput, getCountryByCode } from 'react-native-paper-phone-number-input';
4
5// `showFirstOnList`, `includeCountries` and `excludeCountries` should be defined outsude
6// the component to prevent uncessary recomputations and re-renders.
7const includeCountries = ['AZ', 'BD', 'CA', 'GB', 'IN', 'NZ', 'US', 'TR'];
8
9export default function App() {
10  const [countryCode, setCountryCode] = useState<string>('BD'); // Default country code
11  const [phoneNumber, setPhoneNumber] = useState<string>();
12
13  const { name, flag, dialCode } = getCountryByCode(countryCode); // Get country details
14
15  return (
16    <PhoneNumberInput
17      code={countryCode}
18      setCode={setCountryCode}
19      phoneNumber={phoneNumber}
20      setPhoneNumber={setPhoneNumber}
21      includeCountries={includeCountries}
22    />
23  );
24}

A more complete example can be found in the example directory.

API

`PhoneNumberInput`

Props

Prop	Type	Description	Notes
`code`	`string`	The country code.	Optional. By default, the country code is set to `##` which shows a world icon.
`setCode`	`(code: string) => void`	A function that sets the country code.	Required.
`phoneNumber`	`string`	The phone number.	Optional. By default, no phone number is set.
`setPhoneNumber`	`(phoneNumber: string) => void`	A function that sets the phone number.	Required.
`showFirstOnList`	`string[]`	A list of country codes that should be shown on top of the list.	Optional. By default, countries are shown alphabetically.
`includeCountries`	`string[]`	A list of country codes that specifies which countries can be selected.	Optional. By default, shows all countries.
`excludeCountries`	`string[]`	A list of country codes that specifies which countries cannot be selected.	Optional. By default, does not exclude any countries.
`limitMaxLength`	`boolean`	Limit the maximum length of the phone number for the country as defined in E.164.	Optional. By default, the maximum length of the phone number is not limited.
`modalStyle`	`StyleProp<ViewStyle>`	The style of the modal that shows the country code picker.	Optional.
`modalContainerStyle`	`StyleProp<ViewStyle>`	The style of the container of the modal that shows the country code picker.	Optional.
`...rest`	`...TextInputProps`	Any other props that you want to pass to the `TextInput` component of React Native Paper.	Optional.

[!TIP]
The props that accepts a list o f country codes such as showFirstOnList, includeCountries and excludeCountries should be defined outside the component or memoized to prevent unnecessary recomputations and re-renders!

[!CAUTION] If you set contradictory prop values in includeCountries and excludeCountries props, the excludeCountries prop will take precedence over the includeCountries prop. ie. If you set the same country code in both includeCountries and excludeCountries, the country will be excluded.

Ref Methods

Method Name	Description
`openCountryPicker`	Opens the country code picker.
`closeCountryPicker`	Closes the country code picker.

`CountryPicker`

Props

Prop	Type	Description	Notes
`country`	`string`	The country	Optional.
`setCountry`	`(code: string) => void`	A function that sets the country code.	Required.
`...rest`	`...TextInputProps`	Any other props that you want to pass to the `TextInput` component of React Native Paper.	Optional.

Ref Methods

Method Name	Description
`openCountryPicker`	Opens the country picker.
`closeCountryPicker`	Closes the country picker.

`getCountryByCode`

1type CountryWithoutCode = {
2  name: string;
3  flag: string;
4  dialCode: string;
5};
6
7const getCountryByCode: (code?: string) => CountryWithoutCode;

Design Decisions/FAQ

How to set the default country?

You can set the default country by setting the code prop. This prop accepts a country code. For example, if you want to set the default country to Bangladesh, you can set the code prop to BD.

Why set the country code instead of the dial code?

Multiple countries can have the same dial code. For example, the dial code for United States is +1 and the dial code for Canada is also +1. So, if we were to set the dial code instead of the country code, wrong flag would be shown for the country.

To solve this, this library uses the country code instead of the dial code. This library also exposes a getCountryByCode method that can be used to get the country details from the country code such as the dial code, country name and flag.

Development

This project integrates with react-native-builder-bob. To get started:

Fork and Clone the repository.
Create your feature branch.
Install dependencies using yarn.
Run example project using yarn example android, yarn example ios or yarn example web.
Make your changes and create a PR!
Thank you.

License

This package is licensed under the MIT License.

Contribution

Any kind of contribution is welcome. Thanks!

No vulnerabilities found.

No security vulnerabilities found.