react native picker won't use custom fonts

273 views Asked by At

How do I get to make React native Picker use Poppins-Medium Font? Been trying to make it work, but No, Its not responding as expected. I am using Android Studio, just that the font, does not respond as supposed.

Here is my source code snippet.

<View style={{ borderRadius: 5, borderWidth: 1,overflow: "hidden", height: 35, padding: 0,top:10, borderColor:'#00BB23' }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                fontSize: 25,
                fontFamily:'Poppins-Medium',
                borderBottonWidth: 1,
              }}>
              <Picker.Item label="Currency" value="accNum" />
              <Picker.Item label="NGN" value="NGN" />
            </Picker>
          }
        </View>

Where do i go, or what am I missing?

2

There are 2 answers

1
Vu Phung On

Use itemStyle props - it's style for text:

<Picker
  style={{
     width: 300,
     height: 55,
     borderBottomWidth: 1,
  }}
  itemStyle={{
     fontSize: 25,
     fontFamily:'Poppins-Medium',
  }}
>
     <Picker.Item label="Currency" value="accNum" />
     <Picker.Item label="NGN" value="NGN" />
</Picker>
0
dimplav On

Try to use:

<View style={{ borderRadius: 5, borderWidth: 1,overflow: "hidden", height: 35, padding: 0,top:10, borderColor:'#00BB23' }}>
          {
            <Picker
              style={{
                width: 300,
                height: 55,
                borderBottonWidth: 1,
              }}>
              <Picker.Item 
              style={{ fontSize: 25,fontFamily:'Poppins-Medium' }} 
              label="Currency" 
              value="accNum" 
              />
              <Picker.Item 
              style={{ fontSize: 25,fontFamily:'Poppins-Medium' }} 
              label="NGN" 
              value="NGN" 
              />
            </Picker>
          }
        </View>