Hotwire Native

https://native.hotwired.dev
Admin
Hotwire Native is a web-first framework for building native mobile apps on iOS and Android by...
Tokens:23,212
Snippets:237
Trust Score:9.3
Update:4 days ago
Show doc for...
Tokens:
Raw
### Path Configuration with Rules and Settings

Source: https://native.hotwired.dev/overview/path-configuration

An example showing how to define feature flags in settings and navigation rules that open URLs matching '/new$' in a modal context.

```json
{
  "settings": {
    "feature_flags": [
        {
          "name": "new_onboarding_flow",
          "enabled": true
        }
      ]
  },
  "rules": [
    {
      "patterns": [
        "/new$"
      ],
      "properties": {
        "context": "modal"
      }
    },
  ]
}
```

--------------------------------

### Create a Navigator

Source: https://native.hotwired.dev/ios/reference

Initialize a Navigator with a configuration containing a unique name and the starting URL.

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

--------------------------------

### Example settings section with feature flags and cable script URL

Source: https://native.hotwired.dev/reference/path-configuration

Shows a settings object with use_local_db, a cable script URL, and a feature_flags array. This is a sandbox for app-level configuration; remember to version the path configuration if making breaking changes.

```json
{
  "settings": {
    "use_local_db": true,
    "cable": {
      "script_url": "https://hotwire-native-demo.dev/configurations/action_cable.js"
    },
    "feature_flags": [
        {
          "name": "new_onboarding_flow",
          "enabled": true
        }
      ]
  }
  "rules": []
}
```

--------------------------------

### Navigator(configuration:)

Source: https://native.hotwired.dev/ios/reference

Creates a Navigator instance with a configuration containing a unique name and the start location URL.

```APIDOC
## Navigator(configuration:)

### Description
Creates a Navigator with a configuration, made up of a unique name and the URL to visit when it starts.

### Method
Initializer

### Endpoint
Navigator(configuration:)

### Parameters
#### Configuration
- **name** (String) - Required - A unique name for the navigator.
- **startLocation** (URL) - Required - The URL to visit when the navigator starts.

### Request Example
```swift
let navigator = Navigator(configuration: .init(
    name: "main",
    startLocation: rootURL
))
```

### Response
No return value.
```

--------------------------------

### Set up MainActivity with HotwireBottomNavigationController

Source: https://native.hotwired.dev/android/tabs

Replaces the MainActivity class to wire up the tabs with a HotwireBottomNavigationController. It sets up edge-to-edge, applies default IME window insets, creates the controller with the activity and bottom nav view, and loads the tabs. Every tab's start location is loaded up front for instant switching.

```kotlin
class MainActivity : HotwireActivity() {
    private lateinit var bottomNavigationController: HotwireBottomNavigationController

    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        findViewById<View>(R.id.root).applyDefaultImeWindowInsets()

        bottomNavigationController = HotwireBottomNavigationController(
            activity = this,
            view = findViewById(R.id.bottom_nav)
        )
        bottomNavigationController.load(tabs)
    }

    override fun navigatorConfigurations() = tabs.navigatorConfigurations
}
```

--------------------------------

### Hotwire.config.makeCustomWebView

Source: https://native.hotwired.dev/ios/reference

Customizes the underlying WKWebView and configuration with a block, for example to use a custom WKProcessPool.

```APIDOC
## Hotwire.config.makeCustomWebView

### Description
Customizes the underlying WKWebView and configuration with a block. For example, to use a custom WKProcessPool to share cookies from web views outside of Hotwire Native.

### Method
Property (closure)

### Endpoint
Hotwire.config.makeCustomWebView

### Parameters
#### Closure
- **config** (WKWebViewConfiguration) - Required - The configuration to customize.

### Request Example
```swift
Hotwire.config.makeCustomWebView = { config in
    config.processPool = processPool
    return WKWebView(frame: .zero, configuration: config)
}
```

### Response
Returns a WKWebView instance.
```

--------------------------------

### Query string matching pattern example

Source: https://native.hotwired.dev/ios/path-configuration

Shows a path pattern that matches query strings with a wildcard before and after to ensure parameter order doesn't affect matching.

