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