Change the default React Native <Picker> drop-down arrow icon

Question

I want to change its color specifically:

<Picker selectedValue={this.state.selected}
        onValueChange={(value) => this.setState({selected:value})}  >
  {data.map ((value)=><Picker.Item label={value} value={value} key={value}/>)}
</Picker>

Baklava

I don't have the exact answer for you, but I know it has to be modified on the Android side of things in xml styles. – Thisbee

Answer 1

For those who are looking to change the color of the caret icon (dropdown arrow) in android, you could try adding the following line to your styles.xml:

<item name="android:colorControlNormal">#FFFFFF</item>

Should look like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:colorControlNormal">#FFFFFF</item>
    </style>
</resources>

Once done, rebuild the app as changes made on native files will not hot reload.

Maker

Answer 2

You can change drop-down arrow icon in android like following :

<Picker dropdownIconColor= 'colorName'/>

Carping

Great! This should be the valid answer. – Foxworth

Answer 3

One possible solution is to overlay the existing the arrow with an absolutely positioned vector icon that is wrapped within a view that has a matching background color with the rest of the Picker container. This usually works well because the Picker arrow does not by default reposition itself based on the length of the Picker.Item value.

Bleary

This worked well. A good solution when using Expo, where you can't modify styles.xml without detaching – Bangtail

You might also need to set click through property on the view that will be/ contains absolute positioned item, by setting a property pointerEvents="none". – Escheat

Answer 4

It is not possible to change the iOS native components, using React Native, beyond what is documented as configurable. Apple are very opinionated on the usage of their native elements which give iOS users a familiar and consistent experience.

I have previously tried unsuccessfully to change, or remove, the lines around the selected item. It is not possible using React Native and JavaScript only. If you want to write Objective-C or Swift then it may be able to extend the native component and create yourself a POD integration which could expose a configurable API to the React component.

For me this was too much work and I ended up writing my own js implementation from scratch.

Ridgway

Answer 5