```json
{
  "patterns": [".*\\?.*foo=bar.*"],
  "properties": {
    "foo": "bar"
  }
}

```

--------------------------------

### iOS path configuration JSON example

Source: https://native.hotwired.dev/ios/path-configuration

Defines rules for all URL paths with pull-to-refresh enabled, and overrides paths ending in /new to be presented as a modal with pull-to-refresh disabled.

```json
{
  "settings": {},
  "rules": [
    {
      "patterns": [
        ".*"
      ],
      "properties": {
        "context": "default",
        "pull_to_refresh_enabled": true
      }
    },
    {
      "patterns": [
        "/new$"
      ],
      "properties": {
        "context": "modal",
        "pull_to_refresh_enabled": false
      }
    }
  ]
}
```

--------------------------------

### Set up activity_main.xml with FragmentContainerView

Source: https://native.hotwired.dev/android/getting-started

Replace the entire activity_main.xml file with this layout that hosts the NavigatorHost.

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_nav_host"
    android:name="dev.hotwire.navigation.navigator.NavigatorHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="false" />
```

--------------------------------

### Create an Application Instance

Source: https://native.hotwired.dev/android/configuration

Customize app options by configuring them within an Application instance.

```kotlin
class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()

        // Set configuration options
    }
}
```

--------------------------------

### Configure MainActivity.kt with HotwireActivity

Source: https://native.hotwired.dev/android/getting-started

Replace the MainActivity class with this code. Update the package name to match your project and change the startLocation URL to point to your web app.

```kotlin
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
        )
    )
}
```

--------------------------------

### Configure path configuration sources in AppDelegate.swift

Source: https://native.hotwired.dev/ios/path-configuration

Loads a local bundled path configuration file and a remote server configuration in AppDelegate.swift, ensuring Hotwire is configured before the first URL is routed.

```swift
import HotwireNative
import UIKit

@main
class AppDelegate: UIResponder, UIApplicationDelegate {
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        let localPathConfigURL = Bundle.main.url(forResource: "path-configuration", withExtension: "json")!
        let remotePathConfigURL = URL(string: "https://example.com/configurations/ios_v1.json")!

        Hotwire.loadPathConfiguration(from: [
            .file(localPathConfigURL),
            .server(remotePathConfigURL)
        ])

        return true
    }
}
```

--------------------------------

### Handle VisitProposal in Navigator delegate

Source: https://native.hotwired.dev/ios/native-screens

Inspect the proposal.viewController property in handle(proposal:from:) and instantiate the native view controller when it matches the pathConfigurationIdentifier. Return .acceptCustom to let Hotwire Native handle presentation.

```swift
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    private lazy var navigator = Navigator(
        configuration: .init(name: "main", startLocation: rootURL),
        delegate: self
    )

    // ...
}

extension SceneDelegate: NavigatorDelegate {
    func handle(proposal: VisitProposal, from navigator: Navigator) -> ProposalResult {
        switch proposal.viewController {
        case NumbersViewController.pathConfigurationIdentifier:
            let numbersViewController = NumbersViewController(url: proposal.url)
            return .acceptCustom(numbersViewController)
        default:
            return .accept
        }
    }
}
```

--------------------------------

### Basic rules structure with empty settings

Source: https://native.hotwired.dev/reference/path-configuration

Shows the minimal structure of a path configuration with an empty settings object and a rules array containing a single rule with empty patterns and properties.

```json
{
  "settings": {},
  "rules": [
    {
      "patterns": "",
      "properties": {}
    }
  ]
}
```

--------------------------------

### Create a Navigator with a Delegate

Source: https://native.hotwired.dev/ios/reference

Initialize a Navigator while providing a delegate to handle navigation events and errors.

```swift
let navigator = Navigator(
    configuration: .init(name: "main", startLocation: rootURL),
    delegate: self
)

extension SceneController: NavigatorDelegate {
    // ...
}
```

--------------------------------

### NavigatorDelegate.handle(proposal:from:)

Source: https://native.hotwired.dev/ios/reference

Called before every visit to choose how to handle the specified URL and action. Return a ProposalResult to accept, accept with a custom view controller, or reject.

```APIDOC
## NavigatorDelegate.handle(proposal:from:)

