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: