Adding Floating Action Button Component

[studeba]

Something like this

[studeba]

While not production code - I was able to cobble this together. It's working for me (iOS) in the simulator. Could probably add some params for the icon, colors and size, but this is what I needed

import HotwireNative
import UIKit

final class FabComponent: BridgeComponent {
override class var name: String { "fab" }

private var fabButton: UIButton!

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

override func onReceive(message: Message) {
    print("FAB received message: \(message.event)")
    
    guard let viewController = hostingViewController else {
        print("No hosting view controller!")
        return
    }
    
    switch message.event {
    case "connect":
        print("FAB connect triggered")
        handleConnect(viewController: viewController)
    case "disconnect":
        print("FAB disconnect triggered")
        removeFab(from: viewController)
    default:
        break
    }
}

private func handleConnect(viewController: UIViewController) {
    print("FAB creating button...")
    
    removeFab(from: viewController)
    
    var config = UIButton.Configuration.filled()
    config.background.backgroundColor = UIColor(red: 239/255, green: 68/255, blue: 68/255, alpha: 1.0)
    config.cornerStyle = .capsule
    config.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)
    
    let plusSymbol = UIImage(systemName: "plus", withConfiguration: UIImage.SymbolConfiguration(pointSize: 20, weight: .regular))
    config.image = plusSymbol
    config.baseForegroundColor = .white
    
    fabButton = UIButton(configuration: config, primaryAction: UIAction { [weak self] _ in
        self?.performAction()
    })
    
    fabButton.translatesAutoresizingMaskIntoConstraints = false
    
    fabButton.layer.shadowColor = UIColor.black.cgColor
    fabButton.layer.shadowOpacity = 0.25
    fabButton.layer.shadowOffset = CGSize(width: 0, height: 20)
    fabButton.layer.shadowRadius = 25
    
    fabButton.addTarget(self, action: #selector(buttonTouchDown), for: .touchDown)
    fabButton.addTarget(self, action: #selector(buttonTouchUp), for: [.touchUpInside, .touchUpOutside, .touchCancel])
    
    viewController.view.addSubview(fabButton)
    
    NSLayoutConstraint.activate([
        fabButton.trailingAnchor.constraint(equalTo: viewController.view.safeAreaLayoutGuide.trailingAnchor, constant: -16),
        fabButton.bottomAnchor.constraint(equalTo: viewController.view.safeAreaLayoutGuide.bottomAnchor, constant: -20),
        fabButton.widthAnchor.constraint(equalToConstant: 44),
        fabButton.heightAnchor.constraint(equalToConstant: 44)
    ])
    
    viewController.view.bringSubviewToFront(fabButton)
}

@objc private func buttonTouchDown() {
    UIView.animate(withDuration: 0.2, delay: 0, options: [.curveEaseOut], animations: {
        self.fabButton.transform = CGAffineTransform(scaleX: 0.9, y: 0.9)
    })
}

@objc private func buttonTouchUp() {
    UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.5, options: [.curveEaseInOut], animations: {
        self.fabButton.transform = .identity
    })
}

private func performAction() {
    print("FAB tapped!")
    // Reply to the connect event, which triggers the tap() callback in JS
    reply(to: "connect")
}

private func removeFab(from viewController: UIViewController) {
    fabButton?.removeFromSuperview()
    fabButton = nil
}

}

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

export default class extends BridgeComponent {
static component = "fab"
static values = { url: String }

connect() {
    console.log("FAB bridge connecting...")

    super.connect()

    // Send connect and provide callback for the reply
    this.send("connect", {}, (message) => {
        console.log("FAB was tapped from native!")
        this.tap()
    })
}

disconnect() {
    this.send("disconnect")
    super.disconnect()
}

tap() {
    console.log("Navigating...")
    const url = this.urlValue || "/"

    console.log("URL:", url)
    window.Turbo.visit(url)
}

}

  <% if turbo_native_app? %>
    <div data-controller="bridge--fab"
         data-bridge--fab-url-value="<%= native_user_brackets_pick_path %>">
    </div>
  <% end %>

[studeba]

I was able to get this working for android.

Since I'm not a mobile developer, I'm SURE, improvements could be made to the code and options could be added to customize colors, placement, size, etc...

package com.varsityfanatics.com.varsityfanatics.bridge

import dev.hotwire.core.bridge.BridgeComponent
import dev.hotwire.core.bridge.BridgeDelegate
import dev.hotwire.core.bridge.Message
import dev.hotwire.navigation.destinations.HotwireDestination
import android.util.Log
import android.view.Gravity
import android.view.ViewGroup
import android.widget.FrameLayout
import androidx.fragment.app.Fragment
import com.google.android.material.floatingactionbutton.FloatingActionButton

class FabComponent(
name: String,
private val delegate: BridgeDelegate
) : BridgeComponent(name, delegate) {

private var fabButton: FloatingActionButton? = null

override fun onReceive(message: Message) {
    Log.w("FabComponent", "📱 FAB received message: ${message.event}")

    when (message.event) {
        "connect" -> handleConnect()
        "disconnect" -> handleDisconnect()
    }
}

private fun handleConnect() {
    val fragment = delegate.destination as? Fragment ?: return
    val rootView = fragment.view as? ViewGroup ?: return

    removeExistingFab(rootView)

    val context = rootView.context
    val density = context.resources.displayMetrics.density
    val marginPx = (16 * density).toInt()

    fabButton = FloatingActionButton(context).apply {
        size = FloatingActionButton.SIZE_MINI
        setImageResource(android.R.drawable.ic_input_add)
        backgroundTintList = android.content.res.ColorStateList.valueOf(
            android.graphics.Color.parseColor("#EF4444")
        )
        setOnClickListener { performAction() }

        // Determine LayoutParams based on what the rootView actually is
        layoutParams = when (rootView) {
            is androidx.constraintlayout.widget.ConstraintLayout -> {
                androidx.constraintlayout.widget.ConstraintLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                ).apply {
                    // Anchor to the bottom-right of the parent
                    endToEnd = androidx.constraintlayout.widget.ConstraintLayout.LayoutParams.PARENT_ID
                    bottomToBottom = androidx.constraintlayout.widget.ConstraintLayout.LayoutParams.PARENT_ID
                    setMargins(0, 0, marginPx, marginPx)
                }
            }
            else -> {
                // Fallback to FrameLayout params which work for most Turbo containers
                FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
                ).apply {
                    gravity = Gravity.BOTTOM or Gravity.END
                    setMargins(0, 0, marginPx, marginPx)
                }
            }
        }
    }

    rootView.addView(fabButton)
}

private fun removeExistingFab(rootView: ViewGroup) {
    fabButton?.let {
        rootView.removeView(it)
        fabButton = null
    }
}

private fun performAction() {
    Log.w("FabComponent", "FAB performAction - replying to connect")

    replyTo("connect")
}

private fun handleDisconnect() {
    Log.w("FabComponent", "FAB disconnect called")

    fabButton?.let { btn ->
        (btn.parent as? ViewGroup)?.removeView(btn)
    }
    fabButton = null
}

}