How to set default font family in React Native

Question

Is there an equivalent to this CSS in React Native  so that the app uses the same  font everywhere    body     font-family   Open Sans       Applying it manually on every Text node seems overly complicated

User · Answer

For React Native version   0 60  in your root file create a file called react-native config js and put the followings  then just run react-native link module exports       assets    quot   assets fonts quot

User · Answer

Set in package json  quot rnpm quot        quot assets quot           quot   assets fonts  quot         And link react-native link

User · Answer

You can override Text behaviour by adding this in any of your component using Text   let oldRender   Text prototype render  Text prototype render   function     args        let origin   oldRender call this     args       return React cloneElement origin            style    color   red   fontFamily   Arial    origin props style               Edit  since React Native 0 56  Text prototypeis not working anymore  You need to remove the  prototype    let oldRender   Text render  Text render   function     args        let origin   oldRender call this     args       return React cloneElement origin            style    color   red   fontFamily   Arial    origin props style

User · Answer

That works for me  Add Custom Font in React Native  download your fonts and place them in assets fonts folder  add this line in package json     rnpm      assets     assets fonts Sarpanch      then open terminal and run this command  react-native link  Now your are good to go  For more detailed step  visit the link above mentioned

User · Answer

With React-Native 0 56  the above method of changing Text prototype render does not work anymore  so you have to use your own component  which can be done in one line   MyText js  export default props   gt   lt Text     props  style    fontFamily   Helvetica    props style   gt  props children  lt  Text gt    AnotherComponent js  import Text from    MyText         lt Text gt This will show in default font  lt  Text gt

User · Answer

Super late to this thread but here goes   TLDR   Add the following block in your AppDelegate m  -  BOOL application  UIApplication   application didFinishLaunchingWithOptions  NSDictionary   launchOptions                 HERE  replace  Verlag  with your font     UILabel appearance  setFont  UIFont fontWithName   Verlag  size 17 0               Walkthrough of the whole flow   A few ways you can do this outside of using a plugin like react-native-global-props so Ill walk you though step by step   Adding fonts to platforms   How to add the font to IOS project  First let s create a location for our assets  Let s make the following directory at our root        ios  static         fonts         Now let s add a  React Native  NPM in our package json     rnpm          static           static fonts               Now we can run  react-native link  to add our assets to our native apps   Verifying or doing manually   That should add your font names into the projects  plist  for VS code users run code ios   Info plist to confirm   Here let s assume Verlag is the font you added  it should look something like this         lt dict gt      lt plist gt                     lt key gt UIAppFonts lt  key gt         lt array gt            lt string gt Verlag Bold Italic otf lt  string gt            lt string gt Verlag Book Italic otf lt  string gt            lt string gt Verlag Light otf lt  string gt            lt string gt Verlag XLight Italic otf lt  string gt            lt string gt Verlag XLight otf lt  string gt            lt string gt Verlag-Black otf lt  string gt            lt string gt Verlag-BlackItalic otf lt  string gt            lt string gt Verlag-Bold otf lt  string gt            lt string gt Verlag-Book otf lt  string gt            lt string gt Verlag-LightItalic otf lt  string gt         lt  array gt                  lt  dict gt   lt  plist gt    Now that you mapped them  now let s make sure they are actually there and being loaded  this is also how you d do it manually    Go to  Build Phase   gt   Copy Bundler Resource   If it didn t work you ll a manually add under them here     Get Font Names  recognized by XCode   First open your XCode logs  like     Then you can add the following block in your AppDelegate m to log the names of the Fonts and the Font Family   -  BOOL application  UIApplication   application didFinishLaunchingWithOptions  NSDictionary   launchOptions                 for  NSString  family in  UIFont familyNames           NSLog        family       for  NSString  name in  UIFont fontNamesForFamilyName  family               NSLog         name                        Once you run you should find your fonts if loaded correctly  here we found ours in logs like this   2018-05-07 10 57 04 194127-0700 MyApp 84024 1486266  Verlag 2018-05-07 10 57 04 194266-0700 MyApp 84024 1486266   Verlag-Book 2018-05-07 10 57 04 194401-0700 MyApp 84024 1486266   Verlag-BlackItalic 2018-05-07 10 57 04 194516-0700 MyApp 84024 1486266   Verlag-BoldItalic 2018-05-07 10 57 04 194616-0700 MyApp 84024 1486266   Verlag-XLight 2018-05-07 10 57 04 194737-0700 MyApp 84024 1486266   Verlag-Bold 2018-05-07 10 57 04 194833-0700 MyApp 84024 1486266   Verlag-Black 2018-05-07 10 57 04 194942-0700 MyApp 84024 1486266   Verlag-XLightItalic 2018-05-07 10 57 04 195170-0700 MyApp 84024 1486266   Verlag-LightItalic 2018-05-07 10 57 04 195327-0700 MyApp 84024 1486266   Verlag-BookItalic 2018-05-07 10 57 04 195510-0700 MyApp 84024 1486266   Verlag-Light   So now we know it loaded the Verlag family and are the fonts inside that family   Verlag-Book Verlag-BlackItalic Verlag-BoldItalic Verlag-XLight Verlag-Bold Verlag-Black Verlag-XLightItalic Verlag-LightItalic Verlag-BookItalic Verlag-Light   These are now the case sensitive names we can use in our font family we can use in our react native app   Got - em now set default font   Then to set a default font to add your font family name in your  AppDelegate m with this line  -  BOOL application  UIApplication   application didFinishLaunchingWithOptions  NSDictionary   launchOptions                 ADD THIS LINE  replace  Verlag  with your font       UILabel appearance  setFont  UIFont fontWithName   Verlag  size 17 0               Done

User · Answer

Add   rnpm        assets         assets fonts           in package json  then run react-native link

User · Answer

Add this function to your root App component and then run it from your constructor after adding your font using these instructions  https   medium com react-native-training react-native-custom-fonts-ccc9aacf9e5e  import  Text  TextInput  from  react-native   SetDefaultFontFamily        gt        let components    Text  TextInput       const customProps             style                fontFamily   Rubik                       for let i   0  i  lt  components length  i              const TextRender   components i  prototype render          const initialDefaultProps   components i  prototype constructor defaultProps          components i  prototype constructor defaultProps                    initialDefaultProps                 customProps                    components i  prototype render   function render                 let oldProps   this props              this props        this props  style   customProps style  this props style                 try                   return TextRender apply this  arguments                 finally                   this props   oldProps

User · Answer

The recommended way is to create your own component  such as MyAppText  MyAppText would be a simple component that renders a Text component using your universal style and can pass through other props  etc   https   facebook github io react-native docs text html limited-style-inheritance

User · Answer

There was recently a node module that was made that solves this problem so you don t have to create another component   https   github com Ajackster react-native-global-props  https   www npmjs com package react-native-global-props  The documentation states that in your highest order component  import the setCustomText function like so   import   setCustomText   from  react-native-global-props     Then  create the custom styling props you want for the react-native Text component  In your case  you d like fontFamily to work on every Text component   const customTextProps        style         fontFamily  yourFont         Call the setCustomText function and pass your props styles into the function   setCustomText customTextProps     And then all react-native Text components will have your declared fontFamily along with any other props styles you provide

User · Answer

For React Native 0 56 0  check if defaultProps is defined first   Text defaultProps   Text defaultProps         Then add    Text defaultProps style      fontFamily   some font      Add the above in the constructor of the App js file  or any root component you have    In order to override the style you can create a style object and spread it then add your additional style   e g      baseStyle  fontSize  16

[react-native] How to set default font family in React Native?

Examples related to react-native