How to Build Mobile Apps for iOS and Android with Dioxus: A Complete Guide

Dioxus enables building native iOS and Android applications from a single Rust codebase using a WebView-based mobile renderer that implements the WriteMutations trait, allowing you to deploy to mobile platforms using the dx CLI with --platform ios or --platform android flags.

Dioxus is a declarative UI framework for Rust that compiles to multiple platforms including web, desktop, and mobile. When you build mobile apps for iOS and Android with Dioxus, you leverage the same component-based architecture used for other platforms, with the mobile renderer in packages/desktop/src/mobile.rs handling platform-specific differences transparently.

Understanding the Dioxus Mobile Architecture

The mobile implementation in DioxusLabs/dioxus relies on a WebView-based renderer that bridges your Rust UI code to native mobile platforms without requiring JavaScript or platform-specific UI toolkits.

The Mobile Renderer and WebView Stack

Located in packages/desktop/src/mobile.rs, the mobile renderer provides the dioxus::mobile::launch entry point and implements the WriteMutations trait for the WebView surface. This renderer is powered by the wry and tao libraries, which create a native WebView on both iOS and Android. Your Rust code controls this WebView directly, rendering HTML-like elements while maintaining access to native platform capabilities.

Shared WriteMutations Abstraction

As documented in notes/architecture/00-OVERVIEW.md, all Dioxus renderers—including mobile, web, desktop, and TUI—share the WriteMutations abstraction. This architectural consistency ensures that components written for the web or desktop work unchanged on mobile devices. The renderer handles the translation of virtual DOM mutations to the underlying WebView, requiring no changes to your component logic when switching platforms.

Setting Up Your Project to Build Mobile Apps with Dioxus

Before running mobile commands, you must configure your Rust project with the correct dependencies and compiler targets.

Enabling the Mobile Feature Flag

Add the mobile feature to your Cargo.toml to pull in the mobile renderer and required native bindings:

[dependencies]
dioxus = { version = "0.7", features = ["mobile"] }

Configuring Target Triples for iOS and Android

Dioxus uses standard Rust target triples for cross-compilation. Install the appropriate targets for your development machine:

• iOS device: aarch64-apple-ios
• iOS Simulator: x86_64-apple-ios
• Android 64-bit: aarch64-linux-android
• Android 32-bit: armv7-linux-androideabi

Developing and Building with the Dioxus CLI

The dx command line tool streamlines mobile development with hot-reload capabilities and production bundling, automatically wiring the mobile feature flag when targeting mobile platforms.

Hot Reloading with dx serve

Run the following commands to launch your application with hot-reload on a connected device or emulator. As detailed in packages/dioxus/README.md, the CLI handles device detection and feature flag injection automatically:

# iOS development

dx serve --platform ios

# Android development

dx serve --platform android

Production Bundling with dx bundle

When ready for distribution, generate signed packages ready for the app stores:

# Generate .ipa for iOS

dx bundle --platform ios

# Generate .apk for Android

dx bundle --platform android

These commands produce optimized release artifacts that can be uploaded directly to the Apple App Store or Google Play Store.

Accessing Native Mobile APIs

Because the mobile renderer uses a native WebView, you can access platform-specific features through JNI on Android or the Objective-C bridge on iOS. The Dioxus CLI scaffolds the necessary bridge code, as referenced in packages/cli-harnesses/README.md, allowing you to write pure Rust logic while accessing GPS, camera, accelerometer, and other native sensors. The WebView approach provides seamless integration with existing mobile native code while keeping your application logic in Rust.

Summary

• Dioxus mobile uses a WebView renderer in packages/desktop/src/mobile.rs to deploy Rust UI code to iOS and Android via the wry/tao stack.
• Enable mobile support by adding features = ["mobile"] to your Cargo.toml dependencies.
• Use dx serve --platform <ios|android> for development with hot-reload on devices or emulators.
• Use dx bundle --platform <ios|android> to generate production-ready .ipa or .apk files.
• The WriteMutations trait ensures component compatibility across web, desktop, and mobile platforms without code changes.

Frequently Asked Questions

Can I use the same Dioxus code for web, desktop, and mobile?

Yes. Because all renderers implement the WriteMutations trait as defined in notes/architecture/00-OVERVIEW.md, components written for web or desktop targets work unchanged on mobile. The only modifications required are platform-specific build configurations in your Cargo.toml and native API integrations for device-specific features.

What is the entry point for a Dioxus mobile application?

The entry point is the dioxus::mobile::launch function defined in packages/desktop/src/mobile.rs. Your main.rs should call this function instead of dioxus::desktop::launch or dioxus::web::launch when targeting mobile platforms, passing your root component as an argument.

How does the Dioxus CLI handle mobile platform targets?

The CLI automatically adds the mobile feature flag when you invoke dx serve or dx bundle with --platform ios or --platform android, as documented in packages/cli-harnesses/README.md. This ensures the correct renderer and native bindings are compiled without requiring manual feature management in your build commands.

Does Dioxus mobile use React Native or native UI components?

Neither. Dioxus mobile uses a WebView-based approach via the wry/tao stack, rendering your Rust-controlled UI within a native WebView. This differs from React Native's JavaScript bridge or fully native UI toolkits like Jetpack Compose or SwiftUI, offering a middle ground that leverages web rendering technologies while maintaining Rust's performance characteristics and type safety.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}