Skip to content

3 User Interface System

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

Page: User Interface System

User Interface System

Relevant source files

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

This document covers the user interface architecture for AudioScape, including navigation patterns, screen hierarchy, and component organization. It focuses on the structural aspects of the UI system and how different interface components are organized and connected.

For detailed information about specific UI components like the music player interface, see Player Interface. For the modal system specifics, see Modal System. For content display components, see Content Display Components.

Navigation Architecture

AudioScape uses Expo Router for file-based routing with a nested navigation structure. The root layout establishes global providers and defines the main navigation stack, while tab navigation provides the primary user interface structure.

Root Layout Structure

The root layout in app/_layout.tsx sets up the application's foundation with global context providers and defines the main navigation stack:

graph TD
    RootLayout["RootLayout"]
    Provider["Provider (Redux)"]
    MusicPlayerProvider["MusicPlayerProvider"]
    LyricsProvider["LyricsProvider"]
    SafeAreaProvider["SafeAreaProvider"]
    GestureHandlerRootView["GestureHandlerRootView"]
    ThemeProvider["ThemeProvider"]
    Stack["Stack (expo-router)"]
    
    TabsScreen["(tabs) - Main Tab Navigation"]
    PlayerScreen["player - Music Player Modal"]
    ModalsGroup["(modals) - Various Modal Screens"]
    
    RootLayout --> Provider
    Provider --> MusicPlayerProvider
    MusicPlayerProvider --> LyricsProvider
    LyricsProvider --> SafeAreaProvider
    SafeAreaProvider --> GestureHandlerRootView
    GestureHandlerRootView --> ThemeProvider
    ThemeProvider --> Stack
    
    Stack --> TabsScreen
    Stack --> PlayerScreen
    Stack --> ModalsGroup
Loading

The navigation stack defines several key screen groups:

  • Main tabs: The primary navigation interface with four tabs
  • Player modal: Full-screen music player interface
  • Modal screens: Various overlay screens for specific actions

Sources: app/_layout.tsx:119-171

File-Based Routing Structure

The navigation follows Expo Router's file-based routing conventions:

Route Pattern Purpose Presentation
(tabs) Main tab navigation container Standard
player Full-screen music player Transparent modal
(modals)/addToPlaylist Add songs to playlist Transparent modal
(modals)/deletePlaylist Delete playlist confirmation Transparent modal
(modals)/queue Playback queue management Transparent modal
(modals)/lyrics Synchronized lyrics display Transparent modal
(modals)/menu Context menu actions Transparent modal

Sources: app/_layout.tsx:119-171

Tab Navigation System

The tab navigation system provides the primary interface structure with four main tabs and an integrated floating player.

Tab Configuration

The TabLayoutContent component in app/(tabs)/_layout.tsx configures the tab navigation:

graph TB
    TabLayoutContent["TabLayoutContent"]
    TabsComponent["Tabs (expo-router)"]
    FloatingPlayer["FloatingPlayer"]
    
    HomeTab["home - Home Tab"]
    FavoritesTab["favorites - Favorites Tab"]
    PlaylistsTab["playlists - Playlists Tab"]
    DownloadsTab["downloads - Downloads Tab"]
    IndexTab["index - Hidden Redirect Tab"]
    
    TabBarBackground["LinearGradient TabBar Background"]
    TabBarIcon["TabBarIcon Components"]
    
    TabLayoutContent --> TabsComponent
    TabLayoutContent --> FloatingPlayer
    
    TabsComponent --> HomeTab
    TabsComponent --> FavoritesTab
    TabsComponent --> PlaylistsTab
    TabsComponent --> DownloadsTab
    TabsComponent --> IndexTab
    
    TabsComponent --> TabBarBackground
    TabsComponent --> TabBarIcon
Loading

Tab Specifications

Each tab is configured with specific icons and behaviors:

