React Native International Phone Input

Description:

A customizable international telephone input box for React Native apps.

Installation:

# NPM
$ npm install react-native-phone-input --save

Usage:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import PhoneInput from 'react-native-phone-input'
class App extends Component{
    constructor(){
        super()
        this.state = {
            valid: '',
            type: '',
            value: ''
        }
        this.updateInfo = this.updateInfo.bind(this)
        this.renderInfo = this.renderInfo.bind(this)
    }
    updateInfo(){
        this.setState({
            valid: this.refs.phone.isValidNumber(),
            type: this.refs.phone.getNumberType(),
            value: this.refs.phone.getValue()
        })
    }
    renderInfo(){
        if(this.state.value)
        return (
            <View style={styles.info}>
                    <Text>Is Valid: <Text style={{fontWeight:'bold'}}>{this.state.valid.toString()}</Text></Text>
                    <Text>Type: <Text style={{fontWeight:'bold'}}>{this.state.type}</Text></Text>
                    <Text>Value: <Text style={{fontWeight:'bold'}}>{this.state.value}</Text></Text>
            </View>
        )
    }
    render(){
        return(
            <View style={styles.container}>
                <PhoneInput ref='phone'/>
                
                <TouchableOpacity onPress={this.updateInfo} style={styles.button}>
                    <Text>Get Info</Text>
                </TouchableOpacity>
                {this.renderInfo()}
            </View>
        )
    }
}
let styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        padding: 20,
        paddingTop: 60
    },
    info: {
        //width: 200,
        borderRadius: 5,
        backgroundColor: '#f0f0f0',
        padding:10,
        marginTop: 20,
    },
    button:{
        marginTop: 20,
        padding: 10,
    }
})
module.exports = App

Preview:

react-native-phone-input

Add Comment