react-native-material-ui icon indicating copy to clipboard operation
react-native-material-ui copied to clipboard

Can't place checkbox on the right of ListItem

Open Sven65 opened this issue 5 years ago • 0 comments

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.

Sven65 avatar Apr 14 '19 13:04 Sven65