Hotwire Native: Bridging the Gap Between Web and Mobile

Mobile development has always presented developers with a fundamental choice: build native apps for each platform or create cross-platform solutions that compromise on user experience. What if there was a third way? What if you could deliver native mobile experiences while leveraging your existing web expertise and Rails application?

Hotwire Native turns your web apps into native mobile experiences. You keep the fast development and easy maintenance of web technologies.

The Hybrid Revolution: Best of Both Worlds

Traditional mobile development approaches force teams into difficult tradeoffs:

• Pure Native: Superior user experience but requires separate teams, codebases, and maintenance overhead
• Cross-Platform Frameworks: Code reuse but often at the cost of platform-specific optimizations and native feel

Hotwire Native breaks this paradigm by creating a hybrid architecture where your Rails application becomes the brain of your mobile app, while native iOS and Android components handle the presentation layer and platform-specific interactions.

How Native Native works

At its core, Hotwire Native operates on a simple but powerful principle: your web application remains your single source of truth for business logic, data, and core functionality, while native mobile apps provide the shell that renders web content with native navigation, animations, and platform-specific components.

To get started, you only need a small native app on iOS and Android - just a few lines of code are enough to bring your Rails-powered mobile experience to life.

That’s all it takes to go native on iOS

import HotwireNative
import UIKit

let rootURL = URL(string: "https://hotwire-native-demo.dev")!

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    private let navigator = Navigator(configuration: .init(
        name: "main",
        startLocation: rootURL
    ))

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        window?.rootViewController = navigator.rootViewController
        navigator.start()
    }
}

The same simplicity - now on Android

package com.example.myapplication // update to match your project

import android.os.Bundle
import android.view.View
import androidx.activity.enableEdgeToEdge
import dev.hotwire.navigation.activities.HotwireActivity
import dev.hotwire.navigation.navigator.NavigatorConfiguration
import dev.hotwire.navigation.util.applyDefaultImeWindowInsets

class MainActivity : HotwireActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<View>(R.id.main_nav_host).applyDefaultImeWindowInsets()
    }

    override fun navigatorConfigurations() = listOf(
        NavigatorConfiguration(
            name = "main",
            startLocation = "https://hotwire-native-demo.dev",
            navigatorHostId = R.id.main_nav_host
        )
    )
}

And the content? Rails will take care of that for you.

Building Bridges Between Rails and Mobile

The magic happens through Bridge Components - the communication layer between your web application and native mobile components. These bridges allow your Rails app to trigger native functionality like push notifications, camera access, or custom UI elements while maintaining the development speed of web technologies.

This architecture provides several key advantages:

• Single Codebase: Your Rails application handles all business logic, data management, and core functionality
• Native Performance: Platform-specific optimizations and native UI components where they matter most
• Instant Updates: Once your app passes initial App Store and Google Play Store review, all future changes are deployed instantly through your Rails application without requiring new app store submissions
• Rapid Development: Changes to your web app are instantly reflected in mobile apps
• Platform Integration: Deep integration with iOS and Android platform features through bridge components
• App Store Compliance: Meet both iOS App Store and Google Play Store requirements with proper native integration

Why Hotwire Native Matters

Hotwire Native represents a paradigm shift in mobile development. Instead of choosing between native performance and web development speed, you can have both. This approach is particularly powerful for:

• Startups that need to move fast with limited mobile expertise
• Web-first companies looking to extend their reach to mobile
• Teams that want to maintain a single codebase while delivering native experiences
• Applications where business logic changes frequently

The technology removes the traditional barriers between web and mobile development, allowing web developers to create sophisticated mobile applications without learning entirely new platforms and languages.