Feature request: Separator

[gjvpaet]

It would be great if we can add an item separator in the picker dropdown items.

[tayyabaAslam]

@gjvpaet you can add separator using propsExtractor like this:

propsExtractor={({value, index}) => { return (value === 'lastElement' ? {style: {}} : {style: {borderBottomColor: '#D1D1D1', borderBottomWidth: 1, paddingTop: 5}}) }}

We will not add separator for last item.

[IkaroAlef]

@gjvpaet you can add separator using propsExtractor like this:

propsExtractor={({value, index}) => { return (value === 'lastElement' ? {style: {}} : {style: {borderBottomColor: '#D1D1D1', borderBottomWidth: 1, paddingTop: 5}}) }}

We will not add separator for last item.

it doesn't work for me. Separator keeps showing in the last item.

Edit: it worked, I forgot to set the value of the last element.

[tayyabaAslam]

Great!

[IkaroAlef]

Great!

but the "index" is returning undefine. It's working with "value" but I need to update this propsExtractor everytime I update de dropdown data or use with another dropdown (with different data, obviously.

Do you have any tip?
.
.
.
.
Edit:

@gjvpaet you can add separator using propsExtractor like this:

propsExtractor={({value, index}) => { return (value === 'lastElement' ? {style: {}} : {style: {borderBottomColor: '#D1D1D1', borderBottomWidth: 1, paddingTop: 5}}) }}

We will not add separator for last item.

here's the solution: just remove {} inside de params and the index is returning correctly
propsExtractor={(item, index) => { return index === <YOUR_DATA>.length - 1 ? { style: {}, // style for the last element } : { style: {}, //style for the others elements }; }}