CODEWITHSUNDEEP
react-native
Harinder88
Harinder88

Reputation: 314

How to give fontSize to react native android picker?

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>

Upvotes: 15

Views: 22502

Answers (6)

Salman
Salman

Reputation: 669

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}
              />

Upvotes: 0

Anukul Rawat
Anukul Rawat

Reputation: 143

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'}/>

Upvotes: 3

jerryurenaa
jerryurenaa

Reputation: 4704

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>

Upvotes: 3

Yinka
Yinka

Reputation: 2071

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

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

Upvotes: 7

Sawrose Tamang
Sawrose Tamang

Reputation: 1

Under the documentation; all what i found is that: 

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

Which works for me.

Upvotes: -2

G. Hamaide
G. Hamaide

Reputation: 7106

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 :))

Upvotes: 9

Related Questions