List and Items

Disable an Item

You may want to disable an item, The item will be unselectable.

{label: 'Item', value: 1, disabled: true}

Item-specific styles

Each item can have its own label and container styles.

{
  ...
  containerStyle: {
    backgroundColor: "#000"
  },
  labelStyle: {
    color: "#fff"
  }
}

Test ID

Used to locate the item in end-to-end tests.

{
  ...
  testID: "item-testid"
}

Props

itemKey

Specifies which item key should be used as a key.

itemKey="value"

Type	Default
string	value

closeAfterSelecting

Closes the picker after selecting an item.

closeAfterSelecting={true}

note

This only works with single item pickers.

Type	Default
bool	false

closeOnBackPressed

Closes the picker after pressing the back button.

closeOnBackPressed={true}

Type	Default
bool	false

itemSeparator

Specifies if the item separater should be visible.

itemSeparator={true}

Type	Default
bool	false

Callbacks

renderListItem

Customizes the renderListItem.

renderListItem={(props) => <Item {...props} />}

• See: RenderListItem.js

Type
function

ListEmptyComponent

Changes the default ListEmptyComponent.

ListEmptyComponent={({
  listMessageContainerStyle, listMessageTextStyle, ActivityIndicatorComponent, loading, message
}) => (
  <View style={listMessageContainerStyle}>
    {loading ? (
      <ActivityIndicatorComponent />
    ) : (
      <Text style={listMessageTextStyle}>
        {message}
      </Text>
    )}
  </View>
)}}

Styling

listItemContainerStyle

listItemContainerStyle={{
  height: 40
}}

listItemLabelStyle

listItemLabelStyle={{
  color: "#000"
}}

selectedItemContainerStyle

selectedItemContainerStyle={{
  backgroundColor: "grey"
}}

selectedItemLabelStyle

selectedItemLabelStyle={{
  fontWeight: "bold"
}}

customItemContainerStyle

customItemContainerStyle={{
  //
}}

customItemLabelStyle

customItemLabelStyle={{
  fontStyle: "italic"
}}

disabledItemContainerStyle

disabledItemContainerStyle={{
  //
}}

disabledItemLabelStyle

disabledItemLabelStyle={{
  opacity: 0.5
}}

listMessageContainerStyle

listMessageContainerStyle={{
  //
}}

listMessageTextStyle

listMessageTextStyle={{
  //
}}

itemSeparatorStyle

itemSeparatorStyle={{
  backgroundColor: "#000"
}}