React-native-picker-select: Unable to override input style

[Fleuv]

Describe the bug

Unable to override the style of the element inside the container view.

To Reproduce

Steps to reproduce the behavior:

1. Load the picker component in a blank app.
2. Fill all required attributes for the component with the once similar to the main example.
3. Add a style attribute and add the following value to it:

const style = {
   inputAndroid: {
      padding: 0,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      paddingVertical: 0,
      paddingHorizontal: 0,
   },
   inputIOS: {
      padding: 0,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      paddingVertical: 0,
      paddingHorizontal: 0,
   },

};

1. The padding is still visible.

Expected behavior

The padding is removed, styles are applied.

Screenshots

Result, nothing changed:

Additional details

• Device: Pixel 2
• OS: 10.0 (Q) - API 29
• react-native-picker-select version: 7.0.0
• react-native version: 37.0.1
• react version: 16.9

Code sample

import React from 'react';
import RNPickerSelect from 'react-native-picker-select';

export default class App extends React.Component {
  render() {
    return (
      <RNPickerSelect
        style={style}
        onValueChange={(value) => console.log(value)}
        items={[
          { label: 'Football', value: 'football' },
          { label: 'Baseball', value: 'baseball' },
          { label: 'Hockey', value: 'hockey' },
        ]} />
      );
  }
}

[kabolov]

Same here

[Fleuv]

For android it seems to be possible to get it some kind of working with the attribute useNativeAndroidPickerStyle set to false. Then you can set the the style under the inputAndroid attribute.

However this removes the arrow icon on the right.

[EmmanuelSkapple]

Describe the bug

Unable to override the style of the element inside the container view.

To Reproduce

Steps to reproduce the behavior:

1. Load the picker component in a blank app.
2. Fill all required attributes for the component with the once similar to the main example.
3. Add a style attribute and add the following value to it:

const style = {
   inputAndroid: {
      padding: 0,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      paddingVertical: 0,
      paddingHorizontal: 0,
   },
   inputIOS: {
      padding: 0,
      paddingTop: 0,
      paddingBottom: 0,
      paddingLeft: 0,
      paddingRight: 0,
      paddingVertical: 0,
      paddingHorizontal: 0,
   },

};

1. The padding is still visible.

Expected behavior

The padding is removed, styles are applied.

Screenshots

Result, nothing changed:

Additional details

• Device: Pixel 2
• OS: 10.0 (Q) - API 29
• react-native-picker-select version: 7.0.0
• react-native version: 37.0.1
• react version: 16.9

Code sample

import React from 'react';
import RNPickerSelect from 'react-native-picker-select';

export default class App extends React.Component {
  render() {
    return (
      <RNPickerSelect
        style={style}
        onValueChange={(value) => console.log(value)}
        items={[
          { label: 'Football', value: 'football' },
          { label: 'Baseball', value: 'baseball' },
          { label: 'Hockey', value: 'hockey' },
        ]} />
      );
  }
}

if it is urgent to solve this, you can enter the package styles.js file and modify the viewContainer object in line 4, that gives the style to the select

[Fleuv]

if it is urgent to solve this, you can enter the package styles.js file and modify the viewContainer object in line 4, that gives the style to the select

I'm quite sure this wouldn't effect anything, also in the unit tests it shows almost the same effect for when editing the styles.js as supplying a the style attribute with an object with the viewContainer key. However I didn't test this with an integration test yet. But I think I already tried it out without having any effect on the react native picker component. It did of course style the View containing the react native picker element.

[Masadow]

Any news on this ? The plugin is unusable on IOS :(

[Masadow]

After some investigations, it seems the library does not support styles as an array, probably a different issue than expo one

[lfkwtz]

looks like this was solved. unless you set useNativeAndroidPickerStyle={false} or use the android headless mode, you're dealing with the native android picker and styling is limited

[leotm]

yarn upgrade react-native-picker-select@latest
yarn add @react-native-community/picker@latest
cd ios && pod install

Now it should work.

---

Minimal example with TS + Formik/hooks (iOS):

<RNPickerSelect
  style={StyleSheet.create({
    inputIOSContainer: {
      paddingVertical: 4,
      paddingHorizontal: 4
    },
    inputIOS: {
      fontSize: 14
    }
  })}
  onValueChange={(value: string) => props.setFieldValue('something', value)}
  // onValueChange={(value: string) => setSomething(value)} // or this with parent component state using hooks
  items={[
    { label: 'label', value: 'value' },
    { label: 'label2', value: 'value2' },
    { label: 'label3', value: 'value3' }
  ]}
  value={'value2'} // init
/>

On Android the touch area seems smaller on the left, so for Android styled the icon to the left instead of the right.