Skip to main content
Mapagam

Managing Assets and Resources

1. Importing Images

Method Description Usage Notes
require() Static image import const img = require('./assets/image.png'); Image is bundled with app
import Static image import import img from './assets/image.png'; Image is bundled with app
Asset.loadAsync() Dynamic image loading const asset = Asset.loadAsync('./assets/image.png'); Use for runtime assets

Example: Importing Static Image

import React from 'react';
import { Image } from 'expo-image';

const MyComponent = () => {
  return (
    <Image
      source={require('./assets/image.png')}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyComponent;

Example: Using Asset.loadAsync

import React, { useState, useEffect } from 'react';
import { Asset } from 'expo-asset';
import { Image } from 'expo-image';

const MyComponent = () => {
  const [asset, setAsset] = useState(null);

  useEffect(() => {
    Asset.loadAsync('./assets/image.png').then(setAsset);
  }, []);

  if (!asset) return <div>Loading...</div>;

  return (
    <Image
      source={asset}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyComponent;
Note: For best performance, use require() for static images and Asset.loadAsync() for runtime-loaded assets.

2. Using Local Images

Property Description Usage
require() Imports local image assets at build time const image = require('./assets/image.png');
import Imports image as module import image from './assets/image.png';
assetId Unique identifier for assets const asset = Asset.fromModule(image);

Example: Loading Local Image

import React from 'react';
import { Image } from 'expo-image';

const MyImage = () => {
  return <Image source={require('./assets/my-image.png')} style={{ width: 200, height: 200 }} />;
};
Note: Local images must be placed in the project directory and imported using require() or import.
Warning: Do not use require() with dynamic paths or variables.

3. Loading Remote Images

Property Description Example
source URL of the remote image to load source={{ uri: 'https://example.com/image.jpg' }}
cache Controls caching behavior (default: 'default') cache: 'force-cache'

Example: Loading a Remote Image

import { Image } from 'expo-image';

<Image
  source={{
    uri: 'https://picsum.photos/200/300',
  }}
  style={{ width: 200, height: 300 }}
  cache="force-cache"
/>
Note: Remote images are automatically cached by Expo Image to improve performance.
Warning: Ensure the image URL is accessible and does not require authentication.

4. Loading Custom Fonts

Property Description Values
fontFamily Specifies the font family to use 'Roboto', 'System Font'
fontFile Path to the custom font file './assets/fonts/Roboto-Regular.ttf'

Example: Loading Custom Font

{'import { useFonts } from "expo-font";\nimport { StyleSheet } from "react-native";\n\nconst App = () => {\n  const [fontsLoaded] = useFonts({\n    "Roboto": require("./assets/fonts/Roboto-Regular.ttf"),\n  });\n\n  if (!fontsLoaded) {\n    return <View />;\n  }\n\n  return (\n    <View style={styles.container}>\n      <Text style={styles.text}>Custom Font Example</Text>\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: "center",\n    alignItems: "center",\n  },\n  text: {\n    fontFamily: "Roboto",\n    fontSize: 20,\n  },\n});\n'}
Note: Ensure font files are added to the project's assets directory and properly referenced in the code.

5. Using Font.loadAsync() Method

Property Description Usage
fontFamily Name of the font family to be loaded fontFamily: 'MyCustomFont'
fontUri URI to the font file (local or remote) fontUri: require('./assets/fonts/MyFont.ttf')

Example: Loading a Custom Font

import { Font } from 'expo-font';\n\nasync function loadCustomFont() {\n  await Font.loadAsync({\n    'my-custom-font': require('./assets/fonts/MyFont.ttf')\n  });\n}
Note: The font file must be included in your project's assets and properly referenced using require().
Warning: Font files must be in supported formats (e.g., .ttf, .otf). Unsupported formats may cause runtime errors.

6. Configuring App Icon

Property Values Description
icon string Path to the app icon image file (e.g., ./assets/icon.png). Must be a PNG or JPG file.
backgroundColor string Background color for the app icon in hex format (e.g., #ffffff). Used when the icon is displayed on a colored background.

Example: Setting App Icon in app.json

{
  "expo": {
    "icon": "./assets/icon.png",
    "backgroundColor": "#ffffff"
  }
}
Note: The icon should be at least 1024x1024 pixels for optimal rendering on all devices.

7. Creating Adaptive Icons

Adaptive icons in Expo allow you to define different icon shapes for different platforms and devices. These icons are particularly useful on Android, where they can adapt to the device's theme.

Property Description Values
adaptiveIcon Configuration for adaptive icon support object

Example: Configuring Adaptive Icons

{
  "expo": {
    "icon": "./assets/icon.png",
    "adaptiveIcon": {
      "foregroundImage": "./assets/adaptive-icon-foreground.png",
      "backgroundImage": "./assets/adaptive-icon-background.png"
    }
  }
}
Note: The foregroundImage and backgroundImage paths must point to valid image files. These images should be in PNG format with transparent backgrounds for the foreground.
Warning: Adaptive icons are only supported on Android devices running Android 8.0 (API level 26) or higher.

8. Configuring Splash Screen

Property Description Default Notes
splash.image Path to the splash screen image assets/splash.png Supported formats: PNG, JPG, WebP
splash.resizeMode How the image should be resized contain Options: cover, contain, stretch
splash.backgroundColor Background color behind the image #ffffff Hex, RGB, or named color
splash.showWhenCached Whether to show splash screen when cached false Set to true for better UX

Example: splash configuration in app.json

{
  "expo": {
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    }
  }
}
Note: The splash screen image should be at least 1024x1024 pixels for optimal rendering on all devices.

9. Using Asset.loadAsync() Method

The Asset.loadAsync() method is used to preload assets before they are needed, which can improve performance and prevent flickering or delays when displaying images or other resources.

Parameter Type Description
assets AssetSource[] An array of asset sources to load. Each source can be a URI string or an object with uri and headers properties.

Example: Loading Assets with Asset.loadAsync()

import { Asset } from 'expo-asset';

const loadAssets = async () => {
  const assets = [
    Asset.fromModule(require('../assets/images/background.png')),
    Asset.fromURI('https://example.com/image.jpg'),
  ];

  await Asset.loadAsync(assets);
  console.log('Assets loaded successfully');
};

loadAssets();
Note: The Asset.loadAsync() method returns a promise that resolves when all assets have been loaded. It's particularly useful for loading images or other resources before rendering components that depend on them.

10. Optimizing Image Loading

Property Description Usage
resizeMode How the image should be resized to fit its container cover, contain, stretch, repeat, center
blurRadius Applies a blur effect to the image (iOS only) 5, 10
cache Controls caching behavior for image loading cache-control, no-cache

Example: Using resize mode

<Image source={require("./assets/image.png")} resizeMode="cover" style={{ width: 200, height: 200 }} />

Example: Applying blur effect

<Image source={require("./assets/image.png")} blurRadius={5} />
Note: On Android, resizeMode is not supported for local images.

Image Loading Best Practices

  • Use resizeMode to control how images fit their containers
  • Preload images when possible using Image.prefetch
  • Use appropriate image formats (e.g., WebP for better compression)

11. Working with SVG

Property Description Usage
import Import SVG as React component import { ReactComponent as MyIcon } from './icon.svg';
require Load SVG as a resource const svg = require('./icon.svg');

Example: Importing SVG as Component

import React from 'react';
import { ReactComponent as Logo } from './logo.svg';

const App = () => {
  return <Logo width="100" height="100" />;
};

Example: Using SVG as Resource

import React from 'react';
import { Image } from 'react-native';

const App = () => {
  return <Image source={require('./icon.svg')} style={{ width: 50, height: 50 }} />;
};
Note: SVGs imported as React components are optimized for rendering and support styling via props.
Warning: SVGs loaded as resources may not scale well on high-DPI displays.

12. Bundling Static Assets

Expo handles static assets by bundling them with your app during the build process. These assets are included in the final application bundle and can be accessed at runtime.

Asset Type Description Usage
Image Static image files (PNG, JPG, GIF, SVG) Import directly in JavaScript/TypeScript
Font Custom font files (TTF, OTF) Import and register using Font.loadAsync
Audio Sound files (MP3, WAV, AAC) Import and play using Expo AV
Video Video files (MP4, MOV) Import and play using Expo AV
JSON Data files (JSON) Import directly in JavaScript/TypeScript

Example: Importing an Image

<div class="codeBlock"><pre><code>import { Image } from 'expo-image';\nimport asset from './assets/image.png';\n\n<Image source={asset} />\n</code></pre></div>

Example: Using a Custom Font

<div class="codeBlock"><pre><code>import { Font } from 'expo-font';\n\nasync function loadFonts() {\n  await Font.loadAsync({\n    'custom-font': require('./assets/fonts/custom-font.ttf'),\n  });\n}\n</code></pre></div>
Note: Assets must be imported at build time. Runtime loading of assets is not supported.
Warning: Large asset files can increase app size and affect performance. Consider lazy loading or using external services for large media.

Was this article helpful?

Related Cheat Sheets