LePy
LePy

Reputation: 133

How to change the background color of dropdown arrow - react-native-material-dropdown-v2-fixed

I'm using react-native-material-dropdown-v2-fixed. I want to change background of dropdown arrow. How can I change the color of it? Currently it is dark gray.

enter image description here

Currently I had to change the React Native lib from 0.59.9 to 0.63.4 and after the change the background color was changed.

package.json "react-native": "0.63.4", "react-native-material-dropdown-v2-fixed": "^0.11.3",

My Dropdown component

 <Dropdown
          rippleCentered
          itemColor={COLORS.PRIMARY}
          fontSize={FONTS.SMALL}
          fontFamily={
            value === initialValue
              ? FONTS.OPENSANS_BOLD
              : FONTS.OPENSANS_REGULAR
          }
          fontWeight={value === initialValue ? '700' : '100'}
          disabled={disable}
          textColor={
            value === initialValue ? COLORS.PRIMARY : COLORS.COMPLEMENTARY13
          }
          selectedItemColor={COLORS.PRIMARY}
          pickerStyle={styles.pickerStyle}
          itemTextStyle={styles.itemTextStyle}
          inputContainerStyle={styles.inputContainerStyle}
          value={value}
          dropdownPosition={0}
          data={data}
          onChangeText={this.onChangeText}
          accessibilityLabel={id}
          onFocus={this._onFocus}
          onBlur={this._onBlur}
          iconName={'chevron-down'}
          iconType={'entypo'}
          iconColor={COLORS.PRIMARY}
        />

Upvotes: 1

Views: 1344

Answers (1)

LePy
LePy

Reputation: 133

For fix this problem: baseColor={'transparent'}

Example:

import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';

class Example extends Component {
render() {
let data = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];

return (
  <Dropdown
    label='Favorite Fruit'
    data={data}
    baseColor={'transparent'}
  />
);
}
}

Upvotes: 2

Related Questions