CODEWITHSUNDEEP
react-nativeexpo
Anuj Sharma
Anuj Sharma

Reputation: 457

React Native Expo “AppLoading threw an unexpected error when loading” error

enter image description here I have a React Native project with Expo, I installed Expo client on my Android phone. It used to work well so far. But even though I didn't change any code, I now get the following error when I scan the QR code from my phone. This error is shown on terminal and phone screen keeps blank.

    import React from 'react';
import { Image } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Block, GalioProvider } from 'galio-framework';

import Screens from './navigation/Screens';
import { Images, articles, ditsTheme } from './constants';

// cache app images
const assetImages = [
  Images.Onboarding,
  Images.LogoOnboarding,
  Images.Logo,
  Images.Pro,
  Images.DITSLogo,
  Images.iOSLogo,
  Images.androidLogo
];

// cache product images
articles.map(article => assetImages.push(article.image));

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    } else {
      return Asset.fromModule(image).downloadAsync();
    }
  });
}

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  }

  render() {
    if(!this.state.isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this._loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
        <GalioProvider theme={ditsTheme}>
          <Block flex>
            <Screens />
          </Block>
        </GalioProvider>
      );
    }
  }

  _loadResourcesAsync = async () => {
    return Promise.all([
      ...cacheImages(assetImages),
    ]);
  };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
     warn(error);
  };

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

}

How can I solve this error?

Upvotes: 1

Views: 4482

Answers (3)

mrcoder
mrcoder

Reputation: 71

You should add onError to AppLoading. As a like:

<AppLoading startAsync={getFonts} onFinish={() => {
  setFontLoaded(true)
}} onError={console.warn} />

Upvotes: 0

TheTechGuy
TheTechGuy

Reputation: 17384

I was getting this error, the problem was with AppLoading. The issue turned out to be incorrect function name that I was calling from <AppLoading .. />

Note below, I was using Font.loadAsync (with missing c), fixing it made the font load correctly.

const getFonts = () =>  Font.loadAsyn({
      'nanitu-regular' : require('./assets/fonts/EastSeaDokdo-Regular.ttf'),
      'nanitu-bold' : require('./assets/fonts/NanumBrushScript-Regular.ttf')
  })

;

Upvotes: 0

Nick Rameau
Nick Rameau

Reputation: 1318

In your _handleLoadingError method, you're using warn. While you should be using console.warn. This is what's breaking your app.

Upvotes: 1

Related Questions