/react-native-phone-input

React Native Phone Input with validation

Primary LanguageTypeScriptMIT LicenseMIT

React Native Phone Input

International phone number input for React Native with country picker supporting 235 countries. Uses ruimarinho/google-libphonenumber to validate input and automatically translates to valid e164 format.

Installation

yarn add @sesamsolutions/phone-input

or

npm install @sesamsolutions/phone-input

Usage

import PhoneInput from '@sesamsolutions/phone-input'

Example

import React from 'react'
import { Alert, View } from 'react-native'
import PhoneInput from '@sesamsolutions/phone-input'

const App = () => {

    const handleChange = (data) => {
        if (data.isValid) {
            Alert.alert(data.e164)
        } else {
            console.log(data.input + ' is not a valid phone number')
        }
    }

    return (
        <View style={{ alignItems: 'center', flex: 1, justifyContent: 'center' }}>
            <PhoneInput
                initialCountry="US"
                onChange={handleChange} />
        </View>
    )
    
}

export default App

Props

initialCountry

Set the initial country and dial code. Defaults to US.

onChange

Returns an object containing information about the Phone number every time the input or value changes.

  • countryCode: currently selected country code. null if not selected.
  • dialCode: current dial code. null if not selected.
  • e164: e164 valid phone number. null if invalid.
  • input: raw phone number input. Same as onChangePhoneNumber.
  • isValid: boolean indicating if input is a valid phone number.

onChangePhoneNumber

Returns current raw input string. Use onChange instead to benefit from additional validations.

value

Changes the current input. Be careful not to update this with onChange. This will cause an endless loop.

allowCustomDialCode

boolean indicating whether custom dial code input should be allowed or not. When set to false you can only select dial codes from the country picker. Defaults to true.

dismissKeyboard

Hide the keyboard automatically when the input is considered valid e164 format. Defaults to true.

style

Customize the phone number input.

textStyle

Customize text inside the phone number input.