Tab Screen Name Focused Icon Unfocused Icon Purpose
Home home home home-outline Main content discovery
Favorites favorites heart heart-outline Liked songs management
Playlists playlists list list-outline Playlist management
Downloads downloads download download-outline Downloaded content

The tab bar uses a gradient background overlay and is positioned absolutely at the bottom with custom styling that removes default borders and shadows.

Sources: app/(tabs)/_layout.tsx:66-120

Floating Player Integration

The FloatingPlayer component is positioned above the tab bar and provides persistent access to playback controls:

  • Position: Absolute positioning above tab bar
  • Spacing: 8px margin from left/right edges
  • Bottom offset: bottom + 60 pixels from safe area bottom
  • Integration: Rendered outside the Tabs component but within the same container

Sources: app/(tabs)/_layout.tsx:122-129

Component Hierarchy

The UI system follows a hierarchical structure with clear separation of concerns between navigation, content display, and interactive components.

Provider Hierarchy

The application wraps components in multiple context providers to manage global state:

graph TD
    ReduxProvider["Provider (Redux Store)"]
    MusicProvider["MusicPlayerProvider"]
    LyricsProvider["LyricsProvider"]
    SafeAreaProvider["SafeAreaProvider"]
    GestureHandler["GestureHandlerRootView"]
    Navigation["Navigation Stack"]
    
    ReduxProvider --> MusicProvider
    MusicProvider --> LyricsProvider
    LyricsProvider --> SafeAreaProvider
    SafeAreaProvider --> GestureHandler
    GestureHandler --> Navigation
Loading

This hierarchy ensures that:

  • Redux state is available throughout the application
  • Music player context manages playback state globally
  • Lyrics context handles synchronized lyrics display
  • Safe area context provides device-specific layout information
  • Gesture handling is enabled for interactive components

Sources: app/_layout.tsx:106-116

Screen Organization

The UI screens are organized into distinct categories:

Category Location Purpose
Tab Screens app/(tabs)/ Primary navigation screens
Modal Screens app/(modals)/ Overlay screens for specific actions
Player Screen app/player/ Full-screen music player interface
Redirect Screens app/(tabs)/index.tsx Navigation redirects

The index.tsx file in the tabs directory serves as a simple redirect to ensure users always land on the home tab when entering the tab navigation flow.

Sources: app/(tabs)/index.tsx:9-17

Styling and Theming

The UI system uses consistent styling patterns and integrates with React Navigation's theming system.

Theme Integration

The application uses React Navigation's DarkTheme as the base theme, ensuring consistent dark mode appearance across navigation elements.

Tab Bar Styling

The tab bar implements custom styling with:

  • Background: Linear gradient from transparent to black
  • Position: Absolute positioning at bottom
  • Border: Removed top border and elevation for seamless appearance
  • Typography: Scaled font sizes using react-native-size-matters
  • Colors: Tint color for active state, muted gray for inactive

Responsive Design

The UI adapts to different screen sizes and safe areas:

  • Safe area insets are used for proper spacing around device-specific UI elements
  • Font sizes are scaled using moderateScale for consistent appearance across devices
  • The floating player adjusts its position based on safe area bottom insets

Sources: app/(tabs)/_layout.tsx:24-63

Global State Integration

The UI system integrates with multiple global state management systems to coordinate user interface updates with application state.

Context Providers

Three main context providers manage different aspects of the UI state:

  1. Redux Provider: Manages library state including favorites, playlists, and downloads
  2. MusicPlayerProvider: Handles playback state and player controls
  3. LyricsProvider: Manages synchronized lyrics display and timing

Initialization Sequence

The root layout coordinates the initialization of various systems:

  1. Font loading (useFonts hook)
  2. TrackPlayer setup (useSetupTrackPlayer hook)
  3. Notification channel setup
  4. Redux library initialization
  5. System UI configuration
  6. Splash screen dismissal

This sequence ensures all UI dependencies are ready before the interface becomes interactive.

Sources: app/_layout.tsx:52-98

Clone this wiki locally