Skip to main content
Version: Next

Icons

Item Icon

Each item can have an icon.

{
  label: 'Item',
  value: 'item',
  icon: () => <Image source={require('./assets/icon.png')} style={styles.iconStyle} />
}

Props

showArrowIcon

Specifies if the arrow icons should be visible.

showArrowIcon={true}
TypeDefault
booltrue

showTickIcon

Specifies if the tick icon should be visible.

showTickIcon={true}
TypeDefault
booltrue

hideSelectedItemIcon

Hides the icon of the selected item.

hideSelectedItemIcon={true}
TypeDefault
boolfalse

ArrowUpIconComponent

Changes the arrow-up icon.

ArrowUpIconComponent={({style}) => <MyArrowUpIcon style={style} />}
Type
function

ArrowDownIconComponent

Changes the arrow-down icon.

ArrowDownIconComponent={({style}) => <MyArrowDownIcon style={style} />}
Type
function

TickIconComponent

Changes the tick icon.

TickIconComponent={({style}) => <MyTickIcon style={style} />}
Type
function

CloseIconComponent

Changes the close icon.

CloseIconComponent={({style}) => <MyCloseIcon style={style} />}
Type
function

Styling

arrowIconStyle

arrowIconStyle={{
  width: 20,
  height: 20
}}

tickIconStyle

tickIconStyle={{
  width: 20,
  height: 20
}}

closeIconStyle

closeIconStyle={{
  width: 30,
  height: 30
}}

iconContainerStyle

iconContainerStyle={{
  marginRight: 10
}}

arrowIconContainerStyle

iconContainerStyle={{
  marginRight: 10
}}

tickIconContainerStyle

iconContainerStyle={{
  marginRight: 10
}}

closeIconContainerStyle

iconContainerStyle={{
  marginRight: 10
}}