Custom Font error

App.js

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font'
import RootNavigation from './navigation/RootNavigation';
import { YellowBox } from 'react-native';
import logger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import rootReducer from './redux/reducers';

if (__DEV__) {
  import('./ReactotronConfig').then(() => console.log('Reactotron Configured'))
  require('react-devtools-core').connectToDevTools({ host: 'ip-of-machine-with-devtools-running' })

}
// background image for each size of device

// ignore specific yellowbox warnings
YellowBox.ignoreWarnings(['Require cycle:', 'Remote debugger', 'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader']);
const store = createStore(
  rootReducer,
  applyMiddleware(logger)
);
store.subscribe(() => { });

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === "string") {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}
function cacheFonts(fonts) {
return fonts.map(font => Font.loadAsync(font));
}

export default class App extends React.Component {
  constructor(props) {
super(props);

this.state = {
  isReady: false,
};
}

async loadAssetsAsync() {
console.log("loading assets");
const imageAssets = cacheImages([require("./assets/images/spots_on_stage.jpg")]);

const fontAssets = cacheFonts([
  { "SFNewRepublic": require("./assets/fonts/SFNewRepublic.ttf") },
]);

await Promise.all([...imageAssets, ...fontAssets]);

this.setState({ isReady: true });
}

  render() {

    if (!this.state.isReady) {
      return (
        <AppLoading
          startAsync={this._loadAssetsAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } 

      return (
        <Provider store={store}>
          <View style={styles.container}>
            {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
            <RootNavigation />
          </View>
        </Provider>

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});