Have a placeholder to respond to the collector

Question

Is there a way to have a placeholder for the corresponding native collector, which is displayed before the user clicks on it. The idea would be to have a collector who says “Nationality,” and as soon as you click and select your country, it will display the country. I want to do this without having the "Nationality" option in the collector available.

Answer 1

Put the first kids like <Picker.Item value='' label='Placeholder text...' />

Answer 2

Instead, you can use the native base collector.

1. Run:

npm i native-base --save

2. Import it as:

import {Picker} from 'native-base';

3. Use it as:

<Picker
placeholder="Start Year" // yipeee, placeholder
iosIcon={<Ionicons name="ios-arrow-down" />} // right icon
selectedValue={this.state.selected_id} // your selected item value
style={{
    // your styles
}}
// onValueChange={this.onValueChange.bind(this)} // use it the way it suites you
onValueChange={(v)=>this.setState({selected_id:v})} // use it the way it suites you
>


 <Picker.Item label="Val 1" value="1" />
   <Picker.Item label="Val 2" value="2" />
   <Picker.Item label="Val 3" value="3" />

</Picker>

Answer 3

, .

<Picker selectedValue={locals.value}
onValueChange={value => {
    if (value != "0")
        this.pickerValueChange(value)

    // so it won't care if header is selected...
}}>
    <Picker.Item label="Select Type" value="0" />
    <Picker.Item label="Diesel" value="Diesel" />
    <Picker.Item label="Gas" value="Gas" />
    <Picker.Item label="Electricity" value="Electricity" /> 
</Picker>

pickerValueChange:

pickerValueChange = val => {
    // state change or whatever you want to perform on picker update
}