CODEWITHSUNDEEP
react-nativeexpometro-bundler
Mehmet Kaplan
Mehmet Kaplan

Reputation: 2352

What are the asset download mechanics of Expo and React-Native during development and production mode?

I am confused about the mechanics of Expo and React-Native, how they download the assets.

The info that I know is, once you build your code, expo prepares a bundle which contains both the javascript (compiled code) and the assets altogether.

And during a debug session, that bundle - as a whole - is first downloaded by the expo client and then the app is started. Which means all the assets that are "import"ed in the code should be in place once the application is started.

On the other hand this is completely opposite when I run the following atomic test code. It takes time to load those assets as if they are "lazy loaded".

So my question is; is that behaviour development mode related or will it still take time to download images in the production mode?

import * as React from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import Test0Img from './assets/test0.gif';
import Test1Img from './assets/test1.gif';

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

  render() {
    return (
      <View style={styles.container}>
        <Text></Text>
        <Text></Text>
        <Button
          onPress={() => {
            let l_newImageIndex = (this.state.imageIndex + 1) % 2;
            this.setState({ imageIndex: l_newImageIndex });
          }}
          title="Click to Change Image"
        />
        <Image
          source={this.state.imageIndex === 1 ? Test0Img : Test1Img}
          style={{
            width: '100%',
            height: '100%',
            resizeMode: 'contain',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Code can be seen in this snack: https://snack.expo.io/@mehmetkaplan/assetdownloadtest

If you run this code in your mobile, most probably you'll observe that the animated gif is not changed easily. But if you run it through web it changes quicker.

Expo documentation states here:

For images that saved to the local filesytem, use Asset.fromModule(image).downloadAsync() to download and cache the image. There is also a loadAsync() helper method to cache a batch of assets.

This is also related with above question, why should we need to cache an image if it is in the local filesystem?

Same question added also to Expo forums, as may be seen here. Linking both so that any possible answer can be found by future visitors.

Upvotes: 12

Views: 1771

Answers (1)

colinux
colinux

Reputation: 4599

For posterity, here is the answer posted in Expo forum, by an Expo engineer:

During development in the Expo client, the images will be downloaded from your local environment. This will take longer due to the all the extra processes that run during Development Mode such as validation checks, remote debugging, hot reloading if enabled, etc. You can read more about this here: https://docs.expo.io/versions/v34.0.0/workflow/development-mode/

When running a published project within the Expo Client, it will fetch your assets from the CDN (CloudFront) in which case you’ll want to make use of the AppLoading module to pre-fetch the assets and only hide the splash screen after all assets have been loaded into memory.

When building a standalone application, you have the option to bundle your assets into the binary (which most should use unless they have an abnormal amount of assets or assets with heavy file sizes) that will result in the assets being loaded into memory much faster since they will be fetched from the local disk rather than making a network request to the CDN.

Upvotes: 4

Related Questions