How to update internal phone number value when using a textComponent

[jamesl1001]

I want to use the various methods such as isValidNumber(), getNumberType(), getValue(), getISOCode()` etc.

When I use the textComponent prop to customise the UI, how do I pass the value from this custom TextInput into the PhoneInput's state to be used by those methods?

<PhoneInput
    allowZeroAfterCountryCode={false}
    initialCountry="gb"
    // onChangePhoneNumber={test => console.log(test)}
    onSelectCountry={() => this.setState({ countryCode: this.test.getCountryCode() }) }
    onSubmitEditing={() => console.log('111')}
    ref={ref => this.test = ref}
    textComponent={() => (
        <>
            <Text>Mobile number</Text>
            <View>
                <Text onPress={() => this.test.onPressFlag()}>+{this.state.countryCode}</Text>
                <TextInput
                    keyboardType="phone-pad"
                    onChangeText={text => this.test.setState({ inputValue: text })}
                    placeholder="7123456789"
                />
            </View>
        </>
    )}
/>

[kobagapu]

<PhoneInput
ref={ref => {
phoneno = ref;
}}
onChangePhoneNumber ={(num)=>{
setPhone(num)
}}
style={{marginLeft:"20%"}}
initialCountry = 'us'
textProps={{
placeholder:I18n.t('phone'),
returnKeyType: 'done',
keyboardType: 'phone-pad',
style:(styles.input)
}}
/>

This works

[jamesl1001]

That's because you are not using the textComponent prop.

[raethlein]

Hey, based on this line , some probs such as the change listener are passed to the component, so instead of using your own onChangeText, you could try to pass the probs to the underlying element like:

textComponent={(props) => (
        <>
            <Text>Mobile number</Text>
            <View>
                <Text onPress={() => this.test.onPressFlag()}>+{this.state.countryCode}</Text>
                <TextInput
                    keyboardType="phone-pad"
                    // onChangeText={text => this.test.setState({ inputValue: text })}
                    placeholder="7123456789"
                    {...props}
                />
            </View>
        </>
    )}

[OsamaMukhtar]

I am having the same problem

[marlene89]

same issue. any one find an answer?

[NataD]

Any updates on the issue? I even cannot get the value from the phone input using onChangePhoneNumber once I am using custom textComponent

[kovetskiy]

I had the same issue but then I figured out that I was using textComponent like that:

textComponent={() => ( <MyInput /> )

while I actually had to pass props:

textComponent={(props) => ( <MyInput {...props} /> )