Can we Change Colors to Dropdown Label in reactnative

Question

I am new to React native and working on a project on that, I am using react-native material-dropdown for using drop down component .i want to change the label color of drop-down but i am unable to do it because i didn't find label color property to change .could someone help me with this as the label is taking default color as black for the label text.

 textColor:'#FFF'
  tintColor:'#ffffff'

I tried giving these two styles also but it doesn't work for me. Do anyone have a solution for that? Thanks in advance

Answer 1

<Dropdown
    onChangeText={ (val) => this.changeDate(val)}
    label='All Dates'
    data={data}
    style = {{color: 'white'}} //for changed text color
    baseColor="rgba(255, 255, 255, 1)" //for initial text color
/>

Answer 2

Use itemTextStyle and textColor.

 <Dropdown
          containerStyle={{width:200}}
          label='Favorite Fruit'
          itemTextStyle={{backgroundColor:"blue",textColor:"white"}}
          textColor="#FFF"
          data={data}
 />

Here is expo example.

Answer 3

If you are using DropDownPicker from react-native-dropdown-picker, then you should do

labelStyle = {{
            fontSize: 15,
            color:'white'
          }}

This will change the text color. Refer here

Answer 4

import React, {useState, useEffect} from 'react';
import {Dropdown} from 'react-native-element-dropdown';

function DropdownComponent() {
const [value, setValue] = useState(null);

const dropDownData = [
  {label: 'Option 1', value: '0'}
  {label: 'Option 2', value: '1'}
  {label: 'Option 3', value: '2'}
  {label: 'Option 4', value: '3'}
  {label: 'Option 5', value: '4'}
]; 

return (
  <Dropdown
    selectedTextProps={{
      style: {
        fontSize: 20, 
      color: 'blue',
      },
  }}
  selectedTextStyle={{
    fontSize: 13,
    color: 'black',
  }}
 data={dropDownData}
  iconColor="black"
  iconStyle={{width: 36, height: 36}}
  maxHeight={200}
  labelField="label"
  valueField="value"
  value={value}
  onChange={(item) => {
    setValue(item.value);
  }}
   />
 );
 }

 export default DropdownComponent;