expo-asset

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

@amazon-devices/expo-asset provides an Expo universal module to download assets and pass them into other APIs.

Installation
Examples
API reference
- Hooks
- Classes
  - Asset properties
  - Asset methods
Supported versions
Additional resources

Installation

Add the JavaScript library dependency in the package.json file.

Copied to clipboard.

 dependencies: {
      ...
     "@amazon-devices/expo-asset": "~2.0.0",
     "expo": "~50.0.0",
     ...
}

Reinstall dependencies using npm install command.

Examples

The example below demonstrates how to download and store assets locally with the useAssets hook.

Copied to clipboard.

import React from 'react';
import {useAssets} from '@amazon-devices/expo-asset';
import {Image, ImageSourcePropType, StyleSheet, Text, View} from 'react-native';

export const App = () => {
  // eslint-disable-next-line no-unused-vars
  const [assets, _] = useAssets([
    require('./assets/learn.png'),
    require('./assets/kepler.png'),
  ]);

  if (!assets) {
    return (
      <View style={styles.container}>
        <Text style={styles.text}>
          No assets selected, check paths provided in `useAssets` methods
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Image
        source={assets[0] as ImageSourcePropType}
        width={400}
        height={400}
      />
      <Image
        source={assets[1] as ImageSourcePropType}
        width={400}
        height={400}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    flexDirection: 'row',
    gap: 100,
  },
  text: {
    fontSize: 30,
    backgroundColor: 'black',
  },
});

The example below demonstrates how to download assets with the loadAsync method.

Copied to clipboard.

import React, {useState} from 'react';
import {Asset} from '@amazon-devices/expo-asset';
import {
  Button,
  Image,
  ImageSourcePropType,
  StyleSheet,
  Text,
  View,
} from 'react-native';

export const App = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [image, setImage] = useState<Asset>();

  const onLoadAsset = async () => {
    setIsLoading(true);
    const [asset] = await Asset.loadAsync(require('./assets/kepler.png'));
    setImage(asset);
    setIsLoading(false);
  };

  return (
    <View style={styles.container}>
      <Button title="Load asset" onPress={onLoadAsset} />
      {isLoading && <Text style={styles.text}>Loading...</Text>}
      {image && <Image source={image as ImageSourcePropType} />}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 30,
    color: 'black',
  },
});

API reference

Check out the dedicated documentation page for info about this library, API reference and more: Official Expo documentation for expo-asset.

Hooks

Hook	Description
`useAssets`	Downloads and stores one or more assets locally

Classes

Class	Description
`Asset`	The `Asset` class represents an asset in the application

Asset properties

Property	Description
`downloaded`	A boolean value, informs whether the asset has been downloaded
`downloading`	A boolean value, informs whether the asset is being downloaded
`hash`	The MD5 hash of the asset's data
`height`	If the asset is an image, the height of the image data divided by the scale factor. The scale factor is the number after @ in the filename, or 1 if not present
`localUri`	If the asset has been downloaded (by calling downloadAsync()), the `file://` URI pointing to the local file on the device that contains the asset data
`name`	The name of the asset file without the extension. Also without the part from @ onward in the filename (used to specify scale factor for images)
`type`	The extension of the asset filename
`uri`	A URI that points to the asset's data on the remote server
`width`	If the asset is an image, the width of the image data divided by the scale factor. The scale factor is the number after @ in the filename, or 1 if not present

Asset methods

Method	Description
`downloadAsync`	Downloads the asset data to a local file in the device's cache directory
`fromMetaData`	Returns the asset instance representing an asset given its metadata
`fromModule`	Returns the Asset instance representing an asset given its module or URL
`fromURI`	Returns the Asset instance representing an asset given its URI
`loadAsync`	A helper that wraps Asset.fromModule(module).downloadAsync for convenience

Supported versions

Package Version	Based On	@amazon-devices/react-native-kepler version
2.0.x	8.13.0	2.0.x

Additional resources

For information on additional libraries, see Supported Third-Party Libraries and Services.

Last updated: Sep 30, 2025