### Description
Called before every visit, such as when tapping a Turbo-enabled link or calling Turbo.visit(...). Implement this function to choose how to handle the specified URL and action.

### Method
Delegate method

### Endpoint
handle(proposal:from:)

### Parameters
#### Proposal
- **proposal** (Proposal) - Required - The proposal containing the URL and action.
- **from** (UIViewController) - Required - The view controller from which the proposal originates.

### Return Value
Returns one of the following ProposalResult cases:
- **accept**: Proposals are accepted and a new HotwireWebViewController is displayed.
- **acceptCustom(UIViewController)**: Provide a custom view controller to be displayed.
- **reject**: No changes to navigation occur, the visit is effectively cancelled.
```

--------------------------------

### Load Path Configuration

Source: https://native.hotwired.dev/ios/configuration

Load path configuration from local files or remote URLs using Hotwire.loadPathConfiguration(from:).

```swift
let localPathConfigURL = Bundle.main.url(forResource: "path-configuration", withExtension: "json")!
let remotePathConfigURL = URL(string: "https://example.com/configurations/ios_v1.json")!

Hotwire.loadPathConfiguration(from: [
    .file(localPathConfigURL),
    .server(remotePathConfigURL)
])
```

--------------------------------

### Define tabs list with HotwireBottomTab in MainActivity.kt

Source: https://native.hotwired.dev/android/tabs

Creates a list of HotwireBottomTab instances for each NavigatorHost. Each tab requires a title, iconResId, and a NavigatorConfiguration with a unique name, navigatorHostId, and startLocation. The tab bar menu is populated automatically. Optionally pass isVisible = false to hide a tab.

```kotlin
val tabs = listOf(
    HotwireBottomTab(
        title = "Navigation",
        iconResId = R.drawable.ic_tab_navigation,
        configuration = NavigatorConfiguration(
            name = "navigation",
            navigatorHostId = R.id.navigation_navigator_host,
            startLocation = "https://hotwire-native-demo.dev"
        )
    ),

    HotwireBottomTab(
        title = "Bridge Components",
        iconResId = R.drawable.ic_tab_bridge_components,
        configuration = NavigatorConfiguration(
            name = "bridge-components",
            navigatorHostId = R.id.bridge_components_navigator_host,
            startLocation = "https://hotwire-native-demo.dev/components"
        )
    )
)
```

--------------------------------

### Configure activity_main.xml for Bottom Navigation

Source: https://native.hotwired.dev/android/tabs

Define the layout with multiple NavigatorHost FragmentContainerViews and a BottomNavigationView to support independent navigation stacks for each tab.

```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/navigation_navigator_host"
        android:name="dev.hotwire.navigation.navigator.NavigatorHost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:defaultNavHost="false" />

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/bridge_components_navigator_host"
        android:name="dev.hotwire.navigation.navigator.NavigatorHost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:defaultNavHost="false" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
```

--------------------------------

### iOS Navigator Usage

Source: https://native.hotwired.dev/reference/navigation

Shows how to create a Navigator, route to a new page, pop the top controller, and clear all controllers on iOS.

```APIDOC
## Navigator (iOS)

### Description
Use the Navigator class to navigate from a native screen to another native screen or back to a web context on iOS.

### Methods

#### route(_:animated:)
- **Parameters**
  - **url** (URL) - Required - The URL to navigate to.
  - **animated** (Bool) - Optional - Whether to animate the transition. Defaults to true.
- **Description**: Visits a new page.

#### pop(animated:)
- **Parameters**
  - **animated** (Bool) - Optional - Whether to animate the transition. Defaults to true.
- **Description**: Pops the top controller off the stack.

#### clearAll(animated:)
- **Parameters**
  - **animated** (Bool) - Optional - Whether to animate the transition. Defaults to true.
- **Description**: Pops the entire stack of controllers.

### Example
```swift
let rootURL = URL(string: "...")!
let navigator = Navigator()

// Visit a new page.
navigator.route(rootURL.appending(path: "foo"))

// Pop the top controller off the stack.
navigator.pop()

// Pop the entire stack of controllers.
navigator.clearAll()
```

