Skip to main content
The mobile application is built with React Native and Expo SDK 54, providing native experiences on both iOS and Android platforms.

​
Prerequisites

Before building the mobile app, ensure you have:
  • Node.js 18+
  • npm or yarn
  • Expo CLI (npm install -g expo-cli)
  • Platform-specific tools:
    • iOS: macOS with Xcode 14+
    • Android: Android Studio with SDK 33+

​
Project Configuration

The app configuration is defined in raffi-mobile/app.json: 
{
  "expo": {
    "name": "Raffi",
    "slug": "raffi-mobile",
    "version": "1.0.0",
    "orientation": "default",
    "newArchEnabled": true,
    "experiments": {
      "typedRoutes": true,
      "reactCompiler": true
    }
  }
}

​
App Identifiers

  • iOS Bundle ID: al.kaleid.mobile
  • Android Package: al.kaleid.raffimobile
  • URL Scheme: raffi://

​
Development Build

1

Navigate to mobile directory

cd raffi-mobile
2

Install dependencies

npm install
3

Start Expo development server

npm start
This launches the Expo Metro bundler. You can then:
  • Scan the QR code with Expo Go app
  • Press i for iOS simulator
  • Press a for Android emulator
  • Press w for web browser
4

Run on specific platform

npm run ios
These commands compile and run the native apps directly.

​
Production Build

​
Building with Expo Classic Build

Expo provides a cloud build service for creating production apps:
1

Build for iOS

npx expo build:ios
Build Options:
  • Archive (.ipa) for App Store or TestFlight
  • Simulator build for testing
Requirements:
  • Apple Developer account
  • Distribution certificate
  • Provisioning profile
2

Build for Android

npx expo build:android
Build Options:
  • APK for direct installation
  • AAB (Android App Bundle) for Google Play Store
Requirements:
  • Android keystore (auto-generated by Expo or custom)

​
Building with EAS Build

For more control and faster builds, use EAS (Expo Application Services):
1

Install EAS CLI

npm install -g eas-cli
2

Login to Expo account

eas login
3

Configure EAS

eas build:configure
This creates an eas.json configuration file.
4

Build for platforms

eas build --platform all

​
iOS Build Configuration

The iOS-specific configuration in app.json: 
"ios": {
  "supportsTablet": true,
  "bundleIdentifier": "al.kaleid.mobile",
  "requireFullScreen": false,
  "infoPlist": {
    "NSAppTransportSecurity": {
      "NSAllowsArbitraryLoads": true
    }
  }
}

​
iOS Features

  • iPad Support: Full tablet optimization
  • Picture-in-Picture: Native PiP for video playback
  • Network Security: Allows HTTP connections for local streaming servers
  • Screen Orientation: Adaptive orientation based on content

​
Building for iOS Simulator

For testing without a physical device: 
# Build and run on simulator
npx expo run:ios

# Or specify simulator
npx expo run:ios --simulator="iPhone 15 Pro"

​
Building for iOS Device

For TestFlight or App Store distribution: 
# Production build with EAS
eas build --platform ios --profile production

# Development build for testing
eas build --platform ios --profile development

​
Android Build Configuration

The Android-specific configuration in app.json: 
"android": {
  "package": "al.kaleid.raffimobile",
  "adaptiveIcon": {
    "backgroundColor": "#090909",
    "foregroundImage": "./assets/images/android-icon-foreground.png",
    "backgroundImage": "./assets/images/android-icon-background.png",
    "monochromeImage": "./assets/images/android-icon-monochrome.png"
  },
  "edgeToEdgeEnabled": true,
  "predictiveBackGestureEnabled": false
}

​
Android Features

  • Adaptive Icons: Material You themed app icons
  • Edge-to-Edge Display: Immersive full-screen experience
  • Material Design 3: Modern Android UI patterns

​
Building APK (Direct Install)

# Build APK with Expo classic
npx expo build:android -t apk

# Build APK with EAS
eas build --platform android --profile preview
Output: raffi-mobile-{version}.apk

​
Building AAB (Google Play)

# Build AAB with Expo classic
npx expo build:android -t app-bundle

# Build AAB with EAS
eas build --platform android --profile production
Output: raffi-mobile-{version}.aab

​
Building for Android Emulator

# Build and run on emulator
npx expo run:android

# Or specify device
npx expo run:android --device

​
Native Modules

The mobile app includes a custom native module for torrent streaming: 
raffi-mobile/
└── modules/
    └── torrent-streamer/
        ├── android/       # Android implementation
        ├── ios/          # iOS implementation
        └── package.json
This module is integrated using an Expo config plugin: 
"plugins": [
  "./plugins/withTorrentStreamer.js",
  "expo-pip"
]

​
Building with Native Modules

When using custom native modules, you must create a development build: 
# Build development client for iOS
eas build --platform ios --profile development

# Build development client for Android
eas build --platform android --profile development
Development builds include your custom native code and can be installed on devices for testing.

​
Expo Plugins

The app uses several Expo plugins configured in app.json:
  • expo-router - File-based routing
  • expo-screen-orientation - Orientation control
  • expo-splash-screen - Custom splash screen
  • expo-pip - Picture-in-picture support
  • ./plugins/withTorrentStreamer.js - Custom torrent module

​
Build Output Locations

​
Expo Classic Build

Builds are hosted on Expo’s servers. Download links are provided in the terminal: 
✔ Build finished.
  iOS: https://expo.dev/artifacts/eas/...
  Android: https://expo.dev/artifacts/eas/...

​
EAS Build

View and download builds from: 
eas build:list
Or visit the Expo dashboard to manage builds.

​
Local Builds

When running expo run:ios or expo run:android, outputs are located:
  • iOS: raffi-mobile/ios/build/
  • Android: raffi-mobile/android/app/build/outputs/

​
Environment Configuration

The mobile app requires configuration for the streaming server: 
// Update STREAMING_SERVER in app/player.tsx
const STREAMING_SERVER = 'http://192.168.1.100:8080';
For production builds, configure this to point to your desktop app’s local IP or a remote server.

​
App Assets

Required assets for building:
  • Icon: assets/images/icon.png (1024x1024)
  • Splash Screen: assets/images/splash-icon.png
  • Android Adaptive Icon:
    • Foreground: assets/images/android-icon-foreground.png
    • Background: assets/images/android-icon-background.png
    • Monochrome: assets/images/android-icon-monochrome.png
  • Favicon: assets/images/favicon.png (web)

​
Testing Builds

​
Internal Testing

# Submit to TestFlight
eas submit --platform ios

​
Over-the-Air Updates

Publish JavaScript updates without rebuilding: 
# Publish update to production
eas update --branch production

# Publish update to preview
eas update --branch preview
Updates are automatically downloaded by installed apps.

Build docs developers (and LLMs) love

Get started for freeTalk to us