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>

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.

Answer 2

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

<Picker dropdownIconColor= 'colorName'/>

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.

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.

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",
 },

Answer 6

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>

Answer 7

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 :)

Answer 8

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;

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%'}}/> 

Answer 10

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>