search

AppAndFlow / react-native-design-utility

Utility for building design system in react-native. Idea from TailwindCSS
MIT License
139 stars 25 forks source link

Custom font doesn't work with Text component #7

Open andydev404 opened 4 years ago

andydev404 commented 4 years ago

As a User when I implement a custom font (Lato, Roboto, Poppins, etc.), the font is no taking effect on the Text component

EQuimper commented 4 years ago

It's should, did you link the font into your app ? If you change the name now the text is like the one you use before

andydev404 commented 4 years ago

The font is already linked when I use import { Text } from 'react-native' works fine

EQuimper commented 4 years ago

If possible may I see your code for this? I use this lib for like 7+ projects with custom fonts and work. Just to make sure.

andydev404 commented 4 years ago 
 import { Text } from 'react-native-design-utility';

// I tested with this 2 ways
<Text font="Lato-Black">Some text</Text>
// and
<Text style={{fontFamily: "Lato-Black"}}>Some text</Text>
EQuimper commented 4 years ago

Ha ok the issue is the font here need to match the theme. So you can example add this font to the base or example Lato. And now you can do font=“Lato”

EQuimper commented 4 years ago

so your theme should have

{
    font: {
        lato: 'Lato-Black',
        base: 'Roboto'
    }
}

<Text font="lato">Hello world</Text>
andydev404 commented 4 years ago

The same, It does not work

tolustar commented 4 years ago

I am having the same issues with @andydev404 , The custom font isn't working properly on Android, but works well on iOS. Following the example you displayed above, if I add the bold or normal props to the text component, the text returns back to the default Android font

tolustar commented 4 years ago

I got it fixed. After you initialize a theme via npx react-native-design-utility init, remove the weight object on line 56, and everything would work properly

ghmendonca commented 1 year ago

@EQuimper it doesn't work for me, I have everything right and inspecting the text, I can see that there is no fontFamily set in the text component

This is my theme config:

fonts: {
  base: "Sora",
  sora: "Sora",
},

And I'm using like this:

<Text font="sora">Test</Text>

I've tried not passing the font prop, tried passing fontFamily as prop, none works, the only thing that works is if I pass a style object that has the fontFamily: 'Sora', so I am sure the bug is in this lib