Images can't load on production environment

[cristiankmb]

Please provide the following:

1. SDK Version: 34.0.0
2. Platforms: Android-iOS
3. React Version: 16.8.3
4. React-Native: 0.59.10
   5.Environment: Production

Hi Guys,

i have a problem in production environment, as in develop environment don’t happen. This problem is happen since i updated to Expo SDK Version 34.0.0

I have an array contain 12 items, item is image, which images weight is average 100kb and size is 720x2560. This array is render with a FlatList vertical.

Each images is local storage and i use asset tools to download async each image.

In develop environment with expo star and simulator and different device both iOS as Android the app run correctly even when in the DevTools production mode is active.

But when i build a .apk as “expo build:android --no-publish” or “expo build:android” or upload with “expo publish” the images in the production app never can see, only can see a white image.
(This process too happen with a .ipa)

I updated .apk and .ipa in the store create a new project with the last Expo SDK Version, i changed images for low weight images and low size, Sentry never notify this as a bug.

Any idea? Thank

[adamjnav]

Hey @cristiankmb,

Do you make use of asset bundling? If not, when you publish assets to the CDN, only those that are explicitly required will be picked up by the packager which may explain why you are not seeing them in a production environment. Nevertheless, I would certainly take advantage of asset bundling for a better loading experience for the end user. https://docs.expo.io/versions/v35.0.0/guides/offline-support/#bundle-your-assets-inside-your-standalone-binary

Cheers,
Adam

[cristiankmb]

Hi @adamjnav, Thank you for answer my post, i will try to use your suggestion.

@adamjnav

Do you make use of asset bundling? If not, when you publish assets to the CDN, only those that are explicitly required will be picked up by the packager which may explain why you are not seeing them in a production environment.

Can it be the reason why before images worked fine and currently not? i started this project with expo 28.0.0 and when i published firts version assetBundlePatterns was not available yet.

[cristiankmb]

Sorry @adamjnav, but i have another question … Why another images work fine and this not?

[adamjnav]

Can you share the code of how you are requiring the images?

[cristiankmb]

@adamjnav Sure!

images.js file where i import all my images assets.

const JAN2019 = require('../../assets/images/backgrounds/bg00.jpg');

export default {
  backgrounds: {
    JAN2019,
  }
}

App.js file where i use downloadAsycn function

import Images from './Images';

//Array with all 12 images that i use in the flatlist
const arrayImages = [
  Images.backgrounds.JAN2018,
]

function cacheImages(images) {
  return images.map(image => Asset.fromModule(image).downloadAsync());
}

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      isLoadingComplete: false,
    };
  }

  handleLoadingError = error => {
    console.log('handleLoadingError', error);
  };

  handleFinishLoading = () => {
    console.log('handleFinishLoading');
    this.setState({ isLoadingComplete: true });
  };

  async cacheAssetsAsync() {
    try {
      await Promise.all([...cacheImages(arrayImages)], ...cacheFonts(arrayFonts));
    } catch (error) {
      console.log('cacheAssetsAsync error: ', error);
    } finally {
      console.log('cacheAssetsAsync finally');
    }
  }

  render() {
    const store = createStore(
      reducers,
      {},
      compose(
        applyMiddleware(
          ReduxThunk,
          //logger
        ),
        autoRehydrate()
      )
    );
    persistStore(store, { storage: AsyncStorage });

    if (!this.state.isLoadingComplete) {
      return (
        <AppLoading
          startAsync={this.cacheAssetsAsync}
          onError={this.handleLoadingError}
          onFinish={this.handleFinishLoading}
        />
      );
    }
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

index.js file where i use loaded image

import Images from './Images';

/*Array of images for each month*/
const programBgArray = [
  Images.backgrounds.JAN2019,
];

export default class Program extends React.PureComponent { 
  renderMonth(item) {
    return (
      <ImageBackground
        source={item}
        resizeMode="cover"
        style={StyleSheet.flatten(styles.imgBG)}
      >
      </ImageBackground>
    );
  }
  render() {
    return (
        <FlatList
          data={programBgArray}
          extraData={this.state}
          renderItem={(item) => this.renderMonth(item)}
        />
    );
  }
}