Picker

A field for the user to make a selection from a scrollable list of predefined options.

Adding Picker component

  • Select the Picker component from the Components drawer. You can open the list of components by clicking the + button next to Components.
  • To display pre-defined values, add an array of objects representing the options (see Data Properties) as a variable from the Variables modal in the top panel.
  • Then, add the Picker component from the Components tree.
  • Go to the Data tab (third tab) in the Properties Panel.
  • For the Options property, select the variable key (in the example below, data is the key that contains an array of strings).

Mode

We support 2 picker modes - Native and Dropdown

Native mode

This mode provide a seamless, platform-specific user experience. It provide the native look and feel of pickers on both iOS and Android, ensuring users feel comfortable and familiar when interacting with it.

Dropdown mode

The Picker uses the react-native-dropdown-picker package to create a dropdown-style interface. It offers a familiar user experience and is highly customizable. This mode ensures a consistent UI across iOS and Android platforms.

We offer the Picker Item component to assist in customizing dropdown items. The Picker Item component must be placed as a child of the Picker.

📘

Multi-select

If you need to allow your users to select multiple options, check out the Multi-Select Picker

Configuration Properties

NameDescription
Component nameTo alter the name of the component. The name is reflected in the Components tree. Defaults to Picker.
Icon SizeSize of the icon.
Left Icon ModeAllows you to select the placement of the left icon, if one is selected. Inset displays the icon inside the border of the picker and outset displays the icon outside of the picker border.
AppearanceAppearance of the picker modal.

Available values: sold or underlined.
PlaceholderPlaceholder text to display in the picker when the user has not made a selection.
Placeholder Text ColorAllows you to set the color of the placeholder text.
Left Icon NameThe name of the icon selected from the icon picker to be displayed on the left.
Assistive TextHelper text to be displayed underneath the picker, useful for providing additional instructions.
Auto Dismiss KeyboardAutomatically dismiss keyboard when Picker is opened
Right Icon NameThe name of the icon selected from the icon picker to be displayed inset on the right.
Modenative or dropdown mode, native shows the native platform picker, dropdown shows a standard dropdown menu across all platforms that is customizable. Use 'Picker Item' component to customize dropdown items. Default: native mode
Selected Icon NameThe icon to display on selected items. (dropdown mode only)
Selected Icon ColorThe color of the icon displayed on selected items. (dropdown mode only)
Selected Icon SizeThe size of the icon displayed on selected items. (dropdown mode only)
Dropdown Background ColorThe background color of the dropdown container. (dropdown mode only)
Dropdown Border ColorThe border color of the dropdown container. (dropdown mode only)
Dropdown Border WidthThe border width of the dropdown container. (dropdown mode only)
Dropdown Border RadiusThe border radius of the dropdown container. (dropdown mode only)

Data Properties

NameDescription
OptionsHere you are able to pass an array of objects representing each option to display.

The source of data can be static or remote (coming from an API).

For example, you can pass the options as [{"label":"foo","value":42},{"label":"bar","value":126}].

The label is the key for each value displayed in the Picker component. The value of the selected option will be available to Triggers on the component.
ErrorWhen enabled, an outline matching the theme's defined Error color will appear around the picker.

Must be a boolean value: true or false.
DisabledWhether the picker should be disabled. Will prevent selection and show a greyed out state.
LabelThe label of the picker which is displayed directly above the selected date.
Data SourceInitialize the stateful component with a value from a data source.

Triggers

NameDescription
On Value ChangeRuns when the value is changed