React Native Picker Styling - ANDROID

Question

I'm trying to add some styling to react-native picker, like underlying and set placeholder, but unable to do so.

const styles = StyleSheet.create({
  picker: {
    textDecorationLine: 'underline'
  }
});

<Picker
   style={[styles.picker]}>
   <Picker.Item label="Country" value="" />
   <Picker.Item label="United States" value="US" />
   <Picker.Item label="India" value="IN" />
</Picker>

If i use value="", then it shows country as a selectable value, which i don't want.
textDecorationLine is not able to set the underline styling to picker.

Basically, i am looking to create something like this,

where, i can set the color of placeholder as well.

Thanks in adv.

score 19 · Accepted Answer · edited May 23 '17 at 12:10

19

Picker and Picker item's styling is handled natively on Android. You need to define style for Android's SpinnerItem in android/app/src/res/styles.xml see: How to style the standard react-native android picker?

I tried to test the underline but couldn't seem to find anything that worked. Here is couple of workarounds Android spinner with underline appcompat

However, I would simply use react native's components to our advantage. I'd create a new component that wraps React Native's Picker and put the picker in a View with the underline style that renders a placeholder if the Picker's value is undefined.

edited May 23 '17 at 12:10

Community

1
1

answered May 03 '17 at 17:39

Travis White

1,977
1
11
19

yeah, its a workaround which i can implement. Also, it seems like `picker` doesn't support styling, i am not able to change the fontSize of it. Any suggestions? – Mohit Pandey May 04 '17 at 04:49
For defining font size in the xml, check out the second answer here: http://stackoverflow.com/questions/10409871/how-to-increase-spinner-item-font-size `30sp` is the important bit. Beware though, that it seems it doesn't work on all versions (I didn't confirm or deny which versions it works on, I assume it is probably good for > 4) – Travis White May 04 '17 at 12:59
I think solution is not available using `react-native`, but yes you shared some useful link with which i can atleast able to customize the picker UI, thanks for sharing and hence accepting your answer. – Mohit Pandey May 06 '17 at 08:40

score 3 · Answer 2 · edited Mar 15 '20 at 16:01

You can also use this one for make more attractive to your react-native picker.You can add styles to your view so it can easily make changes to your picker.

import React, { Component } from 'react';
import { View, Picker } from 'react-native';
export default class DropdownDemo extends Component{
    state = { user: '' }
    updateUser = (user) => {
        this.setState({ user: user })
    }
    render(){
        return(
            <View
                    style={{
                        width: 300,
                        marginTop: 15,
                        marginLeft:20,
                        marginRight:20,
                        borderColor: 'black',
                        borderBottomWidth:1,
                        borderRadius: 10,
                        alignSelf: 'center'
                    }}>
                    <Picker
                        selectedValue={this.state.user}
                        onValueChange={this.updateUser}


                    >
                        <Picker.Item label="Male" value="Male" />
                        <Picker.Item label="Female" value="Female" />
                        <Picker.Item label="Other" value="Other" />
                    </Picker>
                </View>
        );
    }
}

score 2 · Answer 3 · answered Sep 25 '17 at 21:10

You need to modify your activity theme as follows:

<!-- Base application theme. -->
<style name="AppTheme">
    <!-- Customize your theme here. -->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:spinnerStyle">@style/Base.Widget.AppCompat.Spinner.Underlined</item>
    ...
</style>

The colorAccent controls the color of the underline, and using @style/Base.Widget.AppCompat.Spinner.Underline provides the underline on your Picker.

You can use this technique to set the styling on almost any android component in React. android:editTextStyle, android:textViewStyle, etc.

Unfortunately, because the React Picker extends Spinner and not AppCompatSpinner, the styling will be a bit different if you're running on API < 21.

score 1 · Answer 4 · edited May 23 '17 at 11:54

1

The issue here is an assumption that Picker has the properties and styling of TextInput, which it does not. There's a related question here: Have a placeholder for react native picker where a comment outlines what you'll need to render something akin to placeholder text.

In order to achieve something like to textDecorationLine you might apply a borderBottomWidth style to the component.

Also, remember to bind the selectedValue and onValueChange props:

selectedValue={this.state.country} onValueChange={(country) => this.setState({country: country})}>

edited May 23 '17 at 11:54

Community

1
1

answered Apr 28 '17 at 18:05

jaws

1,952
4
20
27

React native doesn't support `borderBottomWidth` property either, see this, http://stackoverflow.com/questions/36444874/adding-border-only-to-the-one-side-of-the-text-component-in-react-native-ios – Mohit Pandey Apr 29 '17 at 05:41
Also, is there any way we can reduce the fontSize of 'Picker', because as per react document, picker supports `style` but somehow it doesn't work. http://facebook.github.io/react-native/releases/0.23/docs/picker.html#picker – Mohit Pandey Apr 29 '17 at 06:18

score 0 · Answer 5 · answered Apr 28 '17 at 19:26

0

This is the closest I can get on iOS: https://snack.expo.io/r1L7DGb1Z

Few things to note:

1) there is itemStyle property for setting the specific style for single picker item

2) In order to get down arrow, you have to mimic it manually. You would probably like to attach it's functionality with TouchableHighlight (which isn't done in the example)

3) This doesn't look similar in the Android, so you probably need to append additional, platform specific styling.

answered Apr 28 '17 at 19:26

Samuli Hakoniemi

18,740
1
61
74

Thanks for sharing, but i forgot to mention that currently i'm looking for solutions for Android, hence updated my question. – Mohit Pandey Apr 29 '17 at 05:43

score -1 · Answer 6 · edited Oct 17 '18 at 08:45

This piece of the code is working on my machine:

           <View style={{borderBottomWidth:1, borderColor: 'rgb(204, 204, 
              204)',width: "28%"}}>
                    <Picker
                selectedValue={this.state.pickerValue}
                style={[styles.textInputBox]}
                onValueChange={this.onChange}>
                <Picker.Item label="+31" value="+31" />
                <Picker.Item label="+41" value="+41" />
                <Picker.Item label="+51" value="+51" />
                <Picker.Item label="+61" value="+61" />
                </Picker>
               </View>

React Native Picker Styling - ANDROID

6 Answers6