Nativebase: How to change the <picker> selected value fontSize

[evansque]

I have the picker set up like this

          <Picker
              iosHeader="Select Country"
              mode="dropdown"
              selectedValue={this.state.selected}
              onValueChange={this.onValueChange.bind(this)}
          >
              <Item label="中文 (China)" value="key0" />
              <Item label="United States" value="key1" />
              <Item label="Canada" value="key2" />
              <Item label="Germany" value="key3" />
              ...
          </Picker>

and I want to adjust the selected value font size.
I tried adding style={{fontSize: 12}} to the picker tag, but that didn't work.

[sankhadeeproy007]

You have to use prop textStyle for that.

textStyle={{fontSize: 12}}

[nimamyscreen]

You mean something like this ? but it's not working for me

<Picker style={styles.picker}
                            iosHeader="Select one"
                            mode="dropdown"
                            textStyle={{fontSize: 12,color:'yellow'}}
                            selectedValue={this.state.tourDuration}
                            onValueChange={this.onValueChange.bind(this)}>
                        <Picker.Item label="One hour" value="1"/>
                        <Picker.Item label="Two hours" value="2"/>
                        <Picker.Item label="Three hours" value="3"/>
                        <Picker.Item label="Four hours" value="4"/>
                        <Picker.Item label="Five hours" value="5"/>
                    </Picker>

picker: {
        color: '#616161',
        borderRadius: 14,
        borderWidth: 1,
        backgroundColor: '#e2e2e2',
        borderBottomWidth: 1 / PixelRatio.get(),
        borderTopWidth: 1 / PixelRatio.get(),
        borderColor: '#484848',
        width: 110,
        height:40,
        marginRight:16
    },

[YKSing]

It dose not work on Android

[crest-ccruz]

Doesn't work on Android for me either. Any workaround?

[rolandfromrobin]

textStyle prop has no effect on Android here either

[shivrajkumar]

@rolandfromrobin Those props are available only for iOS. Check https://facebook.github.io/react-native/docs/picker.html for Android props

[rolandfromrobin]

@shivrajkumar I see, thank you. Do you know of any workaround to style the selectedValue text in Android picker?

[shivrajkumar]

@rolandfromrobin You can style the items conditionally on selection.

[Ashutosh21Nigam]

how i set the font size for android picker

[akhil-geekyants]

@Ashutosh21Nigam NativeBase Picker for android is an implementation of ReactNative Picker. You can check here https://facebook.github.io/react-native/docs/picker.html

[Friendly-Robot]

Found it! This works for Android. Applying the same transform we use to change the size a <Switch> to the style property of the <Picker> should change the fontSize of the selectedValue:

styles.picker = {
  transform: [
     { scaleX: 1.5 }, 
     { scaleY: 1.5 },
  ]
}

[vinicius-cleves]

I have tried Friendly-Robot's solution on Android but the touchable region doesn't scale together with the field.

[Friendly-Robot]

I do not understand why the downvotes. Does this not work for a majority of people? Here are some screenshots where I use this style to effectively change the font size of my <Picker.Item>, the last one is iOS.

@vinicius-cleves Have you tried setting the height and width of your <Picker> to your desired measurements before increasing the font size?

• Just checked on iOS and the same styling works to change font size as well.

EDIT: Nevermind, just realized I posted this in a component library. Anyway, hope this helps someone with the normal RN library somewhere.

[reabbotted]

@Friendly-Robot It worked OK for me. I had some extra padding because of it, so I applied a negative margin to fix that. But it's the best solution I've seen.

[rfdss]

@Friendly-Robot It worked OK for me. Thanks a lot.

[Fr33maan]

@Friendly-Robot I upvote, this is genius solution

[gtiongco95]

Still on iOS I can't set the font size through the textStyle prop.. Anyone found a solution for this?

[mdeveloper20]

Still have problem on Android. textStyle doesn't work at all.

[wadeem]

When picker item font size will get supported?

[evansque]

@sankhadeeproy007 the problem still persists, why did you close the issue?

[sootood]

i have same problem

[kamlesh1000]

Still have this issue.

[approached]

Same issue, @sankhadeeproy007 can you reopen this issues please.

[libasoles]

Tried Friendly-Robot suggestion. Like this:

<Picker
      selectedValue={"dummy"}
      style={{ height: 100, transform: [{ scaleX: 1.2 }, { scaleY: 1.2 }] }}
      onValueChange={noAction}
      textStyle={{ fontSize: 60 }}
    >
      <Picker.Item label={texts.myLibrary.boughtBooks} value={"dummy"} />
</Picker>

But it has two problems. Typescript complains about the transform attribute not being valid/expected.

And the scale... well, you should also change the scale origin, like transformOrigin: "top left"... and it's not working for me anyway.

[SeanCannon]

The prop you are looking for is itemStyle and you need to add it to the Picker component, _not_ the Picker.Item component. Therefore, Picker will likely get both style _and_ itemStyle in your file.

<Picker
  style={{ width : 200 }}
  itemStyle={{ fontSize : 8, color : 'blue' }}
>
  items here... 
</Picker>

[berk9595]

Here is my fix for Android

     <View
      style={{
        paddingLeft: 16,
        paddingRight: 16,
        marginTop: 16,
        marginBottom: 12,
      }}>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          backgroundColor: '#ececec',
          borderRadius: 8,
          padding: 16,
        }}>
        <View
          style={{
            width: '100%',
            borderBottomWidth: 1,
            borderColor: '#e76e3c',
            flexDirection: 'row',
            flex: 1,
            position: 'relative',
            alignItems: 'center',
            height: 32,
          }}>
          <Icon name="ios-pin" size={18} color="#e76e3c" />
          <Picker
            selectedValue={this.state.district}
            style={{
              width: '100%',
              paddingBottom: 0,
              backgroundColor: 'transparent',

              paddingLeft: 0,
              fontFamily: 'Montserrat-Regular',
              transform: [{scaleX: 0.77}, {scaleY: 0.77}],
              left: -25,
              position: 'absolute',
            }}
            onValueChange={(itemValue, itemIndex) =>
              this.setState({district: itemValue})
            }>
            {get(this.props, 'allRegions.allRegions[0].district', [])
              .sort()
              .map((reg, index) => (
                <Picker.Item
                  color="#929292"
                  label={reg}
                  value={reg}
                  key={index}
                />
              ))}
          </Picker>
        </View>
      </View>
    </View>

and result was like this :

[jlguida]

None of the work arounds allow for actual font styling for Android. @berk9595 solutions works great for font size, but not for font weight and many other styling properties. Best solution to have proper control over styling of your dropdown is to change to a new library. Here is a list of some of the best alternatives: https://openbase.io/categories/js/best-react-native-dropdown-libraries