capacitor-native-tabbar 0.0.1

package/ios/Sources/CapTabbarPlugin/CapTabbar.swift

@@ -0,0 +1,246 @@
+import Foundation
+import UIKit
+import Capacitor
+import WebKit
+
+@objc public class CapTabbar: NSObject {
+    private var tabBar: UITabBar?
+    private var tabItems: [TabItemData] = []
+    private var selectedId: String = ""
+    private weak var parentView: UIView?
+    private var onTabSelected: ((String) -> Void)?
+    private var heightConstraint: NSLayoutConstraint?
+    private var baseContentInset: UIEdgeInsets = .zero
+    private var baseIndicatorInset: UIEdgeInsets = .zero
+    private var insetsCaptured = false
+
+    struct TabItemData {
+        let id: String
+        let label: String
+        let base64Icon: String?
+        let base64ActiveIcon: String?
+    }
+
+    func setTabSelectedCallback(_ callback: @escaping (String) -> Void) {
+        onTabSelected = callback
+    }
+
+    func decodeBase64ToImage(_ base64: String?) -> UIImage? {
+        guard let base64 = base64, !base64.isEmpty else { return nil }
+        let cleaned = base64.trimmingCharacters(in: .whitespacesAndNewlines)
+        let data: Data?
+        if cleaned.hasPrefix("data:") {
+            data = URL(string: cleaned).flatMap { try? Data(contentsOf: $0) }
+        } else {
+            let base64Part = cleaned.contains(",") ? String(cleaned.split(separator: ",").last ?? "") : cleaned
+            data = Data(base64Encoded: base64Part, options: .ignoreUnknownCharacters)
+        }
+        guard let imageData = data, let image = UIImage(data: imageData) else { return nil }
+        if image.size.width < 2 || image.size.height < 2 { return nil }
+        return image.withRenderingMode(.alwaysOriginal)
+    }
+
+    private func placeholderImage() -> UIImage {
+        return (UIImage(systemName: "photo.badge.exclamationmark") ?? UIImage(systemName: "circle.fill") ?? UIImage())
+            .withRenderingMode(.alwaysTemplate)
+    }
+
+    private func tabBarHeight() -> CGFloat {
+        guard let parent = parentView else { return 49 }
+        return 49 + parent.safeAreaInsets.bottom
+    }
+
+    private func uiColorFromHex(_ hex: String?) -> UIColor? {
+        guard var hex = hex?.trimmingCharacters(in: .whitespacesAndNewlines), !hex.isEmpty else { return nil }
+        if hex.hasPrefix("#") { hex = String(hex.dropFirst()) }
+        var rgb: UInt64 = 0
+        guard Scanner(string: hex).scanHexInt64(&rgb) else { return nil }
+        let r, g, b, a: CGFloat
+        if hex.count == 6 {
+            r = CGFloat((rgb >> 16) & 0xff) / 255
+            g = CGFloat((rgb >> 8) & 0xff) / 255
+            b = CGFloat(rgb & 0xff) / 255
+            a = 1
+        } else if hex.count == 8 {
+            r = CGFloat((rgb >> 24) & 0xff) / 255
+            g = CGFloat((rgb >> 16) & 0xff) / 255
+            b = CGFloat((rgb >> 8) & 0xff) / 255
+            a = CGFloat(rgb & 0xff) / 255
+        } else { return nil }
+        return UIColor(red: r, green: g, blue: b, alpha: a)
+    }
+
+    func show(parent: UIView, tabs: [TabItemData], selectedId: String, labelColor: String? = nil, labelColorActive: String? = nil) {
+        self.parentView = parent
+        self.tabItems = tabs
+        self.selectedId = selectedId
+
+        removeTabBar()
+
+        let tabBar = UITabBar()
+        tabBar.delegate = self
+        tabBar.translatesAutoresizingMaskIntoConstraints = false
+
+        let appearance = UITabBarAppearance()
+        appearance.configureWithDefaultBackground()
+        let normalColor = uiColorFromHex(labelColor) ?? UIColor.label
+        let selectedColor = uiColorFromHex(labelColorActive) ?? UIColor.systemBlue
+        appearance.stackedLayoutAppearance.normal.titleTextAttributes = [.foregroundColor: normalColor]
+        appearance.stackedLayoutAppearance.selected.titleTextAttributes = [.foregroundColor: selectedColor]
+        tabBar.standardAppearance = appearance
+        if #available(iOS 15.0, *) {
+            tabBar.scrollEdgeAppearance = appearance
+        }
+        self.tabBar = tabBar
+
+        var items: [UITabBarItem] = []
+        for (index, tab) in tabs.enumerated() {
+            let (image, selectedImage) = imageForTab(tab, isSelected: tab.id == selectedId)
+            let item = UITabBarItem(title: tab.label, image: image, selectedImage: selectedImage)
+            item.tag = index
+            items.append(item)
+        }
+        tabBar.setItems(items, animated: false)
+
+        let selectedIndex = tabs.firstIndex(where: { $0.id == selectedId }) ?? 0
+        tabBar.selectedItem = items[selectedIndex]
+
+        parent.addSubview(tabBar)
+        let height = tabBarHeight()
+        heightConstraint = tabBar.heightAnchor.constraint(equalToConstant: height)
+        NSLayoutConstraint.activate([
+            tabBar.leadingAnchor.constraint(equalTo: parent.leadingAnchor),
+            tabBar.trailingAnchor.constraint(equalTo: parent.trailingAnchor),
+            tabBar.bottomAnchor.constraint(equalTo: parent.bottomAnchor),
+            heightConstraint!
+        ])
+
+        captureBaseInsetsIfNeeded(from: parent)
+        applyWebViewInsets(to: parent)
+    }
+
+    func hide() {
+        guard let parent = parentView else { return removeTabBar() }
+        removeWebViewInsets(from: parent)
+        removeTabBar()
+    }
+
+    func setSelectedTab(tabId: String) {
+        guard let index = tabItems.firstIndex(where: { $0.id == tabId }) else { return }
+        guard selectedId != tabId else { return }
+        selectedId = tabId
+        tabBar?.selectedItem = tabBar?.items?[index]
+        updateItemImages()
+    }
+
+    func getState() -> (visible: Bool, activeTabId: String) {
+        let visible = tabBar != nil
+        return (visible, visible ? selectedId : "")
+    }
+
+    private func imageFromBundle(_ name: String) -> UIImage? {
+        UIImage(named: name)
+    }
+
+    private func imageForTab(_ tab: TabItemData, isSelected: Bool) -> (UIImage, UIImage) {
+        let inactiveB64 = tab.base64Icon
+        let activeB64 = tab.base64ActiveIcon ?? tab.base64Icon
+        if let iconStr = inactiveB64, let img = decodeBase64ToImage(iconStr) {
+            let activeImg = (activeB64 != nil ? decodeBase64ToImage(activeB64 ?? "") : nil) ?? img
+            return (resizeForTabBar(img) ?? placeholderImage(), resizeForTabBar(activeImg) ?? placeholderImage())
+        }
+        let bundleInactive = imageFromBundle(tab.id) ?? imageFromBundle(tab.id.replacingOccurrences(of: " ", with: "_").replacingOccurrences(of: "-", with: "_"))
+        let bundleActive = imageFromBundle("\(tab.id)_active") ?? imageFromBundle("\(tab.id)_active".replacingOccurrences(of: " ", with: "_").replacingOccurrences(of: "-", with: "_"))
+        return (
+            resizeForTabBar(bundleInactive) ?? placeholderImage(),
+            resizeForTabBar(bundleActive ?? bundleInactive) ?? placeholderImage()
+        )
+    }
+
+    private func resizeForTabBar(_ image: UIImage?) -> UIImage? {
+        guard let image = image else { return nil }
+        let maxSize: CGFloat = 25
+        let size = image.size
+        guard size.width > maxSize || size.height > maxSize else { return image.withRenderingMode(.alwaysOriginal) }
+        let scale = min(maxSize / size.width, maxSize / size.height)
+        let newSize = CGSize(width: size.width * scale, height: size.height * scale)
+        let renderer = UIGraphicsImageRenderer(size: newSize)
+        let resized = renderer.image { _ in image.draw(in: CGRect(origin: .zero, size: newSize)) }
+        return resized.withRenderingMode(.alwaysOriginal)
+    }
+
+    private func updateItemImages() {
+        guard let tabBar = tabBar, let items = tabBar.items else { return }
+        for (index, tab) in tabItems.enumerated() where index < items.count {
+            let (image, selectedImage) = imageForTab(tab, isSelected: tab.id == selectedId)
+            items[index].image = image
+            items[index].selectedImage = selectedImage
+        }
+    }
+
+    private func removeTabBar() {
+        tabBar?.removeFromSuperview()
+        tabBar = nil
+    }
+
+    private func webViewScrollView(from view: UIView) -> UIScrollView? {
+        (view as? WKWebView)?.scrollView
+    }
+
+    private func captureBaseInsetsIfNeeded(from parent: UIView) {
+        guard !insetsCaptured, let scrollView = webViewScrollView(from: parent) else { return }
+        baseContentInset = scrollView.contentInset
+        baseIndicatorInset = scrollView.verticalScrollIndicatorInsets
+        insetsCaptured = true
+    }
+
+    private func applyWebViewInsets(to parent: UIView) {
+        guard let scrollView = webViewScrollView(from: parent) else { return }
+        captureBaseInsetsIfNeeded(from: parent)
+        let extra = tabBarHeight()
+        var content = baseContentInset
+        content.bottom = max(content.bottom, baseContentInset.bottom + extra)
+        var indicators = baseIndicatorInset
+        indicators.bottom = max(indicators.bottom, baseIndicatorInset.bottom + extra)
+        scrollView.contentInset = content
+        scrollView.verticalScrollIndicatorInsets = indicators
+    }
+
+    private func removeWebViewInsets(from parent: UIView) {
+        guard let scrollView = webViewScrollView(from: parent), insetsCaptured else { return }
+        scrollView.contentInset = baseContentInset
+        scrollView.verticalScrollIndicatorInsets = baseIndicatorInset
+    }
+
+    static func parseTabs(from array: [JSValue]) -> [TabItemData] {
+        return array.compactMap { value -> TabItemData? in
+            guard let dict = value as? JSObject,
+                  let id = parseString(dict["id"]),
+                  let label = parseString(dict["label"]) else { return nil }
+            let base64Icon = parseString(dict["base64_icon"])
+            let base64ActiveIcon = parseString(dict["base64_active_icon"]) ?? base64Icon
+            guard !id.isEmpty else { return nil }
+            return TabItemData(id: id, label: label, base64Icon: base64Icon, base64ActiveIcon: base64ActiveIcon)
+        }
+    }
+
+    private static func parseString(_ value: JSValue?) -> String? {
+        guard let value = value else { return nil }
+        if let s = value as? String { return s }
+        if let ns = value as? NSString { return String(ns) }
+        return nil
+    }
+}
+
+extension CapTabbar: UITabBarDelegate {
+    public func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {
+        let index = item.tag
+        guard index < tabItems.count else { return }
+        let tab = tabItems[index]
+        if selectedId != tab.id {
+            selectedId = tab.id
+            updateItemImages()
+            onTabSelected?(tab.id)
+        }
+    }
+}

