Not found fontFamily Ionicons

[juanagu]

When execute the app using yarn start and then selected iOS or Android this error appeared (Only when I rename the root folder "react-native-starter-kit" works fine with name react-native-starter-kit)

fontFamily 'Ionicons' is not a system font and has not been loaded through Expo.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 Expo.Font.loadAsync.
• node_modules/expo/src/Font.js:33:10 in processFontFamily
• ... 31 more stack frames from framework internals

Help us reproduce - tell us about your environment

1. Mac
2. Android or iOS
3. Latest version from master. Download zip.

Steps to reproduce

1. run yarn install
2. run yarn start
3. press "i" or "a"

Expected result

1. show app icons

Actual result

2. Log

fontFamily 'Ionicons' is not a system font and has not been loaded through Expo.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 Expo.Font.loadAsync.
• node_modules/expo/src/Font.js:33:10 in processFontFamily
• ... 31 more stack frames from framework internals

[daichuqi]

I had the exact same issue. only renaming back to react-native-starter-kit works which seems super strange.

[pdubey84]

You need to do this in your index.js... You might have to change it to a react class

componentWillMount() {
    this.loadFonts();
  }
  async loadFonts() {
    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")
    });
  }

[happy-machine]

Hey

Thanks for this .. rewrite it how? I've tried rewriting like this class Index extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Stack hideNavBar>
        <Scene hideNavBar>
          <Tabs
            key="tabbar"
            swipeEnabled
            type="replace"
            showLabel={false}
            {...DefaultProps.tabProps}
          >
            <Stack
              key="recipes"
              title="FEED"
              icon={() => <Icon name="list" {...DefaultProps.icons} />}
              {...DefaultProps.navbarProps}
            >
              <Scene key="recipes" component={RecipesContainer} Layout={RecipesComponent} />
            </Stack>
            <Stack
              key="profile"
              title="PROFILE"
              icon={() => <Icon name="contact" {...DefaultProps.icons} />}
              {...DefaultProps.navbarProps}
            >
              <Scene key="home" component={RecipesContainer} Layout={AboutComponent} />
            </Stack>
            <Stack
              key="settings"
              title="SETTINGS"
              icon={() => <Icon name="key" {...DefaultProps.icons} />}
              {...DefaultProps.navbarProps}
            >
              <Scene key="profileHome" component={MemberContainer} Layout={ProfileComponent} />
              <Scene
                back
                key="signUp"
                title="SIGN UP"
                {...DefaultProps.navbarProps}
                component={SignUpContainer}
                Layout={SignUpComponent}
              />
              <Scene
                back
                key="login"
                title="LOGIN"
                {...DefaultProps.navbarProps}
                component={LoginContainer}
                Layout={LoginComponent}
              />
              <Scene
                back
                key="forgotPassword"
                title="FORGOT PASSWORD"
                {...DefaultProps.navbarProps}
                component={ForgotPasswordContainer}
                Layout={ForgotPasswordComponent}
              />
              <Scene
                back
                key="locale"
                title="CHANGE LANGUAGE"
                {...DefaultProps.navbarProps}
                component={LocaleContainer}
                Layout={LocaleComponent}
              />
              <Scene
                back
                key="updateProfile"
                title="UPDATE PROFILE"
                {...DefaultProps.navbarProps}
                component={UpdateProfileContainer}
                Layout={UpdateProfileComponent}
              />
            </Stack>
          </Tabs>
        </Scene>

        <Scene
          back
          clone
          key="recipe"
          title="RECIPE"
          {...DefaultProps.navbarProps}
          component={RecipesContainer}
          Layout={RecipeViewComponent}
        />
      </Stack>
    );
  }
}

export default Index;

And i get 'undefined is not an object, evaluating child.props.clone' This is assuming by index.js you mean src/native/routes/index.js?

[pdubey84]

Try this in your /native/index.js

import React, { Component } from 'react';
import * as Expo from "expo";
import { StatusBar, Platform } from 'react-native';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { Router, Stack } from 'react-native-router-flux';
import { PersistGate } from 'redux-persist/es/integration/react';

import { Root, StyleProvider } from 'native-base';
import getTheme from '../../native-base-theme/components';
import theme from '../../native-base-theme/variables/commonColor';

import Routes from './routes/index';
import Loading from './components/Static/Loading';

// Hide StatusBar on Android as it overlaps tabs
if (Platform.OS === 'android') StatusBar.setHidden(true);

export default class App extends Component {
  static propTypes = {
    store: PropTypes.shape({}).isRequired,
    persistor: PropTypes.shape({}).isRequired,
  };
  constructor() {
    super();
    this.state = {
      isAppReady: false
    };
  }
  async componentWillMount() {
    this.loadFonts();
  }
  async loadFonts() {
    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({ isAppReady: true });
  }
  render() {
    const { store, persistor } = this.props;

    if (!this.state.isAppReady) {
      return 'Loading...';
    }

    return (
      <Root>
        <Provider store={store}>
          <PersistGate
            loading={<Loading />}
            persistor={persistor}
          >
            <StyleProvider style={getTheme(theme)}>
              <Router>
                <Stack key="root">
                  {Routes}
                </Stack>
              </Router>
            </StyleProvider>
          </PersistGate>
        </Provider>
      </Root>
    );
  }
}

[happy-machine]

Brilliant, thanks a lot for that, will try it : )

[happy-machine]

Hey @pdubey84 that works on ios (though i dont have the font loading problems on ios) but actually hangs expo on android, i did get a flashed up warning but the last ten times ive tried to restart it just hangs so unfortunately i didnt get to see what the warning was

[mcnamee]

I've added something similar into the repo on master branch - let me know if it doesn't solve the issue, and I'll re-open.

https://github.com/mcnamee/react-native-starter-kit/commit/7494bda1f53c56acfd86087ecac6f39f8bb540a9