Bridge Components for Hotwire Native apps

by Joe Masilotti, the Hotwire Native guy

Hotwire Native enables seamless communication between native Swift and Kotlin code and web views in hybrid mobile apps. Bridge components extend this functionality by providing reusable native components that interact your web views. They enable developers to break out of the web view container and drive native features.

This repository contains generalized, production-ready bridge components extracted from real-world client projects. Once configured, each component can be added to any page of your app and customized with a bit of HTML.

Requirements

• Hotwire Native iOS v1.2 or later
• Hotwire Native Android v1.0 or later
• Hotwire Native Bridge on the web

Free components

The source code for the iOS, Android, and web components are included in this repo.

Alert Component

Displays a native alert dialog to confirm an action.

Button Component

Adds a native button to the navigation bar on iOS and action bar on Android. The button can contain either a text string or an image.

Form Component

Replaces a form's submit <button> with a native one that disables during submission.

Haptic Component

Vibrate the device via the haptic engine.

Menu Component

Adds a native button to the navigation bar that, when tapped, renders a native menu powered by UIMenu on iOS and DropdownMenu on Android.

Review Prompt Component

Prompts the user for a review on the App Store on iOS and Google Play on Android.

Share Component

Adds a button that presents a native share sheet.

Toast Component

Render a native, floating message that disappears after a few seconds.

Paid components

Important

Gain access to these components by purchasing a Pro license. This is a one-time payment and not a subscription. It includes access to all bridge components available today, plus all future updates. View the full pro license before purchasing.

Barcode Scanner Component

Presents a camera that scans barcodes and QR codes using a native camera capture.

Document Scanner Component

Presents a camera that digitizes physical documents.

Location Component

Prompts the user for their precise location with a single system dialog.

Notification Token Component

Gets the user's push notification token.

Permissions Component

Gets the status of the user's granted permissions, like location and push notifications.

Installation

To use a bridge component, copy the relevant Swift/Kotlin and JavaScript files from the components/ directory into your project and register the component.

Check the examples directoy for full working example iOS, Android, and Rails apps.

iOS (Swift)

1. Copy the Swift file (ExampleComponent.swift) into your Xcode project.
2. Register the component in AppDelegate.swift.

import HotwireNative
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        Hotwire.registerBridgeComponents([
            ExampleComponent.self
        ])
        return true
    }
}

Android (Kotlin)

1. Copy the Kotlin file (ExampleComponent.kt) into your Android Studio project.
2. Register the component inside your Application subclass.

package com.masilotti.demo // Change to your package name.

import android.app.Application
import com.masilotti.demo.components.ExampleComponent // Import component here.
import dev.hotwire.core.bridge.BridgeComponentFactory
import dev.hotwire.core.bridge.KotlinXJsonConverter
import dev.hotwire.core.config.Hotwire
import dev.hotwire.navigation.config.registerBridgeComponents

class DemoApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        Hotwire.registerBridgeComponents(
            BridgeComponentFactory("example", ::ExampleComponent)
        )
    }
}

Web (JavaScript)

1. Copy the JavaScript file (example_controller.js) into app/javascript/controllers/bridge/.
2. Import and initialize (if you aren't dynamically importing Stimulus controllers).

import { application } from "./application"

import Bridge__ExampleController from "./bridge/example_controller"
application.register("bridge--example", Bridge__ExampleController)

Prerequisites

iOS

1. Hotwire Native iOS

Android

1. Hotwire Native Android
2. Jetpack Compose
3. A serialization library, like kotlinx.serialization
4. Material Symbol font if using images
   • Unzip the downloaded font and copy the Outlined version .ttf to app/src/main/res/font/material_symbols.ttf

Web

1. Hotwire Native Bridge

Usage

Once installed, use a component by adding a data-controller attribute that matches the name of the Stimulus controller.

<div data-controller="bridge--example"></div>

Each component can then be configured further - check the README in each component's directory for more information.

Need help?

If you need help installing, configuring, or using the components, feel free to open a new discussion or send me an email. I'd love to help!