I found a solution though it's not a straightforward one. At first, I added a background color to picker to disable the default dropdown and then I added a dropdown icon and positioning it. And it works perfectly for me. Here is the code example.

    <View style={Style.pickerWrapper}>
      <Icon
        name="arrow-drop-down"
        type="MaterialIcons"
        style={Style.pickerIcon}
      />
      <Picker
        mode="dropdown"
        style={fieldtypeStyle.pickerContent}
        placeholder="Select your SIM"
        placeholderStyle={{ color: #E2E2E2 }}
        placeholderIconColor={#E2E2E2}
        selectedValue={this.state.selected2}
        onValueChange={this.onValueChange2.bind(this)}
      >
        <Picker.Item label="Wallet" value="key0" />
        <Picker.Item label="ATM Card" value="key1" />
        <Picker.Item label="Debit Card" value="key2" />
        <Picker.Item label="Credit Card" value="key3" />
      </Picker>
    </View>

And Here are the styles that i use

 pickerWrapper: {
    borderColor: blurColor,
    borderWidth: 1,
    backgroundColor: "#273137",
    borderRadius: 4
 },
 pickerIcon: {
    color: inputColor,
    position: "absolute",
    bottom: 15,
    right: 10,
    fontSize: 20
 },

 pickerContent: {
    color: inputColor,
    backgroundColor: "transparent",
 },

Speculator

Is this the default React-Native <Picker> the OP asks about? Per the documentation it does not support a placeholder prop? – Pulpboard

I did not tested it in ios but I guess it will work there. You can test it in ios and let me khow, thanks. – Speculator

Answer 6

I made a workaround is to make the picker disappear by setting its display property to none as well as its opacity to 0 and by making another view make do the job by referencing the actual picker;

Here is an example of a year picker.

import { View, Text, TouchableOpacity } from 'react-native';
import React, { useState, useRef } from 'react';
import { Picker } from '@react-native-picker/picker';

const renderYears = () =>
  [
    ...Array.from(
      { length: new Date().getFullYear() - 1900 },
      (value, index) => 1900 + index,
    ),
  ]
    .reverse()
    .map(n => <Picker.Item key={n + ''} label={n + ''} value={n + ''} />);

const YearPicker = () => {
  const ref = useRef();
  const [selectedYear, setSelectedYear] = useState();

  const handleOpenPicker = () => {
    ref.current.focus();
  };

  const handleClosePicker = () => {
    ref.current.blur();
  }

  return (
    <>
      <TouchableOpacity
        onPress={handleOpenPicker}
        style={{
          backgroundColor: 'pink',
          height: 48,
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Select Year</Text>
        <Picker
          style={{ display: 'none', opacity: 0, height: 0, width: 0 }}
          ref={ref}
          selectedValue={selectedYear}
          onValueChange={(v, i) => setSelectedYear(v)}>
          {renderYears()}
        </Picker>
      </TouchableOpacity>
      <Text>{selectedYear}</Text>
    </>
  );
};

export default YearPicker;

Greenebaum

You are my favorite person. – Harvell

Answer 7

preview RNPicker android with RNVectorIcon with overlay icon

import React from 'react';
import { Picker, View } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

export default class _class extends React.Component {
  static Item = Picker.Item;

  render() {
    const autoWidth = 70 + ((this.props.selectedValue.length - 2) * 8);

    return (
      <View style={[
        { backgroundColor: '#ffffff20', padding: 8, paddingRight: 0, opacity: this.props.enabled ? 1 : .5 },
        this.props.viewstyle, this.props.and_viewstyle
      ]}>
        <Picker {...this.props} style={[{ width: autoWidth, height: 20 }, this.props.style, this.props.and_style]}>
          {this.props.children}
        </Picker>
        <Icon
          name='sort-down'
          size={20}
          color='white'
          style={[{right: 18, top: 4, position: 'absolute'}]}
        />
      </View>
    );
  }
}

android/app/src/main/res/values/styles.xml:

<resources>

    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:spinnerItemStyle">@style/SpinnerItem</item>
    </style>

    <style name="SpinnerItem" parent="Theme.AppCompat.Light.NoActionBar">>
        <item name="android:fontFamily">sans-serif-light</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:textSize">15dp</item>
    </style>
</resources>

Marchant

Answer 8

I did solve the problem using this:

Go to node module file -> react-native-material-dropdown (whatever library your using)

Then change your icons with the ones you want.

PS: You can't change color of the arrow icon because it's an image not a component

Enjoy Coding :)

Aleron

Answer 9

try this one..just add your own icon inside picker , and hide or change color of the default icon of picker ..like this:

<Picker
dropdownIconRippleColor={'#FFFFFF'}
dropdownIconColor={'#ffffff'}
pickMultiple={true}
enabled={true}
mode='dropdown'
onValueChange={(itemValue, itemIndex) =>                                                                   
setPtype(itemValue)}
selectedValue={Ptype}

>
                                                                
<Picker.Item color="#707070" label="Digital" value="Digital" key="1" />
<Picker.Item color="#707070" label="Digital1" value="Digital1" key="2" />
 <Picker.Item color="#707070" label="Digital2" value="Digital2" key="3" />

</Picker>
<AntDesign name="up" size={16} style={{marginTop:'-8%',marginRight:'-78%'}}/> 

Marmoreal

Answer 10

try this for Default drop-down arrow icon dropdownIconColor={'black'}

      <Picker
        selectedValue={actionStatus}
        onValueChange={(value) =>  setActionStatus(value)}
        style={{color: "black"}}
        dropdownIconColor={'black'}
       >
        <Picker.Item label="Delete" value="Delete " />
        <Picker.Item label="Report illegal" value="Report illegal" />
        <Picker.Item label="Others" value="Others" />
       </Picker>

Messina

Compared to Abhishek Kumar's answer, this looks elaborate: does it add value? – Seafowl

Answer 11

Try this...

<Picker
  mode="dropdown"
  style={{backgroundColor: 'red'}}
  selectedValue={this.state.selected}
  onValueChange={(value) => this.setState({selected: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Tunnage

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Farad

github.com/danielweinmann/react-native-picker-dropdown/blob/….... try this reference....Thank you – Tunnage

i already try it and it's changed my picker background not drop down icon color it's still black – Toastmaster

This code does not answer the question at all. The OP asks for changing Picker's drop-down arrow icon color. – Efthim