Can a React Native Picker have some kind of divider or separator between some Items?

Question

In other React Native and Native Base components I've seen that among the main selectable entry items you can add non-selectable things usually called dividers or separators.

I can't see anything of the kind in the Picker components however.

I'm implementing something like favourites or recent items sorted at the top of the picker. It would be nice to be able to insert a kind of visible dividing line between the favourite/recent section and the main section.

+-----------+
| Ford      |
| Chevrolet |
+-----------+
| Toyota    |
| Nissan    |
| ...       |

It would be even nicer if I could add a heading with text before each section.

+-----------+
|==Recent===|
+-----------+
| Ford      |
| Chevrolet |
+-----------+
|=The rest==|
+-----------+
| Toyota    |
| Nissan    |
| ...       |

Does the Picker component provide this, or can it be easily added?

Answer 1

The Picker component from RN doesn't provide this out of the box. If you want to use the very customizable Picker, you better use https://github.com/sohobloo/react-native-modal-dropdown. There is an API prop called renderSeparator that I think you could use easily for your purpose.

Answer 2

Not sure about creating sections in a picker item list. What you can do is add line on selected.

IOS

You can add the itemStyle props on the Picker component. So you can add border on selected element for example.

Here is what I've done

<Picker
    selectedValue={filter}
    onValueChange={this._onFilterSelect}
    style={sharedStyles.floatingPicker}
    itemStyle={{ borderTopWidth: 1, borderTopColor: '#000', borderBottomWidth: 1, borderBottomColor: '#000' }}
>

Android

You can find the solution for Android here but I've never tested it. And the solution would add the style for all picker in the app. If it's what you want it's cool.

--

About the heading, I'm not sure this kind of build in element existe. As an Picker.Item exist, it would be nice to have a Picker.Headeror something but I've never found something like this in the doc or on internet. If I find something that could help, I'll put it here.

Hope this helps