How to give fontSize to react native android picker?

Question

How can I give fontSize to picker (android)? I tried to give but it's not working

<Picker
  style={{fontSize:20}}
  selectedValue={this.state.language}
  onValueChange={(lang) => this.setState({language: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

Possible duplicate of [How to style the standard react-native android picker?](https://stackoverflow.com/questions/38921492/how-to-style-the-standard-react-native-android-picker) — Cœur, Feb 21 '18 at 08:02

score 9 · Answer 1 · answered Sep 20 '16 at 14:07

9

At the moment, you can't. This is what the official documentation says here

itemStyle itemStylePropType

Style to apply to each of the item labels.

But this only works on iOS

On Android, you'll have to wait for them to implement it (or maybe write a PR for them :))

answered Sep 20 '16 at 14:07

G. Hamaide

7,078
2
36
57

Can someone tell me they implemented this feature or not? – badarshahzad Aug 10 '18 at 10:22

score 5 · Answer 2 · answered Apr 04 '20 at 16:20

5

This does the trick perfectly well. Just change the scale value.

const styles = StyleSheet.create ({
selectInput: {
    transform: [
      { scaleX: 0.9 }, 
      { scaleY: 0.9 },
   ],
 },
})

answered Apr 04 '20 at 16:20

Yinka

1,741
4
15
23

score 2 · Answer 3 · answered Jan 19 '21 at 21:54

They didn't add support to change the font size that way. Here is a workaround that I don't like but it seems to be the only thing that works. Here is an example.

 <Picker 
      mode="dropdown"
      selectedValue="en"
      style={{width: 110, height: 50}} 
      itemStyle={{height: 50, transform: [{ scaleX: 1 }, { scaleY: 1 }]}}>

      <Picker.Item value="en" label="English"  />
      <Picker.Item value="es" label="Español" />
    </Picker>

score 2 · Answer 4 · answered Mar 29 '22 at 06:28

2

To anyone still searching, Here's what I found:-

Enter the 'fontSize' style property individually to every picker.item.

<Picker.Item style={{fontSize:12}} label={'AnyValueLabel'} value={'AnyValueName'}/>

answered Mar 29 '22 at 06:28

Anukul Rawat

83
8

Does not work for me on Android, did you test on iOS? thank you though – vindom Jun 11 '22 at 11:14

score 0 · Answer 5 · answered Jan 01 '23 at 23:47

Normal for Android

  {drinksArr.map((val, index) => (
 <Picker.Item
                style={{
                  fontSize: 30,
                  backgroundColor: Colors.Black,
                }}
                fontFamily="font_family"
                color={Colors.Gold}
                label={val.title}
                value={val.title}
                key={index}
              />

score -2 · Answer 6 · edited Feb 23 '19 at 04:38

-2

Under the documentation; all what i found is that:

itemTextStyle={{fontSize: 15}}
activeItemTextStyle={{fontSize: 18, fontWeight: 'bold'}}

Which works for me.

edited Feb 23 '19 at 04:38

Nick

138,499
22
57
95

answered Feb 23 '19 at 03:50

Sawrose Tamang

1

1

FYI this doesn't work in android (not tested in iOS). also I don't see any reference to these props in the docs – Apolo Oct 10 '19 at 13:01

How to give fontSize to react native android picker?

6 Answers6

Linked