Have a placeholder for react native picker

Question

Is there a way to have a placeholder for the react native picker that is shown before the user clicks on it. The idea would be to have a picker that says "Nationality" and once you click and choose your country it renders the country. I want to do this without having "Nationality" as an available option in the picker.

I faced the same problem. As the solution I used a 3rdparty library [https://github.com/n4kz/react-native-material-dropdown](https://github.com/n4kz/react-native-material-dropdown). It's solid and stable enough. — vogdb, Feb 20 '19 at 06:58

score 8 · Answer 1 · answered Feb 13 '17 at 16:38

8

Place a first children as <Picker.Item value='' label='Placeholder text...' />

answered Feb 13 '17 at 16:38

sospedra

14,238
3
21
32

The problem with this approach, if I remember correctly, is that the option shows up in the list. In the end I ended up placing my placeholder in a component that renders the placeholder if there is no value selected. – Tiagojdferreira Feb 14 '17 at 09:04
That's correct @Tiagojdferreira tho it mimics the web standard implementation: http://codepen.io/sospedra/pen/ZLwrew . As you mentioned, to remove it completely render different components. – sospedra Feb 14 '17 at 10:01
5

@Tiagojdferreira Could you provide the solution in a new answer and accept it? That way other people can use it as well. – Anima-t3d Mar 13 '17 at 10:33
@Deerloper: How can we disable the 'Select your option' using react native picker as showed in http://codepen.io/sospedra/pen/ZLwrew – Mohit Pandey Apr 29 '17 at 06:07
@MohitPandey mmmm what do you mean with "disable"? – sospedra May 03 '17 at 12:49
In the codepen, there is a first option in the list which is 'disabled'... there is no way (as far as i can see) to disable an item in the picker list. – Petrov Feb 06 '18 at 19:22
@Tiagojdferreira could you give a bit more of an idea how your solution works ? If there is no value and you only show the placeholder, how are you able to show the picker when there is a click on it ? – Petrov Feb 06 '18 at 19:52
@Petrov I am sorry but I did that for a company I no longer work for, so I do not have access to the code. If I remember correctly we had a Label component that was responsible for rendering the result, and a picker inside it. – Tiagojdferreira Feb 07 '18 at 15:37

score 6 · Answer 2 · edited Jul 22 '19 at 13:02

6

I'm not clear this is the right way.

<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 function:

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

edited Jul 22 '19 at 13:02

TalESid

2,304
1
20
41

answered Jul 22 '19 at 11:00

Amal K.R

61
1
2

its a good one but you can rather use easier values to compare for header item. I'm editing you answer for that! – TalESid Jul 22 '19 at 11:32

score 4 · Answer 3 · answered Apr 26 '19 at 12:58

You may use native-base's picker instead.

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>

score 1 · Answer 4 · answered Nov 17 '19 at 20:27

Using a state in the same component you can filter the elements once the user have been chosen an element.

For example:

...
const [selectedValue, setValue] = useState(0)
const values = ['Your placeholder', 'Option A', 'Option B', 'Option C']
....
        <Picker
          mode="dropdown"
          selectedValue={selectedValue}
          onValueChange={(itemValue) => setValue(itemValue)}
        >
          {values
            .filter((value, index) => selectedValue === 0 ? value : index === 0 ? false : value)
            .map((value, index) => (
              <Picker.Item label={value} value={value} key={index} />
            ))}
        </Picker>

score 1 · Answer 5 · answered Jan 21 '21 at 11:40

I've been looking for this as well and solved it on my own as below. Hope this helps other people as well.

make a function that checks for an empty value.

  const isPlaceholder = (value) => {
    return value == "";
  }

We are setting the first option as the placeholder, but changing the style to make it look like the placeholder if the value is empty (which we set the placeholder value as "").

If the option selected has value as empty, then we use styles.placeholder. Else, we just use normal style (styles.picker).

            <Picker
              selectedValue={gender}
              style={
                isPlaceholder(gender) ? (styles.placeholder) : (
                  styles.picker
                )}

              onValueChange={(itemValue, itemIndex) => setGender(itemValue)}
              <Picker.Item color="grey" label="Choose Gender..." value="" /> 

// the first option is grey in the 
// picker to make it more like a title 

              <Picker.Item label="Male" value="male" />
              <Picker.Item label="Female" value="female" />
            </Picker>

Styling for placeholder and values

const styles = StyleSheet.create({
  placeholder: {
    height: 50, width: '100%',
    color: "grey",  // PLACE HOLDER COLOR
  },
 picker: {
    height: 50, width: '100%',
    color: "blue",  // VALUE COLOR
  },
)}

Have a placeholder for react native picker

5 Answers5

Linked