Allow Custom Component or Label for addCustomItem

[ericpowell03]

First off, this is a great component. Very nicely done.

I have a feature request for allowing more formatting options or the ability to provide a custom component or function when addCustomItem={true}.

Currently, I don't see a way to indicate in the UX aside from customItemContainerStyle and customItemLabelStyle that tapping the customItem will add a new item. In my particular use case, I would want to include additional text and an icon in the label, such as:

Add [SearchText], and an icon to indicate the "Add" action.

This would help end users to differentiate between adding a new item and selecting an existing one, and would also be potentially more accessible since styling alone does not convey the difference to some users.

[saeedhabibi]

Hi I tried to use the addCustomItem item feature. But every time I add an item to it and select it again, another is added to it.

Take a look at this snack:

https://snack.expo.dev/@devsaeedhabibi/-add-item-dropdown

How can I solve it?

Thank you

[hossein-zare]

Hi @saeedhabibi ,

Please create a new issue. it's a bug i guess.

[ericpowell03]

Hi @hossein-zare,

Thanks for taking a look at this. I've continued to play with this a bit and made an attempt at writing a custom renderListItem. In doing so, I did run into the same bug that @saeedhabibi did, and also noticed that I had a hard time identifying the newly added item for the purpose of a server-side callback.

I suspect that others that use the addCustomItem functionality may need to persist those items on the backend, so I also need to come up with a callback to capture the new item and persist it on a server.

I'd be happy to collaborate on a PR to add some of these features, though I would honestly need some guidance. I'm relatively new to React Native.

[hossein-zare]

Hi @ericpowell03 ,

You can continue and follow the issue in https://github.com/hossein-zare/react-native-dropdown-picker/issues/456 I'm a bit busy, i'll add more details as soon as possible.

Thank you.

[hossein-zare]

Hi again @ericpowell03 ,

You can customize renderListItem https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/list-and-items#renderlistitem https://github.com/hossein-zare/react-native-dropdown-picker/blob/5.x/src/components/RenderListItem.js

renderListItem={(props) => <Item {...props} />}

// Just an example (pseudocode)
function Item({custom, label, ...}) {
   if (custom)
     return 'Add ' + label;

   return label;
}