Nomad Packaging Mechanism

    react-native-phone-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.4 • Public • Published

    React Native Phone Input

    Demo of Phone Input box for React Native (android/ios)

    2560-02-08 00_04_18 2560-02-07 01_32_33

    Versions

    • 0.x.x has been deprecated and is no longer maintained
    • 1.x.x is the current version and is actively maintained (please submit a PR for improvements)

    Installation

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

    Basic Usage

    import PhoneInput from 'react-native-phone-input'
    
    render(){
        return(
            <PhoneInput ref='phone'/>
        )
    }

    see full basic example

    Using a Custom Country Picker

    (android/ios)

    2560-02-08 01_46_21 2560-02-08 01_10_22
    1. In componentDidMount, keep this.phone.getPickerData() in state
    2. Create a function to open your modal (onPressFlag in example)
    3. <PhoneInput onPressFlag={function in 2.} />
    4. Call this.phone.selectCountry to set the country of <PhoneInput />
    componentDidMount(){
        this.setState({
            pickerData: this.phone.getPickerData()
        })
    }
    
    onPressFlag(){
        this.myCountryPicker.open()
    }
    
    selectCountry(country){
        this.phone.selectCountry(country.iso2)
    }
    
    render(){
        return(
            <View style={styles.container}>
                <PhoneInput
                    ref={(ref) => { this.phone = ref; }}
                    onPressFlag={this.onPressFlag}
                    initialCountry={'us'}
                    initialValue="13178675309"
                    textProps={{
                        placeholder: 'Enter a phone number...'
                    }}
                />
    
                <ModalPickerImage
                    ref={(ref) => { this.myCountryPicker = ref; }}
                    data={this.state.pickerData}
                    onChange={(country)=>{ this.selectCountry(country) }}
                    cancelText='Cancel'
                />
            </View>
        )
    }

    see full custom picker example

    Using a Custom (External) Library Picker

    We recommend using the awesome react-native-country-picker-modal to select country

    (android/ios)

    2560-02-08 02_43_18 2560-02-08 02_26_20
    onPressFlag(){
        this.countryPicker.openModal()
    }
    
    selectCountry(country){
        this.phone.selectCountry(country.cca2.toLowerCase())
        this.setState({cca2: country.cca2})
    }
    
    // Updates the Flag on change
    onPhoneInputChange = (value, iso2) => {
        const newState = {
            phoneInputValue: value,
        };
    
        if (iso2) {
            newState.countryCode = iso2?.toUpperCase();
        }
    
        this.setState(newState);
    }
    
    render(){
        return(
            <View style={styles.container}>
                <PhoneInput
                    ref={(ref) => { this.phone = ref; }}
                    onPressFlag={this.onPressFlag}
                    initialCountry={'us'}
                    initialValue="13178675309"
                    onChangePhoneNumber={this.onPhoneInputChange}
                    textProps={{
                        placeholder: 'Enter a phone number...'
                    }}
                />
    
                <CountryPicker
                    ref={(ref) => { this.countryPicker = ref; }}
                    onChange={(value)=> this.selectCountry(value)}
                    translation='eng'
                    cca2={this.state.cca2}
                >
                    <View></View>
                </CountryPicker>
            </View>
        )
    }

    see full custom library picker example

    Custom Flag component

    If you need to change how the flag is rendered, you can use the renderFlag property. This function is passed the flag image source as a named imageSource argument.

    Note: if you just need custom styles for the flag image, you can pass the flagStyle prop, only use renderFlag if you need to change what components are actually rendered within the touchable area of the flag.

    <PhoneInput 
        renderFlag={({ imageSource }) => {
            return (
                <View>
                    <Icon name="chevron" />
                    <Image source={imageSource} width={customWidth} height={customHeight} style={customStyles} />
                </View>
            )
        }}
    />

    Custom Countries

    <PhoneInput countriesList={require('./countries.json')} />

    Configuration

    Properties:

    Property Name Type Default Description
    autoFormat boolean false Format phone number while typing
    accessibilityLabel string 'Telephone input' Label for accessibility purposes
    initialCountry string 'us' initial selected country
    allowZeroAfterCountryCode bool true allow user input 0 after country code
    disabled bool false if true, disable all interaction of this component
    initialValue string null initial phone number
    style object null custom styles to be applied if supplied
    flagStyle object null custom styles for flag image eg. {{width: 50, height: 30, borderWidth:0}}
    textStyle object null custom styles for phone number text input eg. {{fontSize: 14}}
    textProps object null properties for phone number text input eg. {{placeholder: 'Telephone number'}}
    textComponent function TextField the input component to use
    offset int 10 distance between flag and phone number
    pickerButtonColor string '#007AFF' set button color of country picker
    pickerBackgroundColor string 'white' set background color of country picker
    pickerItemStyle object null custom styles for text in country picker eg. {{fontSize: 14}}
    cancelText string 'Cancel' cancel word
    confirmText string 'Confirm' confirm word
    cancelTextStyle object null custom styles for country picker cancel button
    confirmTextStyle object null custom styles for country picker confirm button
    onChangePhoneNumber function(number) null function to be invoked when phone number is changed
    onSelectCountry function(iso2) null function to be invoked when country picker is selected
    onPressFlag function() null function to be invoked when press on flag image
    renderFlag function({ imageSource }) null custom render function for the flag component, passed an image src
    countriesList array null custom countries list

    Functions:

    Function Name Return Type Parameters Description
    isValidNumber boolean none return true if current phone number is valid
    getNumberType string none return true type of current phone number
    getValue string none return current phone number (unformatted)
    getFlag object iso2:string return flag image
    getAllCountries object none return country object in country picker
    getPickerData object nont return country object with flag image
    focus void none focus the phone input
    blur void none blur the phone input
    selectCountry void iso2:string set phone input to specific country
    setValue void string set phone input value
    getCountryCode string none return country dial code of current phone number
    getISOCode string none return country iso code of current phone number
    onPressCancel func none handler to be called when taps the cancel button
    onPressConfirm func none handler to be called when taps the confirm button

    Install

    npm i react-native-phone-input

    DownloadsWeekly Downloads

    6,718

    Version

    1.3.4

    License

    MIT

    Unpacked Size

    1.99 MB

    Total Files

    263

    Last publish

    Collaborators

    • zizzle6717