@humanz/react-native-phone-input v1.2.2

React Native Phone Input

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

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)

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 \

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) | | | | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |

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 Countries

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

Configuration

Properties:

Functions: