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"
}}