How to change the dropdown item background/text color when active or touching

[jgudo]

Is it possible to customize the the style of active/selected dropdown item?

I have this simple setup of dropdown

const options = [
  {label: "ALL BARANGAYS", value: ""},
  {label: "PANSINAO", value: "PANSINAO"},
  {label: "LANANG", value: "LANANG"}
];

<ModalDropdown
            disabled={disabled}
            animated={false}
            options={options}
            style={props.style}
            saveScrollPosition={true}
            dropdownTextStyle={{
                fontWeight: 'bold',
                fontSize: 16,
            }}
            dropdownTextHighlightStyle={{
                backgroundColor: '#cacaca',
                color: '#fff',
            }}
            onSelect={onSelectChange}
            renderRow={((option: IOption) => (
                <Text style={styles.dropdownText}>{option.label}</Text>
            ))}
        >
            <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                {selected ? (
                    <Text style={[styles.selected, props.selectedStyle]}>
                        {selected?.label}
                    </Text>
                ) : (
                    <Text style={[styles.placeholder, props.placeholderStyle]}>
                        {placeholder}
                    </Text>
                )}
                <Icon name="caretdown" color={props.iconColor || '#a1a1a1'} size={16} />
            </View>
        </ModalDropdown>

However, upon selecting an item, the item's background color changes to black making it unreadable. There's also no cue for selected/active item.

[bulent-eroglu]

Try add renderRowProps={{ underlayColor: 'lightgray' }} to ModalDropDown

[jgudo]

@bulent-eroglu It worked! Thanks! I wonder if also there exist a prop for setting the style of active/selected item. Something like renderRowProps={{ underlayColor: 'lightgray', selectedUnderlayColor: 'lightgray' }}

[jgudo]

Not sure if there is a prop for setting the style for active/selected item but I managed to do it with this:

const [selected, setSelected] = useState<IOption  | null>(null);
const onSelectChange = (index: string, option: IOption) => {
   setSelected(option);
}

<ModalDropdown
  ...
   onSelect={onSelectChange}
  renderRowProps={{ underlayColor: 'lightgray' }}
  renderRow={((option: IOption) => (
        <Text style={[styles.dropdownText, { backgroundColor: selected?.value === option.value ? '#cacaca' : '#fff' }]}>
            {option.label}
        </Text>
  ))}
>
  ...
</ModalDropdown>