Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font family in Text Input React native

I am trying to implement a text input, where the font family is Zila Slab Bold, But the font family only works for the place holder of the text input, It doesn't work for the inputted text instead it shows the default android text, but when I use Zila Slab Medium it works for both the placeholder and Inputted text, Please what may I be doing wrong, I'm using RN 0.55.0

This is what I want to get

enter image description here

This is what I get when I use Zila Bold

enter image description here

This is my code below

<TextInput    
       underlineColorAndroid={'transparent'}
       placeholder="The Title"
                  placeholderStyle={{fontFamily: 'ZillaSlab-Bold',
            fontSize: 16,}}
                  placeholderTextColor="rgba(0, 0, 0, 0.2)"
style={{
                      paddingLeft: 28,
                      width: (Dimensions.get('window').width),
                      backgroundColor: 'transparent',
                      fontSize: 16, color: 'black',
                      borderTopWidth: 2, borderBottomWidth: 2, borderColor: 'black', 
            marginTop: 100, flexDirection: 'row', alignItems: 'center', fontFamily: 'ZillaSlab-Bold',
                  }}/>   
like image 403
Adokiye Iruene Avatar asked Oct 15 '25 07:10

Adokiye Iruene


1 Answers

The solution proposed by Люда Дзюбинска didn't work for me, but similar approach did the trick - I've specified fontWeight: 'normal' style for TextInput field (even though I had a semibold font) and it let me avoid resetting font family upon input.

like image 132
Vyacheslav Orlovsky Avatar answered Oct 17 '25 22:10

Vyacheslav Orlovsky



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!