A collection of bridge components for Hotwire Native apps (Stimulus controllers).
npm install @joemasilotti/bridge-components> 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 installed, each component can be added to any page of your app and customized with a bit of HTML.
* Alert
* Barcode Scanner
* Biometrics Lock
* Button
* Document Scanner
* Form
* Haptic
* Location
* Menu
* NFC
* Notification Token
* Permissions
* Review Prompt
* Search
* Share
* Theme
* Toast
* Hotwire Native Bridge
* Hotwire Native iOS v1.2 or later
* Android
* Hotwire Native Android v1.2 or later
* Kotlin v2.2.0
Check the examples/ directory for demo iOS, Android, and Rails apps.
Each component requires a Stimulus controller and a Swift/Kotlin component.
#### 1. Install the bridge-components package
Add the bridge-components module via yarn:
``bash`
yarn add @joemasilotti/bridge-components
or npm:
`bash`
npm install @joemasilotti/bridge-components
or with Rails importmaps:
`bash`
bin/importmap pin @joemasilotti/bridge-components
#### 2. Register the Stimulus controllers
Register the Stimulus controllers after starting your Stimulus application:
`javascript
import { Application } from "@hotwired/stimulus"
import { controllers } from "@joemasilotti/bridge-components"
const application = Application.start()
application.load(controllers)
`
#### 1. Add the Swift package dependency
In Xcode, select File → Add Packages Dependencies… and enter https://github.com/joemasilotti/bridge-components in the search field. Make sure your project is set under "Add to Project" and click Add Package. Then click Add Package again.
#### 2. Register the native components
Import the framework and register all the available components in AppDelegate.swift:
`swift
import BridgeComponents // THIS LINE
import HotwireNative
import UIKit
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
Hotwire.registerBridgeComponents(Bridgework.coreComponents) // THIS LINE
return true
}
}
`
#### 1. Add the JitPack repository to your build file
In Android Studio, add the following line to settings.gradle.kts:
`kotlin`
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
maven { url = uri("https://jitpack.io") } // THIS LINE
}
}
#### 2. Add the dependency
Add the following line to the bottom of build.gradle.kts (Module :app), replacing with the latest release:
`kotlin
dependencies {
// ...
implementation("dev.hotwire:core:
implementation("dev.hotwire:navigation-fragments:
implementation("com.github.joemasilotti:bridge-components:
}
`
#### 3. Register the native components
In your Application() subclass add the following:
`kotlin
package com.your.package.name
import android.app.Application
import com.masilotti.bridgecomponents.shared.Bridgework // THIS LINE
import dev.hotwire.core.bridge.KotlinXJsonConverter // THIS LINE
import dev.hotwire.core.config.Hotwire
import dev.hotwire.navigation.config.registerBridgeComponents // THIS LINE
class YourApplication : Application() {
override fun onCreate() {
super.onCreate()
Hotwire.config.jsonConverter = KotlinXJsonConverter() // THIS LINE
Hotwire.registerBridgeComponents(*Bridgework.coreComponents) // THIS LINE
}
}
`
Once installed, use a component by adding a data-controller attribute that matches the name of the Stimulus controller.
For example, to use the Button Component:
`html`
Button
Each component can then be configured further. Check the docs/components/ directory for more information.
A few controllers fire custom JavaScript events prefixed with the bridge--` namespace. You can listen for these to perform custom handling when:
* A search query is executed
* A notification token is retrieved
* A location is retrieved
* A barcode is scanned
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!