capacitor-native-tabbar 0.0.1

package/CapacitorNativeTabbar.podspec

@@ -0,0 +1,17 @@
+require 'json'
+
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name = 'CapacitorNativeTabbar'
+  s.version = package['version']
+  s.summary = package['description']
+  s.license = package['license']
+  s.homepage = package['repository']['url']
+  s.author = package['author']
+  s.source = { :git => package['repository']['url'], :tag => s.version.to_s }
+  s.source_files = 'ios/Sources/**/*.{swift,h,m,c,cc,mm,cpp}'
+  s.ios.deployment_target = '15.0'
+  s.dependency 'Capacitor'
+  s.swift_version = '5.1'
+end

package/Package.swift

@@ -0,0 +1,28 @@
+// swift-tools-version: 5.9
+import PackageDescription
+
+let package = Package(
+    name: "CapacitorNativeTabbar",
+    platforms: [.iOS(.v15)],
+    products: [
+        .library(
+            name: "CapacitorNativeTabbar",
+            targets: ["CapTabbarPlugin"])
+    ],
+    dependencies: [
+        .package(url: "https://github.com/ionic-team/capacitor-swift-pm.git", from: "8.0.0")
+    ],
+    targets: [
+        .target(
+            name: "CapTabbarPlugin",
+            dependencies: [
+                .product(name: "Capacitor", package: "capacitor-swift-pm"),
+                .product(name: "Cordova", package: "capacitor-swift-pm")
+            ],
+            path: "ios/Sources/CapTabbarPlugin"),
+        .testTarget(
+            name: "CapTabbarPluginTests",
+            dependencies: ["CapTabbarPlugin"],
+            path: "ios/Tests/CapTabbarPluginTests")
+    ]
+)

package/README.md

@@ -0,0 +1,262 @@
+# Capacitor Native Tab Bar
+
+[Русский](./README.ru.md)
+
+<p align="center">
+  <img src="demo/demo.gif" alt="Demo" width="320" />
+</p>
+
+<p align="center">
+  Native tab bar for Capacitor apps — shows a bottom tab bar over the WebView on iOS and Android.
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/npm/v/capacitor-native-tabbar.svg" alt="npm version" />
+  <img src="https://img.shields.io/npm/dm/capacitor-native-tabbar.svg" alt="npm downloads" />
+  <img src="https://img.shields.io/npm/l/capacitor-native-tabbar.svg" alt="license" />
+</p>
+
+---
+
+## Features
+
+- **Native UI** — Uses `UITabBar` on iOS and `BottomNavigationView` on Android
+- **Flexible icons** — Bundle assets (`{id}.png`, `{id}_active.png`) or base64
+- **Custom colors** — Label colors for active/inactive states
+- **Safe area** — Respects bottom safe area (notch, gesture bar)
+- **Web fallback** — Works in browser for development
+
+## Installation
+
+```bash
+npm install capacitor-native-tabbar
+# or
+yarn add capacitor-native-tabbar
+```
+
+Sync native projects:
+
+```bash
+npx cap sync
+```
+
+## Quick Start
+
+```typescript
+import { CapTabbar } from 'capacitor-native-tabbar';
+
+// Show tab bar
+CapTabbar.show({
+  tabs: [
+    { id: 'home', label: 'Home' },
+    { id: 'search', label: 'Search' },
+    { id: 'profile', label: 'Profile' },
+  ],
+  selectedId: 'home',
+  label_color: '#000000',
+  label_color_active: '#007AFF',
+});
+
+// Listen for tab changes
+CapTabbar.addListener('tabChange', (event) => {
+  console.log('Selected tab:', event.tabId);
+});
+
+// Get current state
+const { visible, activeTabId } = await CapTabbar.getState();
+
+// Hide / show
+CapTabbar.hide();
+CapTabbar.show({ tabs, selectedId: activeTabId });
+```
+
+## Icons
+
+Two options (base64 takes priority):
+
+### Option 1: Base64
+
+```typescript
+{
+  id: 'fav',
+  label: 'Favorites',
+  base64_icon: 'iVBORw0KGgo...',
+  base64_active_icon: 'iVBORw0KGgo...',
+}
+```
+
+### Option 2: Native resources
+
+Place icons in the native project by tab `id`:
+
+| Tab (id) | Inactive       | Active              |
+|----------|----------------|---------------------|
+| home     | `home.png`     | `home_active.png`   |
+
+**Android:** `android/app/src/main/res/drawable/`  
+**iOS:** `ios/App/App/Assets.xcassets/` — Image Sets `home`, `home_active`
+
+Supports PNG and vector drawable (`.xml`) on Android. Use underscores for spaces/dashes in filenames. Missing icons show a placeholder.
+
+## Label colors
+
+```typescript
+CapTabbar.show({
+  tabs,
+  selectedId: 'home',
+  label_color: '#666666',        // inactive
+  label_color_active: '#007AFF', // active
+});
+```
+
+## API
+
+<docgen-index>
+
+* [`show(...)`](#show)
+* [`hide()`](#hide)
+* [`setSelectedTab(...)`](#setselectedtab)
+* [`getState()`](#getstate)
+* [`addListener('tabChange', ...)`](#addlistenertabchange-)
+* [Interfaces](#interfaces)
+
+</docgen-index>
+
+<docgen-api>
+<!--Update the source file JSDoc comments and rerun docgen to update the docs below-->
+
+### show(...)
+
+```typescript
+show(options: ShowOptions) => Promise<void>
+```
+
+Show the native tab bar with the given configuration
+
+| Param         | Type                                                |
+| ------------- | --------------------------------------------------- |
+| **`options`** | <code><a href="#showoptions">ShowOptions</a></code> |
+
+--------------------
+
+
+### hide()
+
+```typescript
+hide() => Promise<void>
+```
+
+Hide the tab bar
+
+--------------------
+
+
+### setSelectedTab(...)
+
+```typescript
+setSelectedTab(options: SetSelectedTabOptions) => Promise<void>
+```
+
+Programmatically set the selected tab
+
+| Param         | Type                                                                    |
+| ------------- | ----------------------------------------------------------------------- |
+| **`options`** | <code><a href="#setselectedtaboptions">SetSelectedTabOptions</a></code> |
+
+--------------------
+
+
+### getState()
+
+```typescript
+getState() => Promise<GetStateResult>
+```
+
+Get current state: visible and active tab id
+
+**Returns:** <code>Promise&lt;<a href="#getstateresult">GetStateResult</a>&gt;</code>
+
+--------------------
+
+
+### addListener('tabChange', ...)
+
+```typescript
+addListener(eventName: 'tabChange', listenerFunc: (event: TabChangeEvent) => void) => Promise<{ remove: () => Promise<void>; }>
+```
+
+Add listener for tab change events (when user taps a tab)
+
+| Param              | Type                                                                          |
+| ------------------ | ----------------------------------------------------------------------------- |
+| **`eventName`**    | <code>'tabChange'</code>                                                      |
+| **`listenerFunc`** | <code>(event: <a href="#tabchangeevent">TabChangeEvent</a>) =&gt; void</code> |
+
+**Returns:** <code>Promise&lt;{ remove: () =&gt; Promise&lt;void&gt;; }&gt;</code>
+
+--------------------
+
+
+### Interfaces
+
+
+#### ShowOptions
+
+Icons: 2 variants (base64 has priority over bundle)
+
+1) **Base64** – if `base64_icon` / `base64_active_icon` are set, they are used.
+
+2) **Bundle assets** – if base64 not set, icons are loaded from native resources:
+
+**Android** – `android/app/src/main/res/drawable/`:
+  - `{id}.png` or `{id}.xml` – inactive icon
+  - `{id}_active.png` or `{id}_active.xml` – active icon
+
+**iOS** – Assets.xcassets: Image Set `{id}` and `{id}_active`.
+
+If an icon is missing, a placeholder is shown.
+
+| Prop                     | Type                   | Description                                                         |
+| ------------------------ | ---------------------- | ------------------------------------------------------------------- |
+| **`tabs`**               | <code>TabItem[]</code> | Array of tab items to display                                       |
+| **`selectedId`**         | <code>string</code>    | ID of the initially selected tab                                    |
+| **`label_color`**        | <code>string</code>    | Label color for inactive tabs (hex, e.g. "#000000"). Default: black |
+| **`label_color_active`** | <code>string</code>    | Label color for selected tab (hex, e.g. "#007AFF"). Default: blue   |
+
+
+#### TabItem
+
+| Prop                     | Type                | Description                                                                      |
+| ------------------------ | ------------------- | -------------------------------------------------------------------------------- |
+| **`id`**                 | <code>string</code> | Unique identifier for the tab. Used for bundle assets: {id}.png, {id}_active.png |
+| **`label`**              | <code>string</code> | Display label                                                                    |
+| **`base64_icon`**        | <code>string</code> | Base64-encoded image for inactive state. If set, overrides bundle assets         |
+| **`base64_active_icon`** | <code>string</code> | Base64-encoded image for active/selected state. If set, overrides bundle assets  |
+
+
+#### SetSelectedTabOptions
+
+| Prop        | Type                | Description             |
+| ----------- | ------------------- | ----------------------- |
+| **`tabId`** | <code>string</code> | ID of the tab to select |
+
+
+#### GetStateResult
+
+| Prop              | Type                 | Description                                       |
+| ----------------- | -------------------- | ------------------------------------------------- |
+| **`visible`**     | <code>boolean</code> | Whether the tab bar is currently shown            |
+| **`activeTabId`** | <code>string</code>  | ID of the active/selected tab (empty when hidden) |
+
+
+#### TabChangeEvent
+
+| Prop        | Type                | Description                  |
+| ----------- | ------------------- | ---------------------------- |
+| **`tabId`** | <code>string</code> | ID of the newly selected tab |
+
+</docgen-api>
+
+## License
+
+MIT © Anton Seagull

package/README.ru.md

@@ -0,0 +1,168 @@
+# Capacitor Native Tab Bar
+
+[English](./README.md)
+
+<p align="center">
+  <img src="demo/demo.gif" alt="Демо" width="320" />
+</p>
+
+<p align="center">
+  Нативный таб-бар для Capacitor — нижняя панель вкладок поверх WebView на iOS и Android.
+</p>
+
+<p align="center">
+  <img src="https://img.shields.io/npm/v/capacitor-native-tabbar.svg" alt="npm version" />
+  <img src="https://img.shields.io/npm/dm/capacitor-native-tabbar.svg" alt="npm downloads" />
+  <img src="https://img.shields.io/npm/l/capacitor-native-tabbar.svg" alt="license" />
+</p>
+
+---
+
+## Возможности
+
+- **Нативный UI** — `UITabBar` на iOS, `BottomNavigationView` на Android
+- **Гибкие иконки** — из ресурсов (`{id}.png`, `{id}_active.png`) или base64
+- **Цвета** — цвета лейбла для активного/неактивного состояния
+- **Safe area** — учитывает нижнюю безопасную зону (вырез, жесты)
+- **Web fallback** — работает в браузере при разработке
+
+## Установка
+
+```bash
+npm install capacitor-native-tabbar
+# или
+yarn add capacitor-native-tabbar
+```
+
+Синхронизация нативных проектов:
+
+```bash
+npx cap sync
+```
+
+## Быстрый старт
+
+```typescript
+import { CapTabbar } from 'capacitor-native-tabbar';
+
+// Показать таб-бар
+CapTabbar.show({
+  tabs: [
+    { id: 'home', label: 'Главная' },
+    { id: 'search', label: 'Поиск' },
+    { id: 'profile', label: 'Профиль' },
+  ],
+  selectedId: 'home',
+  label_color: '#000000',
+  label_color_active: '#007AFF',
+});
+
+// Слушать смену вкладки
+CapTabbar.addListener('tabChange', (event) => {
+  console.log('Выбрана вкладка:', event.tabId);
+});
+
+// Получить текущее состояние
+const { visible, activeTabId } = await CapTabbar.getState();
+
+// Скрыть / показать
+CapTabbar.hide();
+CapTabbar.show({ tabs, selectedId: activeTabId });
+```
+
+## Иконки
+
+Два варианта (base64 имеет приоритет):
+
+### Вариант 1: Base64
+
+```typescript
+{
+  id: 'fav',
+  label: 'Избранное',
+  base64_icon: 'iVBORw0KGgo...',
+  base64_active_icon: 'iVBORw0KGgo...',
+}
+```
+
+### Вариант 2: Ресурсы нативного проекта
+
+Положите иконки по `id` таба:
+
+| Таб (id) | Обычная     | Активная         |
+|----------|-------------|------------------|
+| home     | `home.png`  | `home_active.png`|
+
+**Android:** `android/app/src/main/res/drawable/`  
+**iOS:** `ios/App/App/Assets.xcassets/` — Image Sets `home`, `home_active`
+
+Поддерживаются PNG и vector drawable (`.xml`) на Android. Пробелы и дефисы в `id` заменяйте подчёркиванием в имени файла. При отсутствии иконки показывается заглушка.
+
+## Цвета лейбла
+
+```typescript
+CapTabbar.show({
+  tabs,
+  selectedId: 'home',
+  label_color: '#666666',        // неактивный
+  label_color_active: '#007AFF', // активный
+});
+```
+
+## API
+
+### show(options)
+
+Показать таб-бар с заданной конфигурацией.
+
+```typescript
+show(options: ShowOptions) => Promise<void>
+```
+
+### hide()
+
+Скрыть таб-бар.
+
+```typescript
+hide() => Promise<void>
+```
+
+### setSelectedTab(options)
+
+Программно переключить вкладку.
+
+```typescript
+setSelectedTab(options: SetSelectedTabOptions) => Promise<void>
+```
+
+### getState()
+
+Вернуть текущее состояние: виден ли таб-бар и id активной вкладки.
+
+```typescript
+getState() => Promise<{ visible: boolean, activeTabId: string }>
+```
+
+### addListener('tabChange', listenerFunc)
+
+Подписка на смену вкладки при нажатии пользователя.
+
+```typescript
+addListener(eventName: 'tabChange', listenerFunc: (event: TabChangeEvent) => void) => Promise<{ remove: () => Promise<void> }>
+```
+
+## Интерфейсы
+
+**ShowOptions:** `tabs`, `selectedId`, `label_color?`, `label_color_active?`  
+
+**TabItem:** `id`, `label`, `base64_icon?`, `base64_active_icon?`  
+
+**SetSelectedTabOptions:** `tabId`  
+
+**GetStateResult:** `visible`, `activeTabId`  
+
+**TabChangeEvent:** `tabId`
+
+## Лицензия
+
+MIT © Anton Seagull

package/android/build.gradle

@@ -0,0 +1,68 @@
+ext {
+    junitVersion = project.hasProperty('junitVersion') ? rootProject.ext.junitVersion : '4.13.2'
+    androidxAppCompatVersion = project.hasProperty('androidxAppCompatVersion') ? rootProject.ext.androidxAppCompatVersion : '1.7.1'
+    androidxJunitVersion = project.hasProperty('androidxJunitVersion') ? rootProject.ext.androidxJunitVersion : '1.3.0'
+    androidxEspressoCoreVersion = project.hasProperty('androidxEspressoCoreVersion') ? rootProject.ext.androidxEspressoCoreVersion : '3.7.0'
+    androidxCoreKTXVersion = project.hasProperty('androidxCoreKTXVersion') ? rootProject.ext.androidxCoreKTXVersion : '1.17.0'
+}
+
+buildscript {
+    ext.kotlin_version = project.hasProperty("kotlin_version") ? rootProject.ext.kotlin_version : '2.2.20'
+    repositories {
+        google()
+        mavenCentral()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:8.13.0'
+        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+    }
+}
+
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+
+android {
+    namespace = "com.antonseagull.cap.tabbar"
+    compileSdk = project.hasProperty('compileSdkVersion') ? rootProject.ext.compileSdkVersion : 36
+    defaultConfig {
+        minSdkVersion project.hasProperty('minSdkVersion') ? rootProject.ext.minSdkVersion : 24
+        targetSdkVersion project.hasProperty('targetSdkVersion') ? rootProject.ext.targetSdkVersion : 36
+        versionCode 1
+        versionName "1.0"
+        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
+        }
+    }
+    lintOptions {
+        abortOnError = false
+    }
+    compileOptions {
+        sourceCompatibility JavaVersion.VERSION_21
+        targetCompatibility JavaVersion.VERSION_21
+    }
+}
+
+kotlin {
+    jvmToolchain(21)
+}
+
+repositories {
+    google()
+    mavenCentral()
+}
+
+
+dependencies {
+    implementation fileTree(dir: 'libs', include: ['*.jar'])
+    implementation project(':capacitor-android')
+    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
+    implementation "androidx.core:core-ktx:$androidxCoreKTXVersion"
+    implementation "com.google.android.material:material:1.11.0"
+    testImplementation "junit:junit:$junitVersion"
+    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
+    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>