Unrecognized font family 'ionicons' expo + native-base

user_8617130 0
Viewed 2856

I'm using expo with native base, and I've been stuck trying to load icons I've had this issue with both ionicons and anticon. If you look at my componentDidMount I'm loading the font from native base, and I'm not rendering the icon until it has been loaded. note the ttf files are in the native-base/Fonts folder

import React from "react";
import { Image, StyleSheet } from "react-native";
import { Header, Body, Left, Button, Right, Icon } from "native-base";
import * as Font from 'expo-font';


export default class NavigationBar extends React.Component {
  state = {
    loaded: false
  }

  async componentDidMount() {
    await Font.loadAsync({
      'Ionicons': require('native-base/Fonts/Ionicons.ttf'),
    });
    this.setState({ loaded: true});
  }

  render() {
    return  !this.state.loaded ? null : (
      <Header style={styles.header}>
        <Left>
          <Button
            active={true}
            onPress={() => {
              this.props.navigation.openDrawer();
            }}
            transparent
          >
            <Icon style={styles.Icon} name="menu" />
          </Button>
        </Left>
        <Body />
        <Right>
          <Button
            onPress={() => {
              this.props.navigation.navigate("Profile");
            }}
            transparent
          >
            <Image
              source={require("../assets/avatar.png")}
              style={{ height: 25, width: 25 }}
            />
          </Button>
        </Right>
      </Header>
    );
  }
}

My dependencies are as follows:

"@expo/vector-icons": "^10.0.6",
    "@react-native-community/masked-view": "^0.1.6",
    "expo": "~36.0.0",
    "expo-font": "~8.0.0",
    "native-base": "^2.13.8",
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-datepicker": "^1.7.2",
    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-safe-area-view": "^1.0.0",
    "react-native-screens": "^2.2.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.2.2",
    "react-navigation-drawer": "^2.4.2",
    "react-navigation-stack": "^2.2.2"
native-base expo react-native
1 Answers

after great pain and I've solved the issue. It turns out that you shouldn't use AppRegistry.registerComponent to register an epxo app. instead you should use registerRootComponent.

i changed the following line in my index.js from 

AppRegistry.registerComponent('main', () => Main);

to 

registerRootComponent(Main);

also for those of you who haven't made it this far you also must update the entry point to the application in your app.json when specifying a custom entry point:

  "expo": {
    "name": "project",
    "slug": "project",
    "entryPoint": "./index.js",
    "privacy": "public",
    "sdkVersion": "36.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],

here is a link to the source where i discovered this tomfoolery:

https://github.com/expo/vector-icons/issues/31#issuecomment-348374921

user_86171300
Related