Skip to content

README.md

Latest commit

 

History

History
66 lines (48 loc) · 2.16 KB

README.md

File metadata and controls

66 lines (48 loc) · 2.16 KB
Raw

Expo counter sample

An Elmish counter app running on Expo, using Fable to compile F# to JavaScript.

Pre-requisites

  1. .NET SDK (8.0+)
  2. Node.js (>= 22.11.0)
  3. For device/simulator testing:
    • iOS: Xcode
    • Android: Android Studio, Android SDK

Setup

npm install
dotnet tool restore

Build & Run

  1. npm run watch — starts Fable in watch mode, recompiling F# to JS on save
  2. In a separate terminal: npm start — starts Expo dev server

Scan the QR code with Expo Go (Android) or Camera app (iOS) to run on a device, or press i for iOS simulator / a for Android emulator.

Scripts

Script Command
build One-shot Fable compile (release)
watch Fable watch mode (debug)
start Start Expo dev server
ios Build and run on iOS
android Build and run on Android

Tooling

Tool Version
Expo SDK 55
React Native 0.83.4
Fable 4.29.0 (local tool via dotnet-tools.json)
Fable.Elmish 5.0.2
Fable.React.Native 4.0.0

Project structure

  • src/App.fs — Elmish model, update, and view (uses Program.withExpo)
  • src/Styles.fs — React Native styles
  • src/app.fsproj — F# project with NuGet package references
  • out/ — Fable-compiled JavaScript output (gitignored)
  • assets/ — App icons and splash screen images
  • shims/empty.js — Stub for unused optional Fable.ReactNative dependencies
  • app.json — Expo configuration
  • metro.config.js — Metro bundler configuration (includes shims for unused RN packages)

Key difference from bare React Native

This sample uses Elmish.Expo.Program.withExpo instead of Elmish.ReactNative.Program.withReactNative. This integrates with Expo's registerRootComponent which provides:

  • Expo dev tools overlay
  • Proper web platform rendering support
  • Expo.fx side-effect initialization

No index.js entry point is needed — Expo reads the "main" field from package.json which points directly to the Fable-compiled output.