We are using react-native-dropdown-picker.
<DropDownPicker
items={timeList.map(item => {
return ({
label: item.timeslot,
value: item.timeslot
})
})}
defaultValue={timeList[0].timeslot}
placeholder={"Select date"}
containerStyle={styles.dropDownContainer}
itemStyle={{ justifyContent: "flex-start" }}
dropDownStyle={{ backgroundColor: colors.white }}
dropDownMaxHeight={hp("45%")}
onChangeItem={item => timeSelected(item.value)}
arrowSize={30}
arrowStyle={{ position: "absolute", right: 0 }}
labelStyle={{
fontSize: wp('3.5%'),
fontFamily: constants.themeFont,
textAlign: 'left',
color: '#000',
alignSelf: 'center',
}} />So the dropdown's background color has been set from 'dropDownStyle' property. I have given the color white.
Let's say, in the 'timeList' (array)variable, I have a key 'enabled' (boolean value) on every object on the array. So I want to give different background colors for different values(true/ false) of the key 'enabled'.
The 'dropDownStyle' is the common property for all the values on the dropdown. So how to change the background color based on every item attribute.