phone-input-react-native-paper v1.0.7

React Native Paper Phone Input Component

PhoneInput Component

A customizable and modern phone input field for React Native, built on top of react-native-paper components. It includes an inline country picker, phone number formatting (via libphonenumber-js), and a flexible API for easy integration.

Features

• Built-in country picker that can be toggled on/off
• Country code selector with optional labels
• Automatic phone number formatting powered by libphonenumber-js
• React Native Paper-based UI, allowing seamless integration with the Paper theme
• Customizable via props for labels, placeholders, styles, and more

Preview

Installation

1. Install react-native-paper (if you haven’t already):

   npm install react-native-paper
   # or
   yarn add react-native-paper

2. Install react-native-paper-phone-input (if you haven’t already):

   npm install react-native-paper-phone-input
   # or
   yarn add react-native-paper-phone-input

3. Add <PaperProvider> to your app.

import { Provider as PaperProvider } from 'react-native-paper';

const App = () => (
  <PaperProvider>
    <PhoneInput />
  </PaperProvider>
);

Usage

Below is a basic usage example:

import React, { useState } from 'react';
import { View } from 'react-native';
import PhoneInput from './PhoneInput';

export default function MyScreen() {
  const [phoneNumber, setPhoneNumber] = useState('');

  return (
    <View style={{ padding: 16 }}>
      <PhoneInput
        defaultCountry="US"
        value={phoneNumber}
        onChangePhone={(formattedPhone) => setPhoneNumber(formattedPhone)}
      />
    </View>
  );
}

Example with Custom Labels and Styles

<PhoneInput
  inputLabel="Mobile Number"
  countryPickerLabel="Pick a Country"
  inputPlaceholder="(555) 555-5555"
  defaultCountry="CA"
  value={phoneNumber}
  onChangePhone={(formattedPhone) => setPhoneNumber(formattedPhone)}
  withLabels={true}
  withCountryPicker={true}
  containerStyle={{ marginVertical: 12 }}
  inputStyle={{ backgroundColor: '#f8f8f8' }}
  countryPickerStyle={{ backgroundColor: '#f8f8f8' }}
/>

Props

Functions & Methods

• Phone Number Formatting: Leveraging AsYouType from libphonenumber-js to format the entered number based on the selected country’s dial code.
• onSelect: Internal callback when a country is selected, updating local state.
• handleChangeText: Internal handler to format the phone number and call onChangePhone.

Theming

Because this component uses react-native-paper, it respects the Paper theme:

• The selectionColor defaults to theme.colors.primary.
• You can override TextInput themes or styles through the Paper Theme API.

Contributing

1. Fork the repository.
2. Create your feature branch: git checkout -b feature/my-new-feature.
3. Commit your changes: git commit -m 'Add some feature'.
4. Push to the branch: git push origin feature/my-new-feature.
5. Open a Pull Request on GitHub.

License

This component is open-source. You may distribute or modify it under the terms of the MIT License (or whichever license you choose for your repo).

Enjoy building with PhoneInput! If you have any questions or run into issues, feel free to open an issue or submit a pull request. Happy coding!