expo-asset
provides an interface to Expo's asset system. An asset is any file that lives alongside the source code of your app that the app needs at runtime. Examples include images, fonts, and sounds. Expo's asset system integrates with React Native's, so that you can refer to files with require('path/to/file')
. This is how you refer to static image files in React Native for use in an Image
component, for example. Check out React Native's documentation on static image resources for more information. This method of referring to static image resources works out of the box with Expo.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
→
expo install expo-asset
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import { Asset } from 'expo-asset';
const [assets, error] = useAssets([...]);
Asset.loadAsync
, this hook returns a list of asset instances.Note, the assets are not "reloaded" when you dynamically change the asset list.
undefined
.function App() { const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]); if (!assets) { return <AppLoading />; } return ( <View> <Text>Loaded {assets.length} assets!</Text> <Image source={require('path/to/asset.jpg')} /> <Image source={require('path/to/other.png')} /> </View> ); }
Asset
class represents an asset in your app. It gives metadata about the asset (such as its name and type) and provides facilities to load the asset data.name
@
onward in the filename (used to specify scale factor for images).type
hash
uri
localUri
downloadAsync()
), the file://
URI pointing to the local file on the device that contains the asset data.width
@
in the filename, or 1
if not present.height
@
in the filename, or 1
if not present.downloadAsync()
localUri
field of this asset points to a local file containing the asset data. The asset is only downloaded if an up-to-date local file for the asset isn't already present due to an earlier download. The downloaded Asset
will be returned when the promise is resolved.Asset.fromModule(module).downloadAsync
for convenience.require('path/to/file')
or external network URLs. Can also be just one module or URL without an Array.Asset
s when the asset(s) has been saved to disk.const [{ localUri }] = await Asset.loadAsync(require('./assets/snack-icon.png'));
Asset
instance representing an asset given its module or URLrequire('path/to/file')
for the asset or external network URLAsset
instance for the assetconst imageURI = Asset.fromModule(require('./assets/snack-icon.png')).uri;
imageURI
gives the remote URI that the contents of assets/snack-icon.png
can be read from. The path is resolved relative to the source file that this code is evaluated in.