How to make the height of country picker longer?

[felixchan]

Seems that it only fills 1/3 of the screen. Is there any way to customize the height of the scroll picker?

[ncuthbert]

If it helps, I used react-native-country-picker-modal which I found easier to customise, and display that in onPressFlag. In the country picker's onChange, I call this.phoneInput.selectCountry(country.cca2.toLowerCase() to set the country on the phone input. Works well for me.

[m4manjesh]

@ncuthbert I am getting this "undefined is not an object (evaluating '_this.countryPicker.openModal')" while using react-native-country-picker-modal?

componentDidMount() {
this.asyncLoadLastPhone();
this.setState({
pickerData: this.phone.getPickerData(),
});
}

onPressFlag = () => {
this.countryPicker.openModal();
};

selectCountry = (country: any) => {
this.phone.selectCountry(country.cca2.toLowerCase());
this.setState({cca2: country.cca2});
};

<PhoneInput
style={styles.PhoneInput}
textStyle={styles.PhoneInputText}
autoFormat={true}
value={phoneStr}
initialCountry={cca2}
onPressFlag={this.onPressFlag}
ref={ref => {
this.phone = ref;
}}
/>
<CountryPicker
ref={ref => {
this.countryPicker = ref;
}}
onChange={value => this.selectCountry(value)}
translation="eng"
cca2={this.state.cca2}>

[ncuthbert]

@m4manjesh looks like there is a ticket open for the issue you describe. Seeing as it's come up recently for a number of people, it may be related to a recent version and I'd suggest downgrading, if possible.

[m4manjesh]

@ncuthbert Thanks for the response. Which version you are using?

[ncuthbert]

I'm using 0.2.2 at the moment. There was another issue in 0.2.4, so I've downgraded as a workaround.