Edit underline color in react-native-material-dropdown on iOS without changing arrow and label color

Question

I am using react-native-material-dropdown for a form where I also use RN TextInput so I want a consistent look between both.

I want to have a black label header and a light grey underline

For Android I use underlineColorAndroid={'transparent'} and that works fine. The problem is on iOS if I change the baseColor property, it automatically changes the dropdown arrow, the underline and the label. How could set the color of the label and the underline separately?

    import { Dropdown } from 'react-native-material-dropdown'
    //...

    <Dropdown
       underlineColorAndroid="transparent"
       label={'BILLING TYPE'}
       labelFontSize={12}
       labelTextStyle={styles.dropdownLabel}
       itemTextStyle={styles.dropdownItem}
       style={styles.dropdownMainText}                         
       style = {{color: Colors.black}}
       baseColor={Colors.black}
       value={'Paper'}
       data={billingTypes}
       onChangeText={value => this.onEditField(value)}
    />

If I set baseColor={Colors.black} (which I want) the underline becomes black instead of grey (which I don't want).

If I set baseColor={Colors.rose}, all 3 elements change colors: label, arrow and underline.

here is my styles.js file where nothing special happens

export default StyleSheet.create({
//...
  dropdownLabel: {
    textTransform: 'uppercase',
    color: Colors.black,
  },
  dropdownItem: {
    fontSize: Fonts.size.tiny,
    color: Colors.black,
  },
  dropdownMainText: {
  },
});

const colors = {
  black: '#252525',
  rose: '#e6968f', 
};

score 2 · Answer 1 · answered Oct 17 '19 at 11:52

The color you would like to change in the Dropdown object is currently running in the function. You cannot set it separately because you do not specify a separate color for the underline.

/dropdown/index.js

renderRipple() {
    let {
      baseColor,
      rippleColor = baseColor,
      rippleOpacity,
      rippleDuration,
      rippleCentered,
      rippleSequential,
    } = this.props;

    let { bottom, ...insets } = this.rippleInsets();
    let style = {
      ...insets,

      height: this.itemSize() - bottom,
      position: 'absolute',
    };

    return (
      <Ripple
        style={style}
        rippleColor={rippleColor}
        rippleDuration={rippleDuration}
        rippleOpacity={rippleOpacity}
        rippleCentered={rippleCentered}
        rippleSequential={rippleSequential}
        ref={this.updateRippleRef}
      />
    );
  }

so the only way would be to fork the project and add by myself an underlineColor property that would be an argument of renderRipple()? — Raphael Pinel, Oct 18 '19 at 06:46

score 1 · Accepted Answer · answered Oct 18 '19 at 14:17

I found it! As explained here: https://github.com/n4kz/react-native-material-dropdown/issues/23

<Dropdown
   //
   inputContainerStyle={{ borderBottomColor: Colors.midGrey, borderBottomWidth: 1 }}
/>

with const colors = {midGrey: 'rgba(214, 219, 224, 1)'};

Edit underline color in react-native-material-dropdown on iOS without changing arrow and label color

2 Answers2