### Disable Animation Example
```swift
navigator.route(rootURL.appending(path: "foo"), animated: false)
navigator.pop(animated: false)
navigator.clearAll(animated: false)
```
```

--------------------------------

### Navigator(configuration:delegate:)

Source: https://native.hotwired.dev/ios/reference

Creates a Navigator with a configuration and an optional delegate to customize handling of URLs, errors, and external links.

```APIDOC
## Navigator(configuration:delegate:)

### Description
Creates a Navigator with a configuration and an optional delegate to customize behavior for URLs, errors, and external links.

### Method
Initializer

### Endpoint
Navigator(configuration:delegate:)

### Parameters
#### Configuration
- **name** (String) - Required - A unique name for the navigator.
- **startLocation** (URL) - Required - The URL to visit when the navigator starts.

#### Delegate
- **delegate** (NavigatorDelegate?) - Optional - The delegate to customize navigation behavior.

### Request Example
```swift
let navigator = Navigator(
    configuration: .init(name: "main", startLocation: rootURL),
    delegate: self
)

extension SceneController: NavigatorDelegate {
    // ...
}
```

### Response
No return value.
```

--------------------------------

### Register Application in AndroidManifest.xml

Source: https://native.hotwired.dev/android/configuration

Ensure the custom Application instance is invoked at startup by adding it to the AndroidManifest.xml file.

```xml
<application android:name=".MyApplication">
    <!-- ... -->
</application>
```

--------------------------------

### Annotate Fragment with HotwireDestinationDeepLink

Source: https://native.hotwired.dev/android/native-screens

Create a fragment and use the @HotwireDestinationDeepLink annotation to match the URI defined in the path configuration.

```kotlin
@HotwireDestinationDeepLink(uri = "hotwire://fragment/numbers")
class NumbersFragment : HotwireFragment() {
    // ...
}
```

--------------------------------

### Enable lazy loading in HotwireBottomNavigationController

Source: https://native.hotwired.dev/android/tabs

Configure the controller to defer loading tab content until the user selects the tab by setting lazyLoadTabs to true.

```kotlin
HotwireBottomNavigationController(
    activity = this,
    view = findViewById(R.id.bottom_nav),
    lazyLoadTabs = true
)
```

--------------------------------

### Empty Path Configuration Structure

Source: https://native.hotwired.dev/overview/path-configuration

The base structure required for a path configuration file, containing empty settings and rules objects.

```json
{
  "settings": {},
  "rules": []
}
```

--------------------------------

### Configure SceneDelegate for Hotwire Native

Source: https://native.hotwired.dev/ios/getting-started

Replace the contents of SceneDelegate.swift to initialize the Navigator with a root URL and set the root view controller.

```swift
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()
    }
}
```

--------------------------------

### Load tabs with selected tab index and set tab selected listener

Source: https://native.hotwired.dev/android/tabs

Shows how to load the tabs with a specific initial tab index and set a listener to be notified when the selected tab changes. The listener receives the index and the tab object.

```kotlin
bottomNavigationController.load(tabs, selectedTabIndex = 1)
bottomNavigationController.setOnTabSelectedListener { index, tab ->
    // ...
}
```

--------------------------------

### Load path configuration in Android

Source: https://native.hotwired.dev/android/path-configuration

Use Hotwire.loadPathConfiguration to specify local asset paths and remote URLs for your configuration. Providing both ensures the app has a fallback if it is offline.

```kotlin
Hotwire.loadPathConfiguration(
    context = this,
    location = PathConfiguration.Location(
        assetFilePath = "json/configuration.json",
        remoteFileUrl = "https://example.com/configurations/android_v1.json"
    )
)
```

--------------------------------

### Configure Default View Controller

Source: https://native.hotwired.dev/ios/configuration

Set a custom view controller for web requests in the Navigator. Must be a VisitableViewController or subclass.

```swift
Hotwire.config.defaultViewController = { url in
    CustomViewController(url: url)
}
```

--------------------------------

### Configure Debug Logging and Custom Logger

Source: https://native.hotwired.dev/ios/configuration

Enable debug logging and provide a custom Logger implementation to handle library logs.

```swift
Hotwire.config.debugLoggingEnabled = true
Hotwire.config.log = MyAppLogger()

