Skip to main content
Version: 5.4

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"
TypeDefault
stringvalue

closeAfterSelecting

Closes the picker after selecting an item.

closeAfterSelecting={true}
note

This only works with single item pickers.

TypeDefault
boolfalse

closeOnBackPressed

Closes the picker after pressing the back button.

closeOnBackPressed={true}
TypeDefault
boolfalse

itemSeparator

Specifies if the item separater should be visible.

itemSeparator={true}
TypeDefault
boolfalse

Callbacks

renderListItem

Customizes the renderListItem.

renderListItem={(props) => <Item {...props} />}
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

listItemContainer={{
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"
}}