List and Items

Disable an Item

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

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

Props

key

Specifies which item key should be used as a key.

key="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

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"

}}