expo-asset

What is expo-asset?

The expo-asset package is a library for managing assets in Expo projects. It provides utilities for loading and caching assets such as images, fonts, and other media files, making it easier to handle these resources in a performant way.

What are expo-asset's main functionalities?

Loading Assets

This feature allows you to load assets such as images. The code sample demonstrates how to load an image asset asynchronously and log its local URI once it is loaded.

import { Asset } from 'expo-asset';

async function loadAssets() {
  const imageAsset = Asset.fromModule(require('./path/to/image.png'));
  await imageAsset.downloadAsync();
  console.log('Image loaded:', imageAsset.localUri);
}

Caching Assets

This feature allows you to cache multiple assets. The code sample demonstrates how to cache an array of image assets asynchronously and log a message once all assets are cached.

import { Asset } from 'expo-asset';

async function cacheAssets() {
  const assets = [
    require('./path/to/image1.png'),
    require('./path/to/image2.png')
  ];
  const cachePromises = assets.map(asset => Asset.fromModule(asset).downloadAsync());
  await Promise.all(cachePromises);
  console.log('All assets cached');
}

Using with Expo's Asset System

This feature demonstrates how to use expo-asset with Expo's AppLoading component to load and cache assets before rendering the main application. The code sample shows how to load an image asset and display a loading screen until the asset is ready.

import { Asset } from 'expo-asset';
import { AppLoading } from 'expo';

export default function App() {
  const [isReady, setIsReady] = useState(false);

  async function loadResources() {
    const imageAsset = Asset.fromModule(require('./path/to/image.png'));
    await imageAsset.downloadAsync();
  }

  if (!isReady) {
    return (
      <AppLoading
        startAsync={loadResources}
        onFinish={() => setIsReady(true)}
        onError={console.warn}
      />
    );
  }

  return (
    <View>
      <Text>App is ready!</Text>
    </View>
  );
}

Other packages similar to expo-asset

react-native-fast-image

react-native-fast-image is a performant React Native image component that supports caching and progressive loading. It is similar to expo-asset in terms of caching capabilities but is specifically focused on image handling and provides more advanced features like priority loading and GIF support.

react-native-cached-image

react-native-cached-image is another package for handling image caching in React Native applications. It provides a simple API for caching images and is similar to expo-asset in terms of caching functionality. However, it is more limited in scope as it focuses solely on images.

expo-file-system

expo-file-system is a package that provides access to the file system on the device. It can be used to read, write, and manage files, including caching assets. While it offers broader file management capabilities compared to expo-asset, it requires more manual handling of assets.

README

expo-asset

An Expo universal module to download assets and pass them into other APIs

API documentation

• Documentation for the latest stable release
• Documentation for the main branch

Installation in managed Expo projects

For managed Expo projects, please follow the installation instructions in the API documentation for the latest stable release. If you follow the link and there is no documentation available then this library is not yet usable within managed projects — it is likely to be included in an upcoming Expo SDK release.

Installation in bare React Native projects

For bare React Native projects, you must ensure that you have installed and configured the expo package before continuing.

Add the package to your npm dependencies

npx expo install expo-asset

Contributing

Contributions are very welcome! Please refer to guidelines described in the contributing guide.