Skip to content

bulkinav/react-native-phone-number-input

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 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"
            placeholder="Mobile Number"
            placeholderTextColor="rgba(0,0,0,0.35)"
            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;
  • placeholderTextColor?: 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;
  • flatFlags?: boolean;

Methods

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

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 garganurag893@gmail.com

About

React Native component for phone number.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 39.1%
  • Java 23.6%
  • Objective-C 18.3%
  • TypeScript 14.2%
  • Ruby 2.5%
  • Starlark 2.3%