Skip to main content
New Expensify is built with React Native, providing a consistent experience across all platforms with platform-specific optimizations.

​
Supported Platforms

iOS

iPhone and iPad with native iOS features

Android

Android phones and tablets with native features

Web

Works in any modern web browser

Desktop

Native desktop applications for macOS, Windows, and Linux

​
Technology Stack

New Expensify uses a modern cross-platform architecture:
  • Framework: React Native with React Native Web
  • Language: TypeScript
  • State Management: React Native Onyx (custom offline-first store)
  • Navigation: React Navigation
  • JavaScript Engine: Hermes (mobile)

​
Key Features Across Platforms

​
Offline-First Architecture

All platforms support full offline functionality:
  • Create and edit expenses without internet
  • Optimistic updates with automatic sync
  • Queue-based request handling
  • Automatic conflict resolution
See Offline Mode for details on how offline functionality works.

​
Real-Time Sync

Changes sync instantly across all devices:
  • WebSocket-based real-time updates via Pusher
  • Optimistic UI updates
  • Automatic retry on network reconnection
  • Cross-device state synchronization

​
Receipt Management

Powerful receipt handling on all platforms:
  • Mobile: Camera capture with SmartScan OCR
  • Desktop/Web: File upload and drag-and-drop
  • Automatic data extraction
  • Multi-receipt support
Learn more about Receipt Scanning on mobile devices.

​
Push Notifications

iOS

APNs integration via Airship
  • Rich notifications with avatars
  • Communication notifications (iOS 15+)
  • Silent push for data sync

Android

FCM integration via Airship
  • Rich notifications with images
  • Background sync notifications
  • Custom notification sounds
See Push Notifications for configuration details.

​
Platform-Specific Features

​
Mobile

FeatureiOSAndroid
Camera Receipt Scanning✓✓
Biometric AuthenticationFace ID, Touch IDFingerprint, Face
Share Extensions✓✓
Live Activities✓ (iOS 16.1+)-
Widgets✓✓
Offline Mode✓✓

​
Desktop

FeaturemacOSWindowsLinux
Native Menus✓✓✓
Keyboard Shortcuts✓✓✓
System Tray✓✓✓
Auto-Update✓✓✓
File System Access✓✓✓

​
HybridApp Architecture

Important: The mobile apps use a HybridApp architecture that combines NewDot (new Expensify) and OldDot (Expensify Classic).
Mobile applications include:
  • NewDot: Modern React Native experience
  • OldDot: Legacy features not yet migrated
  • Seamless Navigation: Automatic transitions between versions
  • Shared Authentication: Single sign-on across both
import {isHybridApp} from '@src/CONFIG';

if (isHybridApp) {
  // Mobile-specific HybridApp logic
  // Airship notifications shared between OldDot and NewDot
}

​
Build System

​
Rock Build Management

New Expensify uses Rock for efficient native builds:
  • Remote Builds: Downloads pre-built artifacts from S3
  • Local Fallback: Builds locally when needed
  • Fingerprinting: Determines when rebuild is necessary
  • Fast Setup: Reduces development environment complexity
# iOS with Rock
npm run ios

# Android with Rock
npm run android

# Force rebuild by changing package.json
npm install
Rock only rebuilds native code when necessary, speeding up development significantly.

​
Getting Started

Choose your platform to get started:

iOS Setup

Set up iOS development environment

Android Setup

Set up Android development environment

Web Development

Start web development

Desktop Apps

Learn about desktop applications

​
Cross-Platform Development

​
Platform-Specific Code

Use platform extensions for platform-specific implementations: 
// Component.native.ts - Used on iOS and Android
// Component.ios.ts - iOS only
// Component.android.ts - Android only
// Component.ts - Web and desktop fallback

​
Platform Detection

import {Platform} from 'react-native';

if (Platform.OS === 'ios') {
  // iOS-specific code
} else if (Platform.OS === 'android') {
  // Android-specific code
} else {
  // Web/desktop code
}

​
Responsive Design

import {useWindowDimensions} from 'react-native';
import useResponsiveLayout from '@hooks/useResponsiveLayout';

function MyComponent() {
  const {isSmallScreenWidth} = useResponsiveLayout();
  
  return (
    <View style={isSmallScreenWidth ? styles.mobile : styles.desktop}>
      {/* Responsive content */}
    </View>
  );
}

​
Performance Considerations

​
Mobile Performance

  • Hermes JavaScript Engine: Optimized bytecode execution
  • FlashList: Performant list rendering
  • Image Optimization: Automatic thumbnail generation
  • Lazy Loading: Code splitting for faster startup

​
Web Performance

  • Code Splitting: Webpack-based chunking
  • Service Workers: Offline caching
  • Bundle Analysis: Size optimization
  • Tree Shaking: Remove unused code

​
Testing Across Platforms

# Unit tests (cross-platform)
npm run test

# Type checking
npm run typecheck

# Linting
npm run lint

# iOS simulator
npm run ios

# Android emulator
npm run android

# Web browser
npm run web

​
Next Steps

1

Choose Your Platform

Review the setup guide for your target platform
2

Configure Development Environment

Install required tools and dependencies
3

Build and Run

Start the app on your platform
4

Learn Platform Features

Explore platform-specific capabilities

Build docs developers (and LLMs) love

Get started for freeTalk to us