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 drop-down menu after selecting an item.

closeAfterSelecting={true}

note

This only works with single item pickers.

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

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"

}}