Dropdowns are commonly used to let a user select a single option from a list of options.

Their native implementation on iOS and Android varies. Therefore, we implemented a completely custom dropdown that behaves consistently on both platforms and yet is close to the feel of the native ones.


Example dropdown design in Figma, alongside its structure:

image showing dropdown ui and grouping in figma

(Left) Figma Designed Dropdown (Right) Grouping of layers

image showing dropdown_placeholder

Example of Placeholder Option


A dropdown should be a group that contains a rectangle representing the container and a text component representing an option. (See examples above.)


Both the rectangle and the text option can be styled and their styles should be translated into code.


  • The name of the dropdown selector's group should contain dropdown.
  • Inside the group there should be a text element with a name containing option.