Monday, February 11, 2019

How to resolve Expo client hanging issue when follow the NativeBase ReactNavigation tutorial?

Software Required
NPM version 6.4.1
expo version 2.6.14
Atom 1.34.0
NativeBase 2.10.0. Please refer to link

Problems

  • Follow the sample tutorial provided by NativeBase and it hang my Expo client.
  • Below are the sample code that I used from NativeBased tutorial.
import React, { Component } from "react";
import Expo from "expo";
import HomeScreen from "./src/HomeScreen/index.js";
export default class AwesomeApp extends 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("native-base/Fonts/Ionicons.ttf")
    });
    this.setState({ isReady: true });
  }
  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }
    return <HomeScreen />;
  }
}

Steps
  • After a long troubleshooting, I manage to identify the line as shown below that caused the hang.
...
    await Expo.Font.loadAsync({
...
  • Replace App.js with the sample source as shown, remove "Expo." before the Font.loadAsync, it just working great. No more hanging in my Expo client.
import React, { Component } from "react";
import HomeScreen from "./src/HomeScreen/index.js";
import {Font, Expo, AppLoading} from 'expo';
export default class AwesomeApp extends Component {
  state={
    isReady: false
  }

  constructor() {
    super();
  }

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

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

    return <HomeScreen />;
  }
}

No comments: