question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to style the standard react-native android picker?

See original GitHub issue

I am unable to style it. There is hardly any documentation on styling Picker. I want to know how to set the fontFamily. How to set the color and background color on the Picker.items?

https://facebook.github.io/react-native/docs/picker.html

Setting fontFamily or background color doesn’t work. Wrapping it up in a View and giving style attributes to View also doesn’t work.

<Picker
   style={styles.picker} // cannot set fontFamily here
   selectedValue={this.state.selected2}
   onValueChange={this.onValueChange.bind(this, 'selected2')}
   mode="dropdown">
   <Item label="hello" value="key0" /> // cannot set backgroundColor here
   <Item label="world" value="key1" />
</Picker>

here is the snippet on RNPlayground https://rnplay.org/apps/oAR0qA

I posted a question on SO but didn’t get any answers: http://stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker

I am using RN 0.29 , Android and working on a Mac

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
abhisheknalincommented, Aug 26, 2016

Thanks. I solved it with the help of your pointer and SO community. See the solution here: http://stackoverflow.com/a/39141949/2381508

1reaction
abhisheknalincommented, Aug 16, 2016

Thanks for the pointer. Unfortunately I am not a native andorid developer so I have trouble understanding the solution. I added the following snippet to /res/values/styles.xml but nothing changed.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>
    <style name="SpinnerItem">
        <item name="android:textColor">#993399</item>
        <item name="android:background">#993399</item>
    </style>
    <style name="SpinnerDropDownItem">
        <item name="android:textColor">#993399</item>
        <item name="android:background">#993399</item>
    </style>

</resources>

Do I need to make changes elsewhere also?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Styling React Native Picker - Stack Overflow
Therefore, for styling the Picker items on Android, like changing the fontFamily can be done only using Native Android styles, for now.
Read more >
Picker - React Native
Renders the native picker component on Android and iOS. Example:
Read more >
How to use react-native-picker-select - LogRocket Blog
The developer is allowed to pass down styles to customize its look and feel. However, for Android, the default picker is used by...
Read more >
How to style the standard react-native android picker?
Android : How to style the standard react - native android picker ? [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] ...
Read more >
How to i style the picker in react native - iTecNote
Apparently on Android you need to wrap the Picker in a parent view and apply a border and background color to that. I...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found