Mobile Application

The Maxw AI mobile application provides a native iOS and Android experience using React Native with Expo, enabling students to access the AI assistant on the go.

Technology Stack

The mobile app is built with modern React Native technologies:

React Native 0.81

Native iOS and Android support with New Architecture enabled

Expo 54

Managed workflow with Expo Router for file-based routing

React 19

Latest React features with React Compiler enabled

NativeWind 4

TailwindCSS for React Native with native styling

Core Technologies

React Native Framework

React Native 0.81.4 with New Architecture enabled
React 19.1.0 with experimental React Compiler support
Expo SDK 54 for managed development workflow
Expo Router 6.0 for file-based navigation
TypeScript 5.8.2 for type safety

The mobile app uses React Native’s New Architecture with Fabric renderer and TurboModules for improved performance and modern capabilities.

Expo Router 6.0: File-based routing system
React Navigation 7: Bottom tabs and drawer navigation
- @react-navigation/bottom-tabs for tab-based navigation
- @react-navigation/drawer for side drawer menu
- @react-navigation/native for core navigation primitives

Styling

NativeWind 4.1.23: TailwindCSS for React Native
TailwindCSS 3.4.17: Utility-first CSS framework
Native styling with react-native-reanimated for animations
Gesture support via react-native-gesture-handler

State Management

Server State
Form State

TanStack Query 5.85.5 for server state management:

Automatic caching and synchronization
Background refetching
Optimistic updates
Offline support

Authentication

The mobile app uses Better-Auth 1.3.13 with Expo integration:

@better-auth/expo

Expo-specific Better-Auth adapter for session management

expo-secure-store

Secure token storage using device keychain

expo-web-browser

OAuth flow handling with in-app browser

expo-crypto

Cryptographic operations for secure authentication

Authentication features:

Secure session token storage in device keychain
OAuth provider support with web browser flow
Automatic session refresh and token management
Cross-platform compatibility (iOS/Android)

Expo Modules

The app leverages several Expo modules for native functionality:

Core Modules

expo-constants: Access to system and app constants
expo-linking: Deep linking and URL scheme handling
expo-splash-screen: Splash screen management during app load
expo-status-bar: Status bar customization

UI/UX Modules

expo-navigation-bar: Android navigation bar styling
expo-system-ui: System UI customization (status bar, navigation bar)
@expo/vector-icons: Icon library with multiple icon sets

Security & Storage

expo-secure-store: Encrypted key-value storage
expo-crypto: Cryptographic operations
expo-web-browser: Secure in-app browser for OAuth

Project Structure

The mobile app follows Expo Router file-based routing conventions:

apps/native/
├── app/                     # Expo Router app directory
│   ├── (drawer)/            # Drawer navigation group
│   ├── _layout.tsx          # Root layout with providers
│   ├── modal.tsx            # Modal screen
│   └── +not-found.tsx       # 404 page
├── assets/                  # Static assets
│   └── images/              # App icons and splash screens
├── components/              # React components
├── lib/                     # Shared utilities
├── app.json                 # Expo app configuration
├── babel.config.js          # Babel configuration
├── metro.config.js          # Metro bundler configuration
├── tailwind.config.js       # TailwindCSS configuration
├── global.css               # Global styles
├── package.json             # Dependencies and scripts
└── tsconfig.json            # TypeScript configuration

Expo Configuration

The app is configured in app.json with:

App Metadata

{
  "name": "maxw-ai-v3",
  "slug": "maxw-ai-v3",
  "version": "1.0.0",
  "scheme": "mybettertapp"
}

Platform Support

iOS
Android
Web

iPad support enabled
Automatic interface style (light/dark mode)
Custom URL scheme for deep linking

Adaptive icon with foreground, background, and monochrome variants
Edge-to-edge display enabled
Custom package name: com.anonymous.mybettertapp
Gesture navigation support

Experimental Features

Typed Routes: Type-safe navigation with autocomplete
React Compiler: Automatic optimization of React components
New Architecture: Fabric renderer and TurboModules

Development Workflow

Local Development

Expo Go
Native Builds
Prebuild

bun dev:native           # Start Expo dev server

Scan the QR code with:

iOS: Camera app
Android: Expo Go app

Expo Go provides a quick development experience but has limitations with custom native modules. For full functionality, use development builds.

bun dev:native           # Start dev server
cd apps/native
bun ios                  # Run on iOS simulator
bun android              # Run on Android emulator

Requires:

iOS: Xcode and iOS Simulator
Android: Android Studio and emulator

cd apps/native
bun prebuild             # Generate native projects

