react-native-picker-select: Picker style is not working

RN 0.55.4 “name”: “react-native-picker-select”, “version”: “3.1.1”,

<View style={{flex: 1}} >
    <Text style={{color: '#0082c6', fontSize: 16, fontWeight: 'bold', marginLeft: 5}}>SEXO</Text>
    <RNPickerSelect
        placeholder={{
            label: 'Seu Sexo',
            value: '',
        }}
        items={this.state.items}
        onValueChange={(value) => {
            this.setState({
                sexo: value,
            });
        }}
        style={{ backgroundColor: '#000' }}
    />  
</View>

I’ve tried to change the style to approximate the Picker box to the label “SEXO” but none type of styling is working. How to fix that?

Image to understand it better: img

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 15

Most upvoted comments

I use like this:

const pickerStyle = {
	inputIOS: {
		color: 'white',
		paddingTop: 13,
		paddingHorizontal: 10,
		paddingBottom: 12,
	},
	inputAndroid: {
		color: 'white',
	},
	placeholderColor: 'white',
	underline: { borderTopWidth: 0 },
	icon: {
		position: 'absolute',
		backgroundColor: 'transparent',
		borderTopWidth: 5,
		borderTopColor: '#00000099',
		borderRightWidth: 5,
		borderRightColor: 'transparent',
		borderLeftWidth: 5,
		borderLeftColor: 'transparent',
		width: 0,
		height: 0,
		top: 20,
		right: 15,
	},
};

<PickerSelect
	selectedValue={this.state.moreLessSelected}
	placeholder={{}}
	onValueChange={itemValue => this.setState({ moreLessSelected: itemValue })}
	style={pickerStyle}
	items={[
		{ label: 'More', value: '>' },
		{ label: 'Less', value: '<' },
	]}
/>

And working good 🤟🏻

+93

sturmenta on Jun 14, 2018

+37

meliodev on Feb 25, 2020

upon selection of the picker view textfield I want to be able to make the textfield bottom border to be blue and thicker and I’ve tried the bottomBorderColor and width but nothing seems to be changing

saraahmad1114 on Dec 16, 2020

how can we style the picker list itself? I have tried targeting the styles using these options - inputAndroid, viewContainer, headlessAndroidContainer,inputAndroidContainer - but none of them seem to style the dropdown list.

I am trying to wrap the options on to a new line since the labels are really long.

MOwais on Nov 13, 2020

I got mine to work with


<RNPickerSelect

                    value={this.props.middleBellLengthType}
                    placeholder={{ label: '...', value: '...'}}

                    style={{inputAndroid:{
                        fontSize: scale(16),
                        justifyContent: 'center',
                        textAlign: 'center',
                        paddingHorizontal: 10,
                        paddingVertical: 8,
                        placeholderColor: '#ababa',
                        borderWidth: 0.5,
                        color: '#ababa',
                        paddingRight: scale(30), // to ensure the text is never behind the icon
                      },},
                      {iconContainer: {
                        placeholderColor: '#ababa',
                        top: scale(2),
                        right: scale(20),
                      },}} 
                    Icon = {() => {return(
                        <Icon.Button
                            name="caret-down"
                            color={'black'}
                            size={scale(15)}
                            style={styles.pauseButton}
                            backgroundColor="transparent"
                            underlayColor="transparent"
                           >
                        </Icon.Button>);
                    }}
                    onValueChange={ . . .

… although the font color seems to change once an item is inputed and set to this.props.middleBellLengthType … I just got it to work with placeholder={{ label: this.props.middleBellLengthType, value: this.props.middleBellLengthType}}

thomasr96 on Jan 9, 2020

@sturmenta it works!

rodrigofbm on Jun 14, 2018

I use like this:

const pickerStyle = {
	inputIOS: {
		color: 'white',
		paddingTop: 13,
		paddingHorizontal: 10,
		paddingBottom: 12,
	},
	inputAndroid: {
		color: 'white',
	},
	placeholderColor: 'white',
	underline: { borderTopWidth: 0 },
	icon: {
		position: 'absolute',
		backgroundColor: 'transparent',
		borderTopWidth: 5,
		borderTopColor: '#00000099',
		borderRightWidth: 5,
		borderRightColor: 'transparent',
		borderLeftWidth: 5,
		borderLeftColor: 'transparent',
		width: 0,
		height: 0,
		top: 20,
		right: 15,
	},
};

<PickerSelect
	selectedValue={this.state.moreLessSelected}
	placeholder={{}}
	onValueChange={itemValue => this.setState({ moreLessSelected: itemValue })}
	style={pickerStyle}
	items={[
		{ label: 'More', value: '>' },
		{ label: 'Less', value: '<' },
	]}
/>

And working good 🤟🏻

How could RNPickerSelect turn to PickerSelect!?

pp2015jp on Dec 14, 2020

@AlexHooperDev i’m welcome to prs

lfkwtz on Aug 27, 2020