Skip to content

6.3 Assets and Resources

Jump to bottom
ankrypht edited this page Jul 16, 2025 · 1 revision

Page: Assets and Resources

Assets and Resources

Relevant source files

The following files were used as context for generating this wiki page:

This document covers the static assets and visual resources used in the AudioScape mobile application, including app icons, splash screens, screenshots, and their integration with the build system.

For information about project configuration and dependencies, see Project Configuration. For details about the build pipeline and asset processing, see Build System and Tooling.

Overview

AudioScape uses Expo's asset management system to handle static resources. The app includes visual assets for branding, user interface elements, and app store distribution. All assets are organized in the assets/ directory and processed through the Metro bundler during the build process.

Asset Directory Structure

The project follows a structured approach to organizing static assets:

graph TD
    root["AudioScape Root Directory"]
    assets["assets/"]
    images["assets/images/"]
    
    splash["splash.png"]
    screenshot["screenshot-1.png"]
    
    root --> assets
    assets --> images
    images --> splash
    images --> screenshot
Loading

Asset Organization Structure

Sources: assets/images/splash.png:1, assets/images/screenshot-1.png:1

App Icons and Splash Screens

The application includes essential visual assets for mobile app presentation:

Splash Screen

  • File: assets/images/splash.png
  • Purpose: Displayed during app initialization
  • Dimensions: Configured for multiple screen densities
  • Integration: Referenced in Expo configuration for automatic platform generation

App Screenshots

  • File: assets/images/screenshot-1.png
  • Purpose: Promotional material for app stores and documentation
  • Content: Demonstrates the music player interface and functionality
graph LR
    expo_config["app.config.js"]
    splash_asset["assets/images/splash.png"]
    platform_splash_ios["iOS Splash Screens"]
    platform_splash_android["Android Splash Screens"]
    
    expo_config --> splash_asset
    splash_asset --> platform_splash_ios
    splash_asset --> platform_splash_android
    
    expo_config -.->|"splash.image configuration"| splash_asset
Loading

Splash Screen Asset Processing Pipeline

Sources: assets/images/splash.png:1, assets/images/screenshot-1.png:1

Asset Loading and Integration

AudioScape leverages Expo's asset system for efficient resource management:

Metro Bundler Integration

  • Assets are processed during the build pipeline
  • Automatic optimization for different screen densities
  • Platform-specific asset generation (iOS/Android)

Build-Time Processing

  • Image optimization and compression
  • Multiple resolution generation
  • Platform-specific format conversion
graph TD
    source_assets["Source Assets<br/>assets/images/"]
    metro_bundler["Metro Bundler"]
    expo_cli["Expo CLI"]
    
    ios_bundle["iOS App Bundle"]
    android_bundle["Android APK/AAB"]
    
    build_config["app.config.js<br/>Asset Configuration"]
    
    source_assets --> metro_bundler
    build_config --> metro_bundler
    metro_bundler --> expo_cli
    
    expo_cli --> ios_bundle
    expo_cli --> android_bundle
    
    ios_bundle -.->|"Contains optimized assets"| source_assets
    android_bundle -.->|"Contains optimized assets"| source_assets
Loading

Asset Build and Distribution Flow

Platform-Specific Asset Generation

The build system automatically generates platform-appropriate assets:

Asset Type iOS Generation Android Generation
Splash Screen Multiple @1x, @2x, @3x variants Various density buckets (mdpi, hdpi, xhdpi, etc.)
App Icons AppIcon.appiconset with all required sizes Adaptive icon with background/foreground layers
Screenshots Retina display optimized Multiple screen density support

Configuration Integration

Assets are referenced in the Expo configuration system through:

  • Splash Configuration: Defines splash screen behavior and asset paths
  • Icon Configuration: Specifies app icon sources and generation rules
  • Asset Optimization: Controls compression and quality settings
graph LR
    config_splash["app.config.js<br/>splash.image"]
    config_icon["app.config.js<br/>icon"]
    
    asset_splash["assets/images/splash.png"]
    asset_icon["App Icon Asset<br/>(if present)"]
    
    expo_constants["expo-constants"]
    app_runtime["App Runtime"]
    
    config_splash --> asset_splash
    config_icon --> asset_icon
    
    asset_splash --> expo_constants
    asset_icon --> expo_constants
    expo_constants --> app_runtime
Loading

Asset Configuration and Runtime Access

Development Workflow

During development, assets are:

  1. Hot Reloaded: Changes to assets trigger automatic app updates
  2. Cached: Metro bundler caches processed assets for faster builds
  3. Validated: Build system checks for missing or invalid asset references
  4. Optimized: Automatic compression and format conversion applied

Asset Referencing

Assets can be referenced in the codebase using:

  • require() statements for bundled assets
  • expo-asset library for advanced asset management
  • Expo Constants for configuration-defined assets

Sources: assets/images/splash.png:1, assets/images/screenshot-1.png:1

Clone this wiki locally