Nativebase: fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.

Created on 13 Jul 2017 · 12Comments · Source: GeekyAnts/NativeBase

My environment:

  "dependencies": {
    "@expo/vector-icons": "^5.0.0",
    "expo": "^18.0.4",
    "link": "^0.1.5",
    "native-base": "^2.2.0",
    "react": "16.0.0-alpha.12",
    "react-native": "https://github.com/expo/react-native/archive/sdk-18.0.1.tar.gz",
    "react-native-vector-icons": "^4.2.0",
    "react-navigation": "^1.0.0-beta.11"
  }

I take a reference from official sample it just like:

import React from 'react';
import { Container, Header, Button, Text, Icon, Left, Right, Title, Body } from 'native-base';

export default class App extends React.Component {

  render() {
    return (
              <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>I am Title Man</Title>
          </Body>
          <Right />
        </Header>
        <Button>
          <Text>
            Button
          </Text>
        </Button>
      </Container>
    );
  }
}

It compiles well on my IOS emulator , but when i try it on Android emulator , it shows the error:

fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Exponent.Font.loadAsync.

fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.
If this is a custom font, be sure to load it with Exponent.Font.loadAsync.

I try to find some solutions , it likes:
1.close running packager
2.run react-native link react-native-vector-icons
3.and run react-native start --reset-cache
4.Finally use react-native run-ios

It still can't solve the issue , how can i fix it ?

Source

motogod

👍9

Most helpful comment

@motogod With expo you need to load custom fonts. Something like this

shivrajkumar on 13 Jul 2017

👍21 ❤6

All 12 comments

@motogod With expo you need to load custom fonts. Something like this

shivrajkumar on 13 Jul 2017

👍21 ❤6

@shivrajkumar thanks for your help again , it really solve my issue , i had spent my time all of morning , thank you truly !

motogod on 13 Jul 2017

👍6 🎉2

@shivrajkumar
How to load this without Expo? I've ejected CRNA.

dhruvdutt on 26 Oct 2017

@dhruvdutt - just run react-native link. Take a look here. Hope it helps :)

fsunset on 2 Nov 2017

@fsunset
Thanks! I tried it a while ago. The link command didn't work. Had to do it the manual way by coping files inside the android folder. But, yeah it works. :v

dhruvdutt on 2 Nov 2017

👍1

Had the same problem and was able to work around it using the Expo.Font.loadAsync().

I didn't have any such problems in iOS, so I have to question why NativeBase is defaulting to an iOS-friendly font on Android. Can't it be smart enough to use fonts that are actually available on each system?

brownieboy on 20 Dec 2017

Actually, I'm unable to shake this error, despite using the Expo.Font.loadSync() method.

This is rapidly becoming a huge, and unnecessary pain, and is putting me right off Exp, CRNA and maybe NativeBase itself.

brownieboy on 22 Dec 2017

👍4

@brownieboy Please check NativeBase KitchenSink

SupriyaKalghatgi on 2 Jan 2018

Thanks @SupriyaKalghatgi, but I've now abandoned CRNA and Expo. Not for this one reason, but for a number of other compromises and limitations over just using bare metal React Native.

brownieboy on 2 Jan 2018

👍2

@SupriyaKalghatgi I'm having this issue and have the same feelings as you. The suggested code to solve the problem seems an unaceptable and horrible hack. Maybe Expo library is the responsible, I dont know.

Also I have seen the code of kitchen sink and in my opinion is ugly and overcomplicated, I regret to say it, but I almost cant follow even the first steps of the code, which leads me to thinking on to stop using this library.

YagoLopez on 3 Jan 2018

@YagoLopez You said,

kitchen sink code is ugly and overcomplicated, cant follow even the first steps of the code

In that case please raise issue on NativeBase KitchenSink.
Due to this reason, stopping usage of this UI library seems unrelative

SupriyaKalghatgi on 3 Jan 2018

Hi,

Its been a long time i don't use React Native any more.

Hope this code can help you.

Key point is the constructor and componentWillMount function

import React from 'react';
import Expo from 'expo';
import { StyleSheet, Text, View, StatusBar } from 'react-native';
import {
Container, Drawer, Header, Body, Left, Right,
Button, Icon, Title, Footer, FooterTab, Content, Badge
} from 'native-base';

import DrawerView from './screens/DrawerView';

export default class App extends React.Component {
constructor() {
super();
this.state = {
isReady: false
};
}

async componentWillMount() {
await Expo.Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf")
});
this.setState({ isReady: true });
}

closeDrawer = () => {
console.log('closeDrawer click');
this.drawer._root.close()
};
openDrawer = () => {
console.log('openDrawer click');
this.drawer._root.open()
};

//
render() {
if (!this.state.isReady) {
return ;
}

return (
ref={(ref) => { this.drawer = ref; }}
content={}
backgroundColor= '#33FFAA'
onClose={() => this.closeDrawer()} >

backgroundColor="#008844"
/>

Header

This is Content Section

);
}
}

2018-01-17 18:05 GMT+08:00 githubmss notifications@github.com:

i am facing the same issue , @shivrajkumar
https://github.com/shivrajkumar and @motogod
https://github.com/motogod can you please tell me what i need to do ,
do i have toput roboto-medium font file inside my folder and have to import
that by using Expo.Font.loadAsync method ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/1041#issuecomment-358256532,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQ9TY6jwmTRiD5AwRh1y9fozeMh4zE98ks5tLcYEgaJpZM4OWhc6
.