Skip to content

garganurag893/react-native-phone-number-input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

39 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Anurag Garg Anurag Garg

React Native Phone Number Input

Performance oriented React Native Phone Number Input with typings and proper validation for any country.

Made with ❀️ by developer for developers

build build build build

Want to show your love?

Click on 🌟 button.

Table of Contents

Installation

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

OR

$ npm i react-native-phone-number-input --save

Features

Usage

For more complete example open App.tsx

import React, { useState, useRef } from "react";
import {
  SafeAreaView,
  StyleSheet,
  View,
  StatusBar,
  TouchableOpacity,
  Text,
} from "react-native";
import PhoneInput from "react-native-phone-number-input";
import { Colors } from "react-native/Libraries/NewAppScreen";

const App: React.FC = () => {
  const [value, setValue] = useState("");
  const [formattedValue, setFormattedValue] = useState("");
  const [valid, setValid] = useState(false);
  const [showMessage, setShowMessage] = useState(false);
  const phoneInput = useRef<PhoneInput>(null);
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}>
        <SafeAreaView style={styles.wrapper}>
          {showMessage && (
            <View style={styles.message}>
              <Text>Value : {value}</Text>
              <Text>Formatted Value : {formattedValue}</Text>
              <Text>Valid : {valid ? "true" : "false"}</Text>
            </View>
          )}
          <PhoneInput
            ref={phoneInput}
            defaultValue={value}
            defaultCode="DM"
            layout="first"
            onChangeText={(text) => {
              setValue(text);
            }}
            onChangeFormattedText={(text) => {
              setFormattedValue(text);
            }}
            withDarkTheme
            withShadow
            autoFocus
          />
          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              const checkValid = phoneInput.current?.isValidNumber(value);
              setShowMessage(true);
              setValid(checkValid ? checkValid : false);
            }}
          >
            <Text>Check</Text>
          </TouchableOpacity>
        </SafeAreaView>
      </View>
    </>
  );
};

export default App;

Props

  • defaultCode?: CountryCode
  • withDarkTheme?: boolean
  • withShadow?: boolean
  • autoFocus?: boolean
  • defaultValue?: string
  • value?: string
  • disabled?: boolean
  • disableArrowIcon?: boolean
  • placeholder?: string;
  • onChangeCountry?: (country: Country) => void;
  • onChangeText?: (text: string) => void;
  • onChangeFormattedText?: (text: string) => void;
  • containerStyle?: StyleProp<ViewStyle>;
  • textContainerStyle?: StyleProp<ViewStyle>;
  • renderDropdownImage?: JSX.Element;
  • textInputProps?: TextInputProps;
  • textInputStyle?: StyleProp<TextStyle>;
  • codeTextStyle?: StyleProp<TextStyle>;
  • flagButtonStyle?: StyleProp<ViewStyle>;
  • countryPickerButtonStyle : StyleProp<ViewStyle>;
  • layout?: "first" | "second";
  • filterProps?: CountryFilterProps;
  • countryPickerProps?: any;

Methods

  • getCountryCode: () => CountryCode
  • getCallingCode: () => string | undefined
  • getNumberAfterPossiblyEliminatingZero: () => {number: string , formattedNumber: string };
  • isValidNumber: (number: string) => boolean

FAQ

Is it supported and tested both on android and iOS?

YES

NSURLResponse allHeaderFields: unrecognized selector sent to instance XX crash?

Upgrade versions['Flipper'] ||= '~> 0.37.0' in podfile.

Contributing

To get started...

Step 1

  • Option 1

    • 🍴 Fork this repo!
  • Option 2

    • πŸ‘― Clone this repo to your local machine using https://github.com/garganurag893/react-native-phone-number-input

Step 2

  • HACK AWAY! πŸ”¨πŸ”¨πŸ”¨

Step 3

Support

Reach out to me at one of the following places!

License

License

Hire

Looking for a React/React-Native Freelance Expert? Email at [email protected]