react-native-intl-phone-input v1.2.27

React-Native-INTL-Phone-Input

It's an international phone input with phone mask.

USAGE

install npm library

npm install react-native-intl-phone-input

İmport library

import IntlPhoneInput from 'react-native-intl-phone-input';

use component

  onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
    console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
  };
  render() {
    return (
      <SafeAreaView>
        <IntlPhoneInput onChangeText={this.onChangeText} defaultCountry="TR" />
      </SafeAreaView>
    );
  }

Custom Modal Example

 renderCustomModal=(modalVisible, countries, onCountryChange) => (
    <Modal visible={modalVisible}>
      <SafeAreaView style={{ flex: 1 }}>
        <View>
          <View>
            <TextInput placeholder="Search" />
            <Text>🔍</Text>
          </View>
          <FlatList
            style={{ flex: 1 }}
            data={countries}
            keyExtractor={(item, index) => index.toString()}
            renderItem={({ item }) => (
              <TouchableWithoutFeedback onPress={() => onCountryChange(item.code)}>
                <Text>{item['your language code here for example tr']}</Text>
              </TouchableWithoutFeedback>
            )}
          />
        </View>
        <TouchableOpacity onPress={() => this.phoneInput.hideModal()}>
          <Text>CLOSE</Text>
        </TouchableOpacity>
      </SafeAreaView>
    </Modal>
  )

  render(){
    return <IntlPhoneInput
        ref={(ref) => this.phoneInput = ref}
        customModal={this.renderCustomModal}
        defaultCountry="TR"
        lang="TR"
      />;
  }