struct MyAppLogger: Logger {
    func log(message: String, level: LogLevel, file: String, function: String, line: UInt) {
        // Forward to your logging framework of choice.
    }
}
```

--------------------------------

### Android Navigator Usage (HotwireFragment)

Source: https://native.hotwired.dev/reference/navigation

Shows how to use the Navigator inside a HotwireFragment class on Android to route, pop, and clear the backstack.

```APIDOC
## Navigator (Android - HotwireFragment)

### Description
Use the Navigator inside a HotwireFragment class to navigate between native screens and web contexts on Android.

### Methods

#### route(location:)
- **Parameters**
  - **location** (String) - Required - The URL to navigate to.
- **Description**: Visits a new page.

#### pop()
- **Description**: Pops the backstack to the previous destination.

#### clearAll()
- **Description**: Clears the navigation backstack to the start destination.

### Example
```kotlin
val location = "https://..."

// Visit a new page.
navigator.route("$location/foo")

// Pop the backstack to the previous destination.
navigator.pop()

// Clear the navigation backstack to the start destination.
navigator.clearAll()
```
```

--------------------------------

### Initialize HotwireTabBarController with NavigatorDelegate

Source: https://native.hotwired.dev/ios/tabs

Pass a NavigatorDelegate to the initializer to handle proposals and errors for every tab's navigator.

```swift
HotwireTabBarController(navigatorDelegate: self)
```

--------------------------------

### iOS Navigator Basic Navigation

Source: https://native.hotwired.dev/reference/navigation

Demonstrates basic navigation operations including routing to a new URL, popping the top controller, and clearing the entire stack.

```swift
let rootURL = URL(string: "...")!
let navigator = Navigator()

// Visit a new page.
navigator.route(rootURL.appending(path: "foo"))

// Pop the top controller off the stack.
navigator.pop()

// Pop the entire stack of controllers.
navigator.clearAll()
```

--------------------------------

### Set Application User Agent Prefix

Source: https://native.hotwired.dev/android/configuration

Set a custom user agent application prefix for every WebView instance.

```kotlin
Hotwire.config.applicationUserAgentPrefix = "My Application;"
```

--------------------------------

### Add Hotwire Native dependencies to build.gradle.kts

Source: https://native.hotwired.dev/android/getting-started

Add these dependencies to your app module's build.gradle.kts file. Replace <latest-version> with the latest version from the releases page.

```kotlin
dependencies {
    implementation("dev.hotwire:core:<latest-version>")
    implementation("dev.hotwire:navigation-fragments:<latest-version>")
}
```

--------------------------------

### Android Navigator Usage (HotwireActivity)

Source: https://native.hotwired.dev/reference/navigation

Shows how to use the Navigator inside a HotwireActivity class on Android to route, pop, and clear the backstack.

```APIDOC
## Navigator (Android - HotwireActivity)

### Description
Use the Navigator inside a HotwireActivity class to navigate between native screens and web contexts on Android.

### Methods

#### route(location:)
- **Parameters**
  - **location** (String) - Required - The URL to navigate to.
- **Description**: Visits a new page.

#### pop()
- **Description**: Pops the backstack to the previous destination.

#### clearAll()
- **Description**: Clears the navigation backstack to the start destination.

### Example
```kotlin
val location = "https://..."
val navigator = delegate.currentNavigator

// Visit a new page.
navigator?.route("$location/foo")

// Pop the backstack to the previous destination.
navigator?.pop()

// Clear the navigation backstack to the start destination.
navigator?.clearAll()
```
```

--------------------------------

### Define Path Configuration for Native Screens

Source: https://native.hotwired.dev/android/native-screens

Configure a path pattern to route URLs ending in /numbers to a specific native URI and set a title.

```json
{
  "settings": {},
  "rules": [
    {
      "patterns": [
        "/numbers$"
      ],
      "properties": {
        "uri": "hotwire://fragment/numbers",
        "title": "Numbers"
      }
    }
  ]
}
```

--------------------------------

### Enable internet access in AndroidManifest.xml

Source: https://native.hotwired.dev/android/getting-started

Add this uses-permission element above the <application> node in AndroidManifest.xml to allow network access.

```xml
<uses-permission android:name="android.permission.INTERNET"/>
```

--------------------------------

### Implement Custom HotwireLogger

Source: https://native.hotwired.dev/android/configuration

Provide a custom implementation of the HotwireLogger interface to handle library logs within your own logging framework.

```kotlin
Hotwire.config.logger = MyAppLogger

