expo-asset
@amazon-devices/expo-asset
provides an Expo universal module to download assets and pass them into other APIs.
Installation
- Add the JavaScript library dependency in the
package.json
file.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.
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.
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