package/ios/Sources/CapTabbarPlugin/CapTabbarPlugin.swift

@@ -0,0 +1,75 @@
+import Foundation
+import Capacitor
+import UIKit
+
+@objc(CapTabbarPlugin)
+public class CapTabbarPlugin: CAPPlugin, CAPBridgedPlugin {
+    public let identifier = "CapTabbarPlugin"
+    public let jsName = "CapTabbar"
+    public let pluginMethods: [CAPPluginMethod] = [
+        CAPPluginMethod(name: "show", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "hide", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "setSelectedTab", returnType: CAPPluginReturnPromise),
+        CAPPluginMethod(name: "getState", returnType: CAPPluginReturnPromise)
+    ]
+    private let implementation = CapTabbar()
+
+    public override func load() {
+        implementation.setTabSelectedCallback { [weak self] tabId in
+            self?.notifyListeners("tabChange", data: ["tabId": tabId])
+        }
+    }
+
+    @objc func show(_ call: CAPPluginCall) {
+        guard let tabsArray = call.getArray("tabs"),
+              let selectedId = call.getString("selectedId") else {
+            call.reject("tabs and selectedId are required")
+            return
+        }
+
+        let tabs = CapTabbar.parseTabs(from: tabsArray)
+        guard !tabs.isEmpty else {
+            call.reject("At least one tab is required")
+            return
+        }
+
+        let labelColor = call.getString("label_color")
+        let labelColorActive = call.getString("label_color_active")
+        DispatchQueue.main.async { [weak self] in
+            guard let self = self,
+                  let viewController = self.bridge?.viewController,
+                  let view = viewController.view else {
+                call.reject("Could not find view to attach tab bar")
+                return
+            }
+            self.implementation.show(parent: view, tabs: tabs, selectedId: selectedId, labelColor: labelColor, labelColorActive: labelColorActive)
+            call.resolve()
+        }
+    }
+
+    @objc func hide(_ call: CAPPluginCall) {
+        DispatchQueue.main.async { [weak self] in
+            self?.implementation.hide()
+            call.resolve()
+        }
+    }
+
+    @objc func setSelectedTab(_ call: CAPPluginCall) {
+        guard let tabId = call.getString("tabId") else {
+            call.reject("tabId is required")
+            return
+        }
+        DispatchQueue.main.async { [weak self] in
+            self?.implementation.setSelectedTab(tabId: tabId)
+            call.resolve()
+        }
+    }
+
+    @objc func getState(_ call: CAPPluginCall) {
+        let state = implementation.getState()
+        call.resolve([
+            "visible": state.visible,
+            "activeTabId": state.activeTabId
+        ])
+    }
+}

package/ios/Tests/CapTabbarPluginTests/CapTabbarTests.swift

@@ -0,0 +1,13 @@
+import XCTest
+@testable import CapTabbarPlugin
+
+class CapTabbarTests: XCTestCase {
+    func testParseTabs() {
+        let tabs = CapTabbar.parseTabs(from: [
+            ["id": "home", "label": "Home"]
+        ])
+        XCTAssertEqual(tabs.count, 1)
+        XCTAssertEqual(tabs[0].id, "home")
+        XCTAssertEqual(tabs[0].label, "Home")
+    }
+}

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "capacitor-native-tabbar",
+  "version": "0.0.1",
+  "description": "Native tab bar for Capacitor apps — UITabBar on iOS, BottomNavigationView on Android, overlays the WebView",
+  "main": "dist/plugin.cjs.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "unpkg": "dist/plugin.js",
+  "files": [
+    "android/src/main/",
+    "android/build.gradle",
+    "dist/",
+    "ios/Sources",
+    "ios/Tests",
+    "Package.swift",
+    "CapacitorNativeTabbar.podspec"
+  ],
+  "author": "Anton Seagull",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AntonSeagull/capacitor-native-tabbar.git"
+  },
+  "bugs": {
+    "url": "https://github.com/AntonSeagull/capacitor-native-tabbar/issues"
+  },
+  "keywords": [
+    "capacitor",
+    "capacitor-plugin",
+    "ionic",
+    "native",
+    "tabbar",
+    "tab-bar",
+    "bottom-navigation",
+    "ios",
+    "android"
+  ],
+  "scripts": {
+    "verify": "npm run verify:ios && npm run verify:android && npm run verify:web",
+    "verify:ios": "xcodebuild -scheme CapacitorNativeTabbar -destination generic/platform=iOS",
+    "verify:android": "cd android && ./gradlew clean build test && cd ..",
+    "verify:web": "npm run build",
+    "lint": "npm run eslint && npm run prettier -- --check && npm run swiftlint -- lint",
+    "fmt": "npm run eslint -- --fix && npm run prettier -- --write && npm run swiftlint -- --fix --format",
+    "eslint": "eslint . --ext ts",
+    "prettier": "prettier \"**/*.{css,html,ts,js,java}\" --plugin=prettier-plugin-java",
+    "swiftlint": "node-swiftlint",
+    "docgen": "docgen --api CapTabbarPlugin --output-readme README.md --output-json dist/docs.json",
+    "build": "npm run clean && npm run docgen && tsc && rollup -c rollup.config.mjs",
+    "clean": "rimraf ./dist",
+    "watch": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@capacitor/android": "^8.0.0",
+    "@capacitor/core": "^8.0.0",
+    "@capacitor/docgen": "^0.3.1",
+    "@capacitor/ios": "^8.0.0",
+    "@ionic/eslint-config": "^0.4.0",
+    "@ionic/prettier-config": "^4.0.0",
+    "@ionic/swiftlint-config": "^2.0.0",
+    "eslint": "^8.57.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-java": "^2.7.7",
+    "rimraf": "^6.1.0",
+    "rollup": "^4.53.2",
+    "swiftlint": "^2.0.0",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "@capacitor/core": ">=8.0.0"
+  },
+  "prettier": "@ionic/prettier-config",
+  "swiftlint": "@ionic/swiftlint-config",
+  "eslintConfig": {
+    "extends": "@ionic/eslint-config/recommended"
+  },
+  "capacitor": {
+    "ios": {
+      "src": "ios"
+    },
+    "android": {
+      "src": "android"
+    }
+  }
+}