react-native-material-ui
react-native-material-ui copied to clipboard
Can't place checkbox on the right of ListItem
According to the material design docs on a ListItem seen here, I should be able to place a checkbox on the right of a list item for the item to be selected by the user.
If I use my code;
_renderItem = ({ item }) => {
let selected = !!this.state.selected.get(item.key)
return (
<ListItem
key={item.key}
centerElement={{ primaryText: item.name }}
leftElement={(
<Image
style={{ width: 50, height: 50 }}
source={item.image}
/>
)}
divider
rightElement={(
<Checkbox
onCheck={() => this._onPressItem(item.key)}
value={item.key}
label={item.name}
checked={selected}
/>
)}
/>
)
}
render () {
const { data } = this.props
return (
<FlatList
data={data}
extraData={this.state}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
I do not get the checkbox on the right, instead it places itself next to the image and the center element text completely dissapears, forcing me to use the label of the checkbox, which is placed on the right of the checkbox, with no option of changing it.
If it makes any difference (which it really shouldn't), I'm using expo for the application.