mcnamee / react-native-starter-kit

:rocket: A React Native boilerplate app to get you up and running very, very quickly :rocket:
MIT License
3.35k stars 863 forks source link

Not found fontFamily Ionicons #197

Closed juanagu closed 5 years ago

juanagu commented 5 years ago

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.

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

screen shot 2018-11-06 at 12 18 40 screen shot 2018-11-06 at 12 18 46
  1. 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 commented 5 years ago

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

pdubey84 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

happy-machine commented 5 years ago

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 commented 5 years ago

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