React-Native-INTL-Phone-input-field

It's an international phone input component with phone mask for Android and iOS.

USAGE

Install npm library

npm install react-native-intl-phone-input-field

İmport library

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

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 | | --- | --- | TR | Turkish | LT | Lithuanian | EN | English | RU | Russian |

prop names |type |default value | comment --- | --- | --- | --- countriesData | Array | | You can upload your own country information lang | String | | Translate country name on modal placeholder | String | | This prop change the phone input placeholder defaultCountry | String | TR | You can change your default country code mask | String | | You can set custom mask onChangeText | Function | | This function works when input text is changed customModal | Function | | Generate your custom modal phoneInputStyle | Style | | This prop is about the text field's ReactNative.TextInput style containerStyle | Style | | This prop is about the text field's container style dialCodeTextStyle | Style | |
flagStyle | Style | |
modalContainer | Style | | This prop is about the modal field's SafeAreaView style. filterInputStyle | Style | | This prop is about the top of model filter text style closeButtonStyle | Style | | This prop is about text style of bottom modal modalCountryItemCountryNameStyle | Style | |
filterText | String | Filter | This is the text of placeholder input of top modal closeText | String | CLOSE | This prop is about the text of bottom modal disableCountryChange | Bool | false | This prop is about disable open select country modal renderAction | Function | | This prop attaching a component right of phone input placeholderTextColor | String | black | This prop allows you to assign a color to the placeholderText

License

Based on React-Native-INTL-Phone-input