react-nativeuser-interfaceexpouser-experienceui-design

How implement an alternative option when value is not in picker


For my React native (expo) project. I have two item pickers the first picker contains a list of brand names. When the user is in the Add screen. He can select a brand but sometimes the brand that he wants is not in the list.

I want to give the user a option to change the picker to select a brand into a text input field. But I am not sure what is the correct UI/UX behaviour to make this clear that he has this option. Below is an mockup of how the screen looks.

enter image description here

I know that one solution would be to make like a custom searchable select picker with an option to save new items but I think this is a bit overkill.

Any advice?


Solution

  • When your user have to handle a growing amount of entries you should not use pickers. In this case a FlatList would be a better choice, like the iOS contact app does.

    enter image description here enter image description here