Creates ios/ and android/ directories with native code for custom development builds.

Development Scripts

bun dev:native              # Start Expo dev server with cache clear
bun ios                     # Build and run on iOS
bun android                 # Build and run on Android
bun prebuild                # Generate native project files
bun web                     # Start web version

Cross-Platform Support

The mobile app is designed for cross-platform compatibility:

Platform-Specific Code

Use platform-specific extensions when needed:

import Component from './Component';           // Shared code
import Component from './Component.ios';       // iOS-specific
import Component from './Component.android';   // Android-specific

Responsive Design

Safe Area Context: react-native-safe-area-context for notch and navigation bar handling
Responsive Layouts: NativeWind utilities for breakpoint-based styling
Gesture Handling: react-native-gesture-handler for platform-native gestures
Animations: react-native-reanimated for 60fps native animations

Performance Optimizations

New Architecture

Fabric renderer and TurboModules for improved performance

React Compiler

Automatic component memoization and optimization

Native Animations

Reanimated worklets run on the UI thread

Metro Bundling

Optimized JavaScript bundling for React Native

Reanimated Worklets

The app uses react-native-reanimated 4.1.0 for performant animations:

Worklets: JavaScript code running on the UI thread
Shared Values: Reactive state synchronized across threads
Gesture-driven animations: Direct gesture handling without bridge

Environment Variables

Create .env file in apps/native/ based on .env.example:

API_URL=https://your-api-url.com
AUTH_SECRET=your-auth-secret

Never commit .env files to version control. Use .env.example as a template and add actual values locally.

Building for Production

EAS Build (Recommended)

# Install EAS CLI
npm install -g eas-cli

# Configure EAS
eas build:configure

# Build for iOS
eas build --platform ios

# Build for Android
eas build --platform android

# Build for both platforms
eas build --platform all

Local Builds

# iOS (requires macOS)
bun prebuild
cd ios && pod install
xcodebuild -workspace maxw-ai-v3.xcworkspace -scheme maxw-ai-v3

# Android
bun prebuild
cd android && ./gradlew assembleRelease

Deep Linking

The app supports deep linking with the custom scheme mybettertapp://:

import * as Linking from 'expo-linking';

// Parse deep link
const url = Linking.parse('mybettertapp://chat/123');
// { hostname: 'chat', path: '/123', queryParams: {} }

// Open URL
await Linking.openURL('mybettertapp://chat/123');

Use cases:

OAuth callback handling
Push notification navigation
Cross-app communication
Universal links (iOS) and App Links (Android)

Testing

No testing framework is currently configured. Consider adding Jest and React Native Testing Library for unit and integration tests.

Recommended testing setup:

Jest: Unit testing framework
React Native Testing Library: Component testing
Detox: End-to-end testing
Maestro: UI testing alternative

Next Steps

Add Features

Extend the mobile app with additional AI assistant features

Setup EAS

Configure Expo Application Services for cloud builds

Add Testing

Implement unit and integration tests with Jest

App Store

Prepare for iOS App Store and Google Play submission

Get Started

Core Features

AI Agents

Integrations

Platform

​Technology Stack

React Native 0.81

Expo 54

React 19

NativeWind 4

​Core Technologies

​React Native Framework

​Navigation & Routing

​Styling

​State Management

​Authentication

@better-auth/expo

expo-secure-store

expo-web-browser

expo-crypto

​Expo Modules

​Core Modules

​UI/UX Modules

​Security & Storage

​Project Structure

​Expo Configuration

​App Metadata

​Platform Support

​Experimental Features

​Development Workflow

​Local Development

​Development Scripts

​Cross-Platform Support

​Platform-Specific Code

​Responsive Design

​Performance Optimizations

New Architecture

React Compiler

Native Animations

Metro Bundling

​Reanimated Worklets

​Environment Variables

​Building for Production

​EAS Build (Recommended)

​Local Builds

​Deep Linking

​Testing

​Next Steps

Add Features

Setup EAS

Add Testing

App Store

Build docs developers (and LLMs) love

Technology Stack

Core Technologies

React Native Framework

Navigation & Routing

Styling

State Management

Authentication

Expo Modules

Core Modules

UI/UX Modules

Security & Storage

Project Structure

Expo Configuration

App Metadata

Platform Support

Experimental Features

Development Workflow

Local Development

Development Scripts

Cross-Platform Support

Platform-Specific Code

Responsive Design

Performance Optimizations

Reanimated Worklets

Environment Variables

Building for Production

EAS Build (Recommended)

Local Builds

Deep Linking

Testing

Next Steps