2

I have a problem trying to remove the bottom border from the default Picker in react-native.

My code:

<Picker
  style={styles.pickerStyle}
  selectedValue={this.state.registerType}
  onValueChange={(item) => this.setState({registerType:item})}>
  <Picker.Item label="Vælg emne" value="choose" />
  {registerTypes}
</Picker>

On the image below you can see what I want to remove: enter image description here

I have tried to use the underlineColorAndroid='transparent' properties as you will do in the TextInput tag, but it diden't work. Any suggestions?

Rohit Suthar
  • 3,528
  • 1
  • 42
  • 48
Maiken Madsen
  • 611
  • 1
  • 15
  • 29
  • You need to style the picker directly in android. See here: https://stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker/39141949#39141949 – Tim Dec 07 '17 at 12:26

2 Answers2

1

Maybe it's not the best way ever, but I found a fast solution that worked fine in my project.

  1. Define a height for <View> and <Picker>, and the container element must be 1px bigger.
  2. Set overflow: "hidden" para o container.
<View style={styles.container}>
  <Picker style={styles.picker}>
    <Picker.Item value="1" label="Yes" />
    <Picker.Item value="2" label="No" />
  </Picker>
<View>

container: {
    overflow: "hidden",
    height: 51
},
picker: {
    height: 50
}
Rafael Perozin
  • 573
  • 7
  • 20
-2

I know it was an easy fix, but a part of my design was to change the background color in the Picker and then the border is hidden behind I guess.

Maiken Madsen
  • 611
  • 1
  • 15
  • 29