react-native-phone-input-fs

    0.3.0 • Public • Published

    React Native Phone Input

    Phone input box for React Native

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

    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

    Custom Your Own Picker

    2560-02-08 01_10_22 2560-02-08 01_46_21
    1. in componentDidMount, keep this.phone.getPickerData() in state
    2. create function for open your modal (onPressFlag in example)
    3. <PhoneInput onPressFlag={function in 2.} />
    4. call this.phone.selectCountry for set 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}
                />
     
                <ModalPickerImage
                    ref={(ref) => { this.myCountryPicker = ref; }}
                    data={this.state.pickerData}
                    onChange={(country)=>{ this.selectCountry(country) }}
                    cancelText='Cancel'
                />
            </View>
        )
    }

    see full custom picker example

    Custom Library Picker

    use awesome react-native-country-picker-modal to select country

    2560-02-08 02_26_20 2560-02-08 02_43_18
    onPressFlag(){
        this.countryPicker.openModal()
    }
     
    selectCountry(country){
        this.phone.selectCountry(country.cca2.toLowerCase())
        this.setState({cca2: country.cca2})
    }
     
    render(){
        return(
            <View style={styles.container}>
                <PhoneInput
                    ref={(ref) => { this.phone = ref; }}
                    onPressFlag={this.onPressFlag}
                />
     
                <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:

    Property Name Type Default Description
    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
    value 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
    buttonTextStyle object null custom styles for country picker 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
    countriesList array null custom countries list
    autoFormat bool false automatically format phone number as it is entered

    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
    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
    getCountryCode string none return country dial code of current phone number
    getISOCode string none return country iso code of current phone number

    Install

    npm i react-native-phone-input-fs

    DownloadsWeekly Downloads

    0

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    4.35 MB

    Total Files

    395

    Last publish

    Collaborators

    • kdurg