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

[rodrigofbm]

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

[lfkwtz]

The style object needs nested objects targeting individual parts of the component.

https://github.com/lawnstarter/react-native-picker-select/issues/23

Read through that and let me know if that helps

[rodrigofbm]

@lfkwtz I have tried this, but still the same.

[lfkwtz]

Can you share the updated code where you tried that solution?

[sturmenta]

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 🤟🏻

[rodrigofbm]

@sturmenta it works!

[nageshjawanjal]

inputAndroid: {
      color: 'white',
  },

How to change item font size in Android? @sturmenta

[Wasaga-solo]

am going through the same problem,anyone?

[thomasr96]

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

[meliodev]

...
style={pickerSelectStyles}
useNativeAndroidPickerStyle={false} // add this line and it should work
/>

[cbedoy]

@meliodev your solution works!

[AlexHooperDev]

Might it be a good idea to put the nested object keys inside the documentation somewhere? It's not clear that the key naming convention is strict.

[lfkwtz]

@AlexHooperDev i'm welcome to prs

[MOwais]

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.

[pp2015jp]

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!?

[saraahmad1114]

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