react-native-dropdown-picker changing dropdown background color by condition

user_8980376 0
Viewed 907

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.

dropdown react-native reactjs javascript
1 Answers

Check this out

    {
  ...
  containerStyle: {
    backgroundColor: "#000"
  },
  labelStyle: {
    color: "#fff"
  }
}
user_137915620
Related