Understanding how to load a "font-family" in react native

Question

I'm trying to grok an understanding of fonts vs font-families in react native. I found a bug between the shoutem/ui library and exponentjs frameworks where shoutem/ui had set a style for a TextInput to Rubik. However, the exponentjs project loads each Rubik font individually and needs a reference to a specific Rubik font or weight, e.g. Rubik-Regular.

https://github.com/shoutem/ui/blob/develop/theme.js

https://github.com/exponent/shoutem-example

What I don't understand is: is there default magic that happens somewhere in the default react-native font implementation that understands that all these Rubik fonts are part of a font family and sets the entire font to Rubik and displays the Bold, Italics, etc... as needed when the Text is styled as bold? Does that mean that Exponent didn't implement this font aggregation functionality that aggregates all these fonts into a named font-family group?

Or...

Did the shoutem library make a mistake by referencing a font does not exist in the app?

How the exponent app loads all the fonts used by the shoutem library:

 {'Rubik-Black': require('./node_modules/@shoutem/ui/fonts/Rubik-Black.ttf')},
  {'Rubik-BlackItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BlackItalic.ttf')},
  {'Rubik-Bold': require('./node_modules/@shoutem/ui/fonts/Rubik-Bold.ttf')},
  {'Rubik-BoldItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-BoldItalic.ttf')},
  {'Rubik-Italic': require('./node_modules/@shoutem/ui/fonts/Rubik-Italic.ttf')},
  {'Rubik-Light': require('./node_modules/@shoutem/ui/fonts/Rubik-Light.ttf')},
  {'Rubik-LightItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-LightItalic.ttf')},
  {'Rubik-Medium': require('./node_modules/@shoutem/ui/fonts/Rubik-Medium.ttf')},
  {'Rubik-MediumItalic': require('./node_modules/@shoutem/ui/fonts/Rubik-MediumItalic.ttf')},
  {'Rubik-Regular': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')},
  {'Rubik': require('./node_modules/@shoutem/ui/fonts/Rubik-Regular.ttf')},
  {'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf')},

  ...    using Exponent.Font.loadAsync(font)

try native base it is better than shoutem library – Codesingh Jan 14 '17 at 14:30 — Codesingh, Jan 14 '17 at 14:30
Do you still have this problem? – Mr Br Apr 06 '17 at 13:37 — Mr Br, Apr 06 '17 at 13:37

score 0 · Answer 1 · answered Apr 10 '17 at 15:04

It seems like you have problems using Shoutem UI because you're using it with Expo, which has restrictions on which native functionalities you can use.

Here's an example of what do you need to do to make it work: https://github.com/shoutem/ui/tree/develop/examples/create-react-native-app

Understanding how to load a "font-family" in react native

1 Answers1