Unrecognized font family 'entypo'

Question

I'm using the create react native app by the expo team to build an app. Using Icon component from react-native-elements to create a react navigation header feature. Snippet below:

const Navigator = new createStackNavigator({
  Home: {
    screen: Home,
    path: '/',
    navigationOptions: ({ navigation }) => ({
      title: 'Home',
      headerStyle: {
        backgroundColor: 'black'
      },
      headerLeft: (
        <Icon
          name="menu"
          size={30}
          type="entypo"
          style={{ paddingLeft: 10 }}
        />
      ),
    }),
  },
})

I encountered this error:

After numerous iterations, I found this supposed work around 1st and 2nd by the expo team and implemented it this way below for the app but still encountering the same problems.

import Expo from "expo";
import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font } from 'expo';
import { FontAwesome, Ionicons } from '@expo/vector-icons';
import { connect } from 'react-redux'
import { Auth } from 'aws-amplify';
import AuthTabs from './auth/Tabs';
import Nav from './navs/Navigator';
import Home from "./components/Home";


class App extends React.Component {
  state = {
    user: {},
    isLoading: true,
    isLoadingComplete: false,
  };


  async componentDidMount() {
    StatusBar.setHidden(true)
    try {
      const user = await Auth.currentAuthenticatedUser()
      this.setState({ user, isLoading: false })
    } catch (err) {
      this.setState({ isLoading: false })
    }
  }

  async componentWillReceiveProps(nextProps) {
    try {
      const user = await Auth.currentAuthenticatedUser()
      this.setState({ user })
    } catch (err) {
      this.setState({ user: {} })
    }
  }


  render() {
      if (!this.state.isLoadingComplete && !this.props.skipLoadingScreen) {

        return(
          <AppLoading
            startAsync={this._loadResourcesAsync}
            onError={this._handleLoadingError}
            onFinish={this._handleFinishLoading}
          />
      );
      }

      else{
        if (this.state.isLoading) return null

        let loggedIn = false
        if (this.state.user.username) {
          loggedIn = true
        }

        if (loggedIn) {
          return (
            <Nav />
          )
        }
        return (
          <AuthTabs />
        )

}

}


_loadResourcesAsync = async () => {

  console.log("fonts loading..")

  const entypoFont = {
    'entypo': require('../node_modules/@expo/vector-icons/fonts/Entypo.ttf')
  };
  const fontAssets = cacheFonts([ FontAwesome.font, Ionicons.font, entypoFont ]);
   console.log("loaded all fonts locally")
  await Promise.all([...fontAssets]);

  console.log("promisified all fonts")

  };

  _handleLoadingError = error => {
    console.warn(error);
  };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });
  };
}

function cacheFonts(fonts){
  return fonts.map(font => Font.loadAsync(font))
}

const mapStateToProps = state => ({
  auth: state.auth
})

export default connect(mapStateToProps)(App)

What are my doing wrong and how can it be configured appropriately? Thank you