Changing the dropdwon arrow icon

[KiranUppunda]

Hi,

I want to change the default dropdown-arrow icon. Can you please let me know how to proceed with ?

Thank you.

[iamir4g]

i have same issue

[irwinwilliams]

Use the renderAccessory property. Write a function that returns the icon you want.

[shahrajk]

@kiranUppunda @iamir4g @irwinwilliams

I solve this problem.

Go to node module file -> react-native-material-dropdown

Use your image path in Image tag source.

renderAccessory() {
    return (
      <View style={styles.accessory}>
        <Image source={require('../../../../../Src/Images/drop-down.png')} style={{ width: 30, height: 12, resizeMode: 'contain', tintColor: '#777777' }} />
      </View>
    );
  }

[Thamaluka]

@shahrajk this is will not working if you are using a git repo!

[Subway19]

@irwinwilliams thanks. works like a charm

[PrashenAlumnus]

But it shows bottom border and popup not positioning

<Dropdown
        value={selectedAddress}
        onChangeText={(value, index, data) => {
          setSelectedAddress(value);
        }}
        data={address}
        // containerStyle={{width:100, }}
        dropdownPosition={0}
        dropdownOffset={{top:10, left:0, }}
        pickerStyle={{ }}
        renderAccessory={()=> <View style={{width:50, borderWidth:1}}>
        <Image source={{uri:'http://placekitten.com/50/50'}} style={{ width: 30, height: 30, resizeMode: 'contain', tintColor: '#777777' }} />
      </View>}
      /> 

[mueenrehman]

@KiranUppunda @iamir4g @irwinwilliams

I solve this problem.

Go to node module file -> react-native-material-dropdown

Use your image path in Image tag source.

renderAccessory() {
    return (
      <View style={styles.accessory}>
        <Image source={require('../../../../../Src/Images/drop-down.png')} style={{ width: 30, height: 12, resizeMode: 'contain', tintColor: '#777777' }} />
      </View>
    );
  }

Thanks. It worked for me. Although I used React native dropdown picker v4 but ur hint helped me in updating the icon <3

[Munish-GitHub]

Hi guys, I am 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.

[LeandroBernardo]

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'}
  />
);

} }

[Munish-GitHub]

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'}
  />
);

} }

I will give a try and get back to you. Thanks for your reply :)

[greulist137]

@PrashenAlumnus add the following to the component: underlineColor="transparent"

[prashen]

@greulist137 it was a long back issue, it is about to complete 2 years now :) BTW thanks for the comment.