Ui: Unrecognized font family 'Rubik-Regular'

[joshuamataaraya]

I have the latests version (v0.12.0) and this problem appears when I try to run the component on ios

[yusufyildirim]

What is your React Native version?

[joshuamataaraya]

0.42.3 and my react-native-cli version is 2.0.1

[joshuamataaraya]

I don't know what was happening, just followed the installation instructions again and it's working know, thanks for your help @yusufyildirim !!

[tk-pivotus]

I ran into the same issue after first install. But after quitting the app and re-run it again fixed it.

[vladimir-e]

Still have this problem on fresh install, none of solutions from #95 #149 #166 helped

react-native-cli: 2.0.1
react-native: 0.52.2

// ...

    "react-native": "0.52.2",
    "react-native-linear-gradient": "^2.4.0",
    "react-native-vector-icons": "^4.5.0"
  },
  "devDependencies": {
    "@shoutem/ui": "^0.23.2",
// ...

[Definitely-Not-Vlad]

Since fonts are loaded into the app binary, they're considered a native dependency.

If you're using react-native init, you have to link the UI toolkit with react-native link, make sure you install the toolkit with the --save flag so the package.json contains the package and the React Native CLI knows it has to link it.

If you're using create-react-native-app, you will have to asynchronously load the fonts as is described here.

import React, { Component } from 'react';
import { StatusBar } from 'react-native';
import { Font, AppLoading } from 'expo';
import { View, Examples } from '@shoutem/ui';

export default class App extends React.Component {
  state = {
    fontsAreLoaded: false,
  };

  async componentWillMount() {
    await Font.loadAsync({
      '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'),
      'rubicon-icon-font': require('./node_modules/@shoutem/ui/fonts/rubicon-icon-font.ttf'),
    });

    this.setState({ fontsAreLoaded: true });
  }

  render() {
    if (!this.state.fontsAreLoaded) {
      return <AppLoading />;
    }

    return (
      <View styleName="flexible">
        <Examples />
        <StatusBar barStyle="default" hidden={false} />
      </View>
    );
  }
}

[vladimir-e]

Thank you for explanation @Vladimir-Vdovic
I decided to throw away demo project that I've set up according readme. So I just added shoutem to my real project:

yarn add  @shoutem/ui
react-native link

And it worked right away. Although I did react-native link for demo project too. I guess some other prerequisites weren't in place in demo project but were in my real project.
Amazing lib, I'm glad I didn't give up!