Placeholder TextInput about react-native-phone-input HOT 10 CLOSED

@emjayschoen to achieve a solution that supports a initial country code and a placeholder, you should do this:

Edit index.js of react-native-phone-input and add the following method:

componentDidMount() { if (this.props.textProps.placeholder) { this.setState({ formattedNumber: this.state.formattedNumber + ' ' + this.props.textProps.placeholder}); } }

Then you should add a onFocus on <TextComponent ... /> (line 189 of version 0.2.1):

onFocus={() => { this.setState({ formattedNumber: formattedNumber.replace(/[^0-9+-]/g, '') }); }}

PhoneInput field only allows the user to type numbers (because it uses keyboardType = "phone-pad"), so when user focus on input field, it removes all non-phone digits (0-9 +-) of placeholder.

Then all you got to do is to declare a placeholder in <PhoneInput .../>, like this:

<PhoneInput textProps={{ placeholder: 'Cellphone', placeholderTextColor: '#c0c0c0' }} initialCountry={"us"} />

The result will be:
"+1 Cellphone" (for US)
When user focus the input field, it will remain "+1" and the user types the cellphone number.

from react-native-phone-input.

Hi @mohamedtijani

You can do

<PhoneInput ref="phone" textProps={{ placeholder: "1122" }} />

for add placeholder to the input

from react-native-phone-input.

Hi @thegamenicorus I still cant add a placeholder. Even when copying the above code. It does not display.
Here is my code: <PhoneInput ref="phone" onPressFlag={this.onPressFlag} textProps={{ placeholder: '1122' }} />

from react-native-phone-input.

hi @ikiugu did you get that hoe to use placeholder...tell me how use it

from react-native-phone-input.

Hi @ashutoshshubam unfortunately I did not get how to use this

from react-native-phone-input.

still same issue with no luck

from react-native-phone-input.

Same issue

from react-native-phone-input.

Hi @ikiugu use react-native-country-picker-modal
it has placeholder

from react-native-phone-input.

The problem (for me at least) was actually that the default initialCountry value ('us') was setting the value of the input to "+1", so the non-empty value meant the placeholder wasn't shown. If I backspaced to delete the "+1", the placeholder appeared as I set it.

The novel solution is setting initialCountry code to null, which shows the placeholder but means users will always have to manually select a country code every time.

A better solution would allow setting both an initial country code and a placeholder. If the placeholder is set, show the placeholder instead of the flag and "+1" value, then add the flag and "+1" once the user focuses on the input for the first time.

@thegamenicorus Thoughts on whether something like this could be added?

from react-native-phone-input.

@thegamenicorus Can this fix be implemented and the package updated asap?

from react-native-phone-input.