react-native-element-dropdown
react-native-element-dropdown copied to clipboard
How to style every item differently in my dropdown?
I want to give a different background for every list item. I'm trying the following,
const data = [
{ label: 'Item 1', value: '1' , itemContainerStyle: { backgroundColor: '#f6ede4'}, itemTextStyle: {color: '#fff'}},
{ label: 'Item 2', value: '2' , itemContainerStyle: { backgroundColor: '#a07e56'}, itemTextStyle: {color: '#fff'}},
{ label: 'Item 3', value: '3' , itemContainerStyle: { backgroundColor: '#3a312a'}, itemTextStyle: {color: '#fff'}},
];
<Dropdown
data={data}
labelField="label"
valueField="value"
...
/>
Please let me know if I'm doing something wrong. Thank you.
const data = [ { label: 'Item 1', value: '1' , backgroundColor: '#f6ede4', color: '#fff'}, { label: 'Item 2', value: '2' , backgroundColor: '#a07e56', color: '#fff'}, { label: 'Item 3', value: '3' , backgroundColor: '#3a312a', color: '#fff'}, ];
return (<Dropdown data={data} labelField="label" valueField="value" renderItem={(item) => { return ( <View>
<Text style={{
flex: 1,
fontSize: 16,
backgroundColor : item.backgroundColor,
color : item.color
}}>{item.label}</Text>
</View>
);
}}
... />)