There is no way to put a gap between country code and phone number

[ranarashidsadiq]

I searched and found there is no way to put a blank space between country code and actual phone number.. I want (+xx xxxxxxxxxx) but it allows me to go with this (+xxxxxxxxxxxx)..

[giacomocerquone]

I'm about to use this module too and I need a similar thing. A way to force this behaviour is to use this component just as the prefix input and then use another text input for the phone number

But I get you it might be an overkill We could add a flagOffset and prefixOffset prop. What do you think? @thegamenicorus

[ujwal-setlur]

Yup, need this too. Will provide a PR.

[ujwal-setlur]

you can do it without hacking the code, actually. Just use libphonenumber-js and the onChangePhoneNumber callback:

npm install libphonenumber-js --save

import React from "react";
import { StyleSheet, View } from "react-native";
import PhoneInput from "react-native-phone-input";
import { formatNumber } from "libphonenumber-js";

type Props = {};

export default class Login extends React.Component<Props> {

  constructor(props) {
    super(props);

    this.onChangePhoneNumber = this.onChangePhoneNumber.bind(this);

    this.state = {
      phoneNumber: ""
    };
  }

  onChangePhoneNumber(newNumber: string) {
    console.log("Setting new number to " + newNumber);
    this.setState({
      phoneNumber: formatNumber(newNumber, "International")
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <PhoneInput
          ref={(ref) => {
                 this.phone = ref;
               }}
          onPressFlag={this.onPressFlag}
          onChangePhoneNumber={this.onChangePhoneNumber}
          value={this.state.phoneNumber}
        />
      </View>
      );
  }
}

With this, you can format the number in all the ways that libphonenumber-js does.