App gets stuck on the splash screen or throws error cannot load all Assets sometimes

Please provide the following:

  1. SDK Version: 37
  2. Platforms(Android/iOS/web/all): Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

My app gets stuck on spalsh screen when i run expo start --no-dev --minify command. it works well if i use expo start. we encountered this problem after uploading it to the playstore. We are loading the assets through app loading component which is causing some issue. I tried to manually hide spalshscreen but it didnt worked. only the minified version is not loading the assets.
this is my app.js

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

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

const persistor = persistStore(store);

console.ignoredYellowBox = [
  "Warning: View.propTypes",
  "Require cycle:",
];

export default class App extends React.Component {
  state = {
    appIsReady: false,
    primaryColor: Color.secondary,
    isNewStore: false,
  };

  componentWillMount() {
    if (__DEV__) {
      Reactotron.connect();
      Reactotron.clear();
    }
  }

  _initializeStore = () => {
    initializeAndTestStore()
      .then((store) => {
        this.setState({
          // primaryColor: store.shopify.primaryColor,
          primaryColor: this.state.primaryColor,
          isNewStore: store.isNewStore,
          appIsReady: true,
        });
      })
      .catch((error) => {
        this.setState({ appIsReady: true });
        console.log(error);
      });
  };

  loadAssets = async () => {
    const fontAssets = cacheFonts([
      { Dosis: require("@assets/fonts/Dosis-Regular.ttf") },
      { "Dosis-Bold": require("@assets/fonts/Dosis-Bold.ttf") },
      { Baloo: require("@assets/fonts/Baloo-Regular.ttf") },
      { Ionicons: require("@expo/vector-icons/fonts/Ionicons.ttf") },
      { Caslon: require("@assets/fonts/Caslon224Std-Medium.otf") },
      { Harmonia: require("@assets/fonts/Harmonia-Sans-W01-Regular.ttf") },
    ]);

    const imageAssets = cacheImages([
      require("@images/checkout/header_cart.png"),
    ]);

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

  render() {
    if (!this.state.appIsReady) {
      return (
        <AppLoading
          startAsync={this.loadAssets}
          onFinish={this._initializeStore}
        />
      );
    }

    if (this.state.isNewStore) {
      store.dispatch({ type: "CLEAN_OLD_STORE" });
    }

    const Theme = {
      primaryColor: this.state.primaryColor,
    };

    console.log("Theme", Theme);

    return (
      <ThemeProvider theme={Theme}>
        <Provider store={store}>
          <PersistGate persistor={persistor}>
            <RootRouter persistor={persistor} />
          </PersistGate>
        </Provider>
      </ThemeProvider>
    );
  }
}

Any help is appreciated

Hey @meherexpo, this will be very hard to help debug without a runnable example. If you could create a public repo that implements the minimal, relevant code that we can clone and run that would be great.

Cheers,
Adam

Hey @adamjnav . Sorry for the late reply. Here is the github repo link

Clone it and run in expo start --no-dev and --minify command to see the error.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.