0

I am new in react-native. I've been trying to customise the Picker.Item with simple color change and it's not working.

I've created a RedPickerItem class which wraps Picker.Item with default color set to red. 

class RedPickerItem extends Component{
    render(){
        return(
            <Picker.Item color="red" {...this.props}/>
        )
    }
}

and I use it like below

<Picker
    selectedValue={this.state.pickerValue}
    style={{height: 50, width:'100%'}}
    onValueChange={(itemValue, itemIndex) => this.setState({pickerValue: itemValue})}>
    <RedPickerItem label="Red Picker Item" value="red"/>
    <Picker.Item label="Default Picker Item" value="default"/>
</Picker>

but am getting below output which shows default Picker.Item color. The given red color is not working.

enter image description here

When i give the color prop directly like this

<Picker.Item color="red" label="Red Picker Item" value="red"/>

It works.

enter image description here

But that's not how I want it working. I want the wrap method working.

Full source code

import React, {Component} from 'react';
import {Picker, View} from 'react-native';

type Props = {};
export default class App extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            pickerValue: ''
        }
    }

    render() {
        return (
            <View>
                <Picker
                    selectedValue={this.state.pickerValue}
                    style={{height: 50, width:'100%'}}
                    onValueChange={(itemValue, itemIndex) => this.setState({pickerValue: itemValue})}>
                    <RedPickerItem label="Red Picker Item" value="red"/>
                    <Picker.Item label="Default Picker Item" value="default"/>
                </Picker>
            </View>
        );
    }
}

class RedPickerItem extends Component{
    render(){
        return(
            <Picker.Item {...this.props} color="red" />
        )
    }
}

Edit:

I know there is this 'itemStyle' property available for 'Picker', but i need to set individual item color set for each Picker.Item.

So my questions are,

1) Why it's not working when I wrap it with another class ?

2) How can i make it working?

Further clarification can be asked in comments.

theapache64
  • 10,926
  • 9
  • 65
  • 108

1 Answers1

0
<Picker.Item color='#000'
   label={Platform.OS === 'ios'?<Text style={{color:'#000'}}>{label}</Text>:label}
   value='' />
Mister Jojo
  • 20,093
  • 6
  • 21
  • 40
Rejsal
  • 121
  • 1
  • 7