Mobile Application Architecture
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The LiveCanvas mobile application is a cross-platform solution built using React Native and the Expo framework. It serves as the primary client interface for the LiveCanvas platform, facilitating real-time interactions, content consumption, and account management. The architecture is designed to integrate seamlessly with a modular Elixir/Phoenix backend via a Relay-first GraphQL API and WebSockets for real-time state synchronization.
Sources: mobile/package.json, ARCHITECTURE.md:19-25, ARCHITECTURE.md:46-50
Core Framework and Infrastructure
The application leverages Expo (v55) and React Native (v0.83). Routing is managed by expo-router, which provides a file-based routing system supporting both standard tab-based navigation and modal overlays. The application is configured for a portrait orientation and supports both iOS (including tablets) and Android platforms.
Sources: mobile/package.json:11-16, mobile/app.json:6-24
Component Architecture and UI Patterns
The UI is constructed using a themed component library that relies on shared tokens for spacing, typography, and border radii. Key UI primitives include:
- AppCard: A themed container providing consistent surface colors and border styles.
- AppHeader: A standard header component with support for eyebrow labels, titles, and subtitles.
- ScreenState: A state-driven component used to handle global UI transitions such as "loading", "error", and "empty" states.
Sources: mobile/src/components/AppCard.tsx:14-38, mobile/src/components/AppHeader.tsx:14-35, mobile/src/components/ScreenState.tsx:16-70
Design Tokens
The application uses a centralized token system to ensure visual consistency across screens.
| Token Type | Scale / Values |
|---|---|
| Spacing | xs (4), sm (8), md (16), lg (24), xl (32) |
| Border Radius | sm (8), md (14), lg (24), pill (999) |
| Touch Target | Min size: 44px (Apple HIG compliant) |
Sources: mobile/src/theme/tokens.ts:4-46
Routing and Navigation
The application uses expo-router to define a structured navigation hierarchy. The folder structure indicates a separation between authenticated and public/modal spaces:
- /(app): Contains the durable authenticated experience, including
home.tsxandprofile.tsx. - /(modals): Contains transient entry points such as the
live-session.tsxmodal.
The diagram shows the file-based routing structure and navigation flow between the main authenticated screens and modals.
Sources: mobile/app/(app)/home.tsx:21-30, mobile/app/(modals)/live-session.tsx:10-23
Data Architecture and API Integration
The application interacts with the backend primarily through a GraphQL API that follows Relay conventions (nodes, global IDs, and connections).
GraphQL Interaction Model
The schema supports complex entities including Users, Posts, LiveSessions, and MediaAssets. It utilizes Node interfaces for global object refetching and supports cursor-based pagination for feeds.
The class diagram illustrates the core relationships between entities as defined in the GraphQL schema.
Sources: mobile/schema.graphql:1-35, mobile/schema.graphql:465-495, ARCHITECTURE.md:143-150
Mutation Capabilities
The mobile application performs state changes through a comprehensive list of mutations, categorized by domain:
| Domain | Key Mutations |
|---|---|
| Authentication | signUp, logIn, refreshAuthTokens, beginAuthChallenge |
| Social | followUser, acceptFollowRequest, blockUser, muteUser |
| Content | createPost, requestMediaUpload, updatePost, deletePost |
| Live | startLiveSession, goLiveSession, joinLiveSession, endLiveSession |
Sources: mobile/schema.graphql:37-120
Real-time Synchronization
Real-time features such as live chat, presence, and session status updates are handled via WebSockets (Phoenix Channels). The backend maintains ephemeral state in OTP processes and Presence, which are broadcast to the mobile client to ensure immediate UI updates during live sessions.
Live Session Flow
The application follows a specific lifecycle when initiating or joining live media:
The sequence diagram details the transition from initial session request to an active live state.
Sources: ARCHITECTURE.md:152-162, mobile/schema.graphql:73-81
Conclusion
The Mobile Application Architecture for LiveCanvas is a modular, theme-driven React Native implementation. It relies on a strictly typed GraphQL schema for data fetching and mutation, while utilizing Phoenix Channels for high-concurrency real-time features. By separating UI tokens from component logic and adhering to a structured navigation system, the app remains maintainable and prepared for future feature expansions like billing and location-based services.
Sources: ARCHITECTURE.md:237-250, mobile/src/theme/tokens.ts