0.0.2 • Published 4 years ago

react-native-international-telephone-input v0.0.2

Weekly downloads
8
License
MIT
Repository
github
Last release
4 years ago

International Telephone Input React Native

It's an international phone input with phone mask modified and distributed open source by Servewish.

npm.io

USAGE

install npm library

npm install react-native-international-telephone-input

İmport library

import IntlPhoneInput from 'react-native-international-telephone-input';

use component

  onChangeText = ({dialCode, unmaskedPhoneNumber, phoneNumber, isVerified}) => {
    console.log(dialCode, unmaskedPhoneNumber, phoneNumber, isVerified);
  };
  render() {
    return (
      <SafeAreaView>
        <IntlPhoneInput onChangeText={this.onChangeText} defaultCountry="TR" renderAction={() => <Text>XX</Text>} />
      </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"
      />;
  }
Supported Languages
TRTurkish
LTLithuanian
ENEnglish
RURussian
prop namestypedefault valuecomment
langStringTranslate country name on modal
placeholderStringThis prop change the phone input placeholder
defaultCountryStringTRYou can change your default country code
onChangeTextFunctionThis function works when input text is changed
customModalFunctionGenerate your custom modal
phoneInputStyleStyleThis prop is about the text field's ReactNative.TextInput style
containerStyleStyleThis prop is about the text field's container style
dialCodeTextStyleStyle
flagStyleStyle
modalContainerStyleThis prop is about the modal field's SafeAreaView style.
filterInputStyleStyleThis prop is about the top of model filter text style
closeButtonStyleStyleThis prop is about text style of bottom modal
modalCountryItemCountryNameStyleStyle
filterTextStringFilterThis is the text of placeholder input of top modal
closeTextStringCLOSEThis prop is about the text of bottom modal
disableCountryChangeBoolfalseThis prop is about disable open select country modal
renderActionFunctionThis prop attaching a component right of phone input