Select

Sample Usage

<Select
  data={data}
  onSelect={console.log}

  defaultValue={data[0]}
  listHeight={300}
  placeholderText='Hello!'
  boxStyle={{
    backgroundColor: '#48c',
  }}
  boxTextStyle={{
    fontFamily: 'times new roman',
  }}
  listStyle={{
    backgroundColor: '#abc',
  }}
  listTextStyle={{
    color: 'brown',
    fontFamily: 'times new roman',
  }}
  selectedItemStyle={{
    backgroundColor: 'green',
  }}
  dropdownArrowColor='darkgreen'
/>

Required Props

These props are required to be utilized for the selector to function.

data

Type: Data[]

The items the user will be able to select from.

onSelect

Type: Function (data: Data) => void

The function that is called when the user selects an item from the Selector.

Optional Props

These props are not required, but may add functionality that can be helpful.

defaultValue

Type: Data
Default value: undefined

An item that is selected before the user interacts with the Selector.

disabled

Type: boolean
Default value: false

A boolean representing if the user is unable to interact with the Selector.

listHeight

Type: number
Default value: 200

The height of the dropdown list.

placeholderText

Type: string | React.JSX.Element
Default value: 'Click me'

The Selector text displayed when no item has been selected.

searchable

Type: boolean
Default value: false

A boolean representing if there should be a search bar for the Selector.

boxStyle

Type: ViewStyle
Default value:

{
  display: 'flex',
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
  alignContent: 'space-between',
  paddingVertical: 4,
  paddingLeft: 8,
  paddingRight: 24,
  borderWidth: 0.5,
  margin: 5,
  overflow: 'hidden',
  flexWrap: 'wrap',
}

Custom styles for the main Selector box.

boxTextStyle

Type: TextStyle
Default value:

{
  fontSize: 16,
  overflow: 'hidden',
  marginVertical: 4,
}

Custom styles for the text inside the main Selector box.

listStyle

Type: ViewStyle
Default value:

{
  position: 'absolute',
  borderWidth: 0.5,
  overflow: 'hidden',
}

Custom styles for the Selector dropdown list.

listTextStyle

Type: TextStyle
Default value:

{
  fontSize: 16,
  paddingLeft: 8,
}

Custom styles for the text inside the Selector dropdown list.

selectedItemStyle

Type: TextStyle
Default value:

{
  fontWeight: 'bold',
}

Custom styles for the active item inside the Selector dropdown list.

dropdownArrowColor

Type: ColorValue
Default value: black or white for dark mode

Custom color for the dropdown arrow inside the main Selector box.

searchBoxStyle

Type: TextStyle & ViewStyle
Default value:

{
  paddingHorizontal: 8,
  height: 40,
  borderWidth: 1,
  margin: 8,
}

Cystom styles for the Selector search box.

theme

Type: 'light' | 'dark' | 'system'
Default value: 'system'

The theme of the application.