Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Styling React Native Picker

I'm attempting to style the text color of the items in a React Native picker. I've only been working in iOS so far, but if I could find a cross-platform solution that'd be awesome.

I've tried the following things:

Styling color on Picker

<Picker style={{color:'white'}} ...etc > 

Styling color on Picker Items

<Picker.Item style={{color:'#fff'}} label={'Toronto'} value={'Toronto'} /> 

I've also seen some examples of adding a color property, so I tried this

<Picker.Item color='white' label={'Toronto'} value={'Toronto'} /> 

At a total loss here. Thanks for any insight!

EDIT: Here's a solution - use itemStyle prop in the Picker element. I believe this is iOS only.

<Picker itemStyle={{color:'white'}} >       <Picker.Item color='white' label={'Toronto'} value={'Toronto'} />       <Picker.Item  label={'Calgary'} value={'Calgary'} /> </Picker> 
like image 251
n8e Avatar asked Oct 18 '16 06:10

n8e


People also ask

How do you style picker in react-native?

Using the react-native-picker-select component Kindly consider the code below: import React from "react"; import RNPickerSelect from "react-native-picker-select"; import { StyleSheet, Text, View } from "react-native"; export default function App () { return ( <View style={styles. container}> <Text>Hello World!

How do I change the color of a selected list in react JS?

First, find the div in your HTML code and add a class to the opening tag. Add the new class selector to your CSS code. Next, head over to your CSS code and add your new class selector. Choose a new background color.

What is picker in react-native?

React Native Picker is component which is used to select an item from the multiple choices. This is the same as a Dropdown option. Picker is used when we need to provide an alternative to choose from multiple options. It is used by importing the Picker component from the react-native library.


1 Answers

To change the colour you need to use this:

<Item label="blue" color="blue" value="blue" /> 
like image 162
Arnaud Moret Avatar answered Oct 02 '22 14:10

Arnaud Moret