as

Settings
Sign out
Notifications
Alexa
Amazon Appstore
AWS
Documentation
Support
Contact Us
My Cases
Get Started
Design and Develop
Publish
Reference
Support

expo-asset

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

Installation

  1. 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",
         ...
    }
    
  2. 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