object MyAppLogger : HotwireLogger {
    override var logLevel = HotwireLogLevel.DEBUG

    override fun v(tag: String, msg: () -> String) { /* ... */ }
    override fun d(tag: String, msg: () -> String) { /* ... */ }
    override fun i(tag: String, msg: () -> String) { /* ... */ }
    override fun w(tag: String, msg: () -> String) { /* ... */ }
    override fun e(tag: String, throwable: Throwable?, msg: () -> String) { /* ... */ }
}
```

--------------------------------

### Configure Default Navigation Controller

Source: https://native.hotwired.dev/ios/configuration

Set a custom navigation controller for main and modal stacks. Must be a UINavigationController or subclass.

```swift
Hotwire.config.defaultNavigationController = {
    CustomNavigationController()
}
```

--------------------------------

### Enable Debug Logging and WebView Debugging

Source: https://native.hotwired.dev/android/configuration

Configure debug logging and WebView debugging specifically for debug builds.

```kotlin
if (BuildConfig.DEBUG) {
    Hotwire.config.logger.logLevel = HotwireLogLevel.DEBUG
}
Hotwire.config.webViewDebuggingEnabled = BuildConfig.DEBUG
```

--------------------------------

### Pin dependencies with importmap-rails

Source: https://native.hotwired.dev/reference/bridge-installation

Use the importmap binary to pin Stimulus and the Hotwire Native Bridge in your config/importmap.rb file.

```bash
./bin/importmap pin @hotwired/stimulus @hotwired/hotwire-native-bridge
```

--------------------------------

### Register Fragment Destinations

Source: https://native.hotwired.dev/android/native-screens

Register your custom fragment and the HotwireWebFragment with Hotwire Native to handle URL path matching.

```kotlin
Hotwire.registerFragmentDestinations(
    HotwireWebFragment::class, // Don't forget to register this for regular destinations
    NumbersFragment::class
)
```

--------------------------------

### Customize WKWebView

Source: https://native.hotwired.dev/ios/reference

Use a custom WKProcessPool to share cookies by configuring the makeCustomWebView block.

```swift
Hotwire.config.makeCustomWebView = { config in
    config.processPool = processPool
    return WKWebView(frame: .zero, configuration: config)
}
```

--------------------------------

### Customize HotwireWebView

Source: https://native.hotwired.dev/android/reference

Subclass HotwireWebView to provide custom behaviors by configuring the makeCustomWebView property.

```kotlin
Hotwire.config.makeCustomWebView = { context ->
    MyCustomWebView(context, null)
}
```

--------------------------------

### Define HotwireTab instances

Source: https://native.hotwired.dev/ios/tabs

Define the tabs array to populate the tab bar with specific titles, images, and URLs.

```swift
let tabs = [
    HotwireTab(
        title: "Navigation",
        image: .init(systemName: "arrow.left.arrow.right")!,
        url: rootURL
    ),

    HotwireTab(
        title: "Bridge Components",
        image: .init(systemName: "square.grid.2x2")!,
        url: rootURL.appendingPathComponent("components")
    )
]
```

--------------------------------

### Import BridgeComponent

Source: https://native.hotwired.dev/reference/bridge-installation

Import the BridgeComponent class to extend it within your Stimulus controllers.

```javascript
import { BridgeComponent } from "@hotwired/hotwire-native-bridge"

class BridgeTest extends BridgeComponent {
  // ...
}
```

--------------------------------

### Conform view controller to PathConfigurationIdentifiable

Source: https://native.hotwired.dev/ios/native-screens

Define a native view controller that conforms to PathConfigurationIdentifiable and provides a static pathConfigurationIdentifier. This identifier is used by Hotwire Native to resolve that a native view controller was requested when a link is intercepted.

```swift
class NumbersViewController: UITableViewController, PathConfigurationIdentifiable {
    static var pathConfigurationIdentifier: String { "numbers" }

    init(url: URL) {
        self.url = url
    }

    // ...
}
```

--------------------------------

### Configure SceneDelegate for Tab Bar

Source: https://native.hotwired.dev/ios/tabs

Replace the contents of SceneDelegate to initialize the HotwireTabBarController and set it as the root view controller.

```swift
import HotwireNative
import UIKit

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

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

    private let tabBarController = HotwireTabBarController()

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        window?.rootViewController = tabBarController
        tabBarController.load(tabs)
    }
}
```

--------------------------------

### Define path configuration rules in JSON

Source: https://native.hotwired.dev/android/path-configuration

This JSON structure defines rules for URL path patterns, specifying the context, URI, and pull-to-refresh behavior for different routes.

```json
{
  "settings": {},
  "rules": [
    {
      "patterns": [
        ".*"
      ],
      "properties": {
        "context": "default",
        "uri": "hotwire://fragment/web",
        "pull_to_refresh_enabled": true
      }
    },
    {
      "patterns": [
        "/new$"
      ],
      "properties": {
        "context": "modal",
        "uri": "hotwire://fragment/web/modal/sheet",
        "pull_to_refresh_enabled": false
      }
    }
  ]
}
```

--------------------------------

### Manually define importmap entries

Source: https://native.hotwired.dev/reference/bridge-installation

Alternatively, manually define the importmap in the <head> of your application to point to the latest versions of Stimulus and the bridge library.

```html
<head>
  <script type="importmap">
    {
      "imports": {
        "@hotwired/stimulus": "https://cdn.jsdelivr.net/npm/@hotwired/stimulus@latest/dist/stimulus.min.js",
        "@hotwired/hotwire-native-bridge": "https://cdn.jsdelivr.net/npm/@hotwired/hotwire-native-bridge@latest/dist/hotwire-native-bridge.min.js"
      }
    }
  </script>
</head>
```

--------------------------------

### Path configuration rule for native screen

Source: https://native.hotwired.dev/ios/native-screens

JSON path configuration that routes all URLs ending in /numbers to the native view controller identified by "numbers". The view_controller property is set to the pathConfigurationIdentifier.

```json
{
  "settings": {},
  "rules": [
    {
      "patterns": [
        "/numbers$"
      ],
      "properties": {
        "view_controller": "numbers"
      }
    }
  ]
}
```

--------------------------------

### Register Fragment Destinations

Source: https://native.hotwired.dev/android/configuration

Register custom fragment destinations to be used by the library.

```kotlin
Hotwire.registerFragmentDestinations(
    HotwireWebFragment::class, // Don't forget to register this for regular destinations
    MyCustomFragment::class
)
```

--------------------------------

### Import via npm package

Source: https://native.hotwired.dev/reference/bridge-installation

When using a bundler like webpack or esbuild, import the package directly into your application code.

```javascript
import "@hotwired/hotwire-native-bridge"
```

--------------------------------

### Swift BridgeComponent Implementation

Source: https://native.hotwired.dev/ios/bridge-components

Create a Swift class inheriting from BridgeComponent to handle messages from the web and manage native UI elements.

```swift
import HotwireNative
import UIKit

final class ButtonComponent: BridgeComponent {
    override class var name: String { "button" }

    override func onReceive(message: Message) {
        guard let viewController else { return }
        addButton(via: message, to: viewController)
    }

    private var viewController: UIViewController? {
        delegate?.destination as? UIViewController
    }

    private func addButton(via message: Message, to viewController: UIViewController) {
        guard let data: MessageData = message.data() else { return }

        let action = UIAction { [unowned self] _ in
            self.reply(to: "connect")
        }
        let item = UIBarButtonItem(title: data.title, primaryAction: action)
        viewController.navigationItem.rightBarButtonItem = item
    }
}

private extension ButtonComponent {
    struct MessageData: Decodable {
        let title: String
    }
}
```
Tokens:
Raw