@27appstudio/react-native-bottom-toolbar 0.0.0-stage → 0.1.1

package/BottomToolbar.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "BottomToolbar"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/27AppStudio/react-native-bottom-toolbar.git", :tag => "v#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 27AppStudio
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,131 @@
-# Temporary Holding Version
+# @27appstudio/react-native-bottom-toolbar
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+The platform's own bottom toolbar for React Native screens:
+
+- **iOS**: UIKit's navigation-controller toolbar, so you get what the system draws. On iOS 26 that's Liquid Glass (a lone item becomes a glass circle, like the bin in Photos), and earlier versions get the classic toolbar. Your app follows each iOS redesign without changes.
+- **Android**: Material 3 components. One button shows as a FAB; two or more show as the M3 Expressive floating toolbar. Both sit above the navigation bar.
+
+|                           | iOS 26                                                                                                                                                        | iOS 18                                                                                                                                     | Android                                                                                                                        |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
+| Several items             | <img src="docs/images/ios26-several.png" width="220" alt="iOS 26: a glass plus button on the left, pencil and share grouped in a glass capsule on the right"> | <img src="docs/images/ios18-several.png" width="220" alt="iOS 18: plus on the left, pencil and share on the right of the classic toolbar"> | <img src="docs/images/android-several.png" width="220" alt="Android: plus, pencil and share in a Material 3 floating toolbar"> |
+| One item, red `tintColor` | <img src="docs/images/ios26-single.png" width="220" alt="iOS 26: a red bin in a glass circle">                                                                | <img src="docs/images/ios18-single.png" width="220" alt="iOS 18: a red bin at the trailing edge of the toolbar">                           | <img src="docs/images/android-single.png" width="220" alt="Android: a Material 3 FAB with a red bin icon">                     |
+
+It's a TurboModule with no views of its own in JS, no Expo modules, and no config plugin.
+
+Made by [27AppStudio](https://github.com/27AppStudio) and used in production in [Splitify](https://splitify.cc).
+
+## When to use something else
+
+- **Expo Router**: use [`Stack.Toolbar`](https://docs.expo.dev/router/advanced/stack-toolbar/), which does the iOS side natively.
+- **react-native-screens v5**: a per-screen `ios.toolbarItems` option is proposed in [#4690](https://github.com/software-mansion/react-native-screens/pull/4690). Once it ships in a stable release, prefer it for iOS.
+
+This library fills the gap for React Navigation's `native-stack` on react-native-screens v4, and is the only one of the three with an Android side.
+
+## Installation
+
+```sh
+npm install @27appstudio/react-native-bottom-toolbar
+cd ios && pod install
+```
+
+Requirements:
+
+- React Native 0.82+ with the New Architecture
+- **iOS**: the screen must be in a native stack (`@react-navigation/native-stack` or another UINavigationController); the JS stack has none.
+- **Android**: nothing more. The library ships `com.google.android.material:material` 1.13. Material 3 apps use their own theme colors; AppCompat apps get the default Material 3 DayNight palette.
+- **Expo**: works in development builds, not in Expo Go.
+
+## Usage
+
+### With React Navigation
+
+```tsx
+import { useBottomToolbar } from '@27appstudio/react-native-bottom-toolbar/react-navigation';
+
+function ExpenseScreen({
+  navigation,
+}: NativeStackScreenProps<Params, 'Expense'>) {
+  useBottomToolbar(navigation, [
+    {
+      id: 'delete',
+      systemImage: 'trash', // SF Symbol (iOS)
+      androidIcon: 'ic_delete', // drawable resource (Android)
+      accessibilityLabel: 'Delete',
+      onPress: confirmDelete,
+    },
+  ]);
+  // ...
+}
+```
+
+The hook shows the toolbar once the push has landed (or right away on the stack's first screen), hides it when the screen loses focus, and brings it back when a modal over the screen closes.
+
+### Without React Navigation
+
+```ts
+import { show, hide } from '@27appstudio/react-native-bottom-toolbar';
+
+show(
+  [
+    { id: 'add', systemImage: 'plus', androidIcon: 'ic_add', onPress: add },
+    { type: 'flexibleSpace' },
+    {
+      id: 'share',
+      systemImage: 'square.and.arrow.up',
+      androidIcon: 'ic_share',
+      onPress: share,
+    },
+  ],
+  { tintColor: '#0A7D6E' }
+);
+
+hide();
+```
+
+On iOS, `show` targets the visible navigation controller's top screen, and waits for a running push or pop to finish first.
+
+## API
+
+### `show(items, options?)`
+
+Replaces the items of any toolbar already shown.
+
+| Item                             | Fields                                                                                                                                                                                |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Button (default)                 | `id` (required), `onPress`, `systemImage` (iOS SF Symbol), `androidIcon` (drawable name), `title` (used when there's no icon), `accessibilityLabel` (defaults to `title`), `disabled` |
+| `{ type: 'flexibleSpace' }`      | iOS: pushes the items apart. Android: ignored.                                                                                                                                        |
+| `{ type: 'fixedSpace', width? }` | iOS: a fixed gap; on iOS 26 it also splits glass groups. Android: ignored.                                                                                                            |
+
+When `items` contains no space, iOS puts the buttons at the trailing edge. When it contains no button at all (`[]` or spacers only), `show` hides the toolbar, as `hide()` does, so a screen can pass an empty array while it has nothing to offer.
+
+`options.tintColor` sets the icon and title color. iOS defaults to the navigation bar's tint (matching the header buttons); Android defaults to the Material 3 theme.
+
+### `hide()`
+
+### `addPressListener(listener: (id: string) => void): () => void`
+
+Called for every button tap, in addition to that button's own `onPress`.
+
+### `isAvailable: boolean`
+
+`false` where the native module is missing (web, Expo Go). There, `show` and `hide` do nothing.
+
+### `useBottomToolbar(navigation, items, options?)`
+
+Imported from `/react-navigation`. `items` and `options` are read each time the toolbar is shown, so passing a new array doesn't resubscribe. To change a toolbar that's already on screen, call `show` again.
+
+## Platform notes
+
+- **iOS content insets**: UIKit adds the toolbar to the screen's safe area, so a `ScrollView` with `contentInsetAdjustmentBehavior="automatic"` scrolls clear of it.
+- **Android content insets**: the FAB and toolbar float over your content. Leave about 88dp of bottom padding in scrolling content so the last row isn't covered.
+- **Android icons**: add vector drawables to `android/app/src/main/res/drawable`. A button without a drawable shows its `title` as text in the toolbar; a FAB needs an icon.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,38 @@
+ext.BottomToolbar = [
+  minSdkVersion: 24,
+  compileSdkVersion: 36
+]
+
+ext.getExtOrDefault = { prop ->
+  if (rootProject.ext.has(prop)) {
+    return rootProject.ext.get(prop)
+  }
+
+  return BottomToolbar[prop]
+}
+
+
+apply plugin: "com.android.library"
+
+if (project.extensions.findByName("kotlin") == null) {
+  apply plugin: "kotlin-android"
+}
+
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.bottomtoolbar"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  // 1.13 brings the Material 3 Expressive floating toolbar.
+  implementation "com.google.android.material:material:1.13.0"
+}

package/android/src/main/AndroidManifest.xml

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

package/android/src/main/java/com/bottomtoolbar/BottomToolbarModule.kt

@@ -0,0 +1,195 @@
+package com.bottomtoolbar
+
+import android.app.Activity
+import android.content.Context
+import android.content.res.ColorStateList
+import android.util.Log
+import android.view.ContextThemeWrapper
+import android.view.Gravity
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import androidx.core.view.ViewCompat
+import androidx.core.view.WindowInsetsCompat
+import androidx.core.view.updateLayoutParams
+import java.lang.ref.WeakReference
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.UiThreadUtil
+import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper
+import com.google.android.material.button.MaterialButton
+import com.google.android.material.floatingactionbutton.FloatingActionButton
+import com.google.android.material.floatingtoolbar.FloatingToolbarLayout
+import com.google.android.material.R as MaterialR
+
+/**
+ * The Android side of the native bottom toolbar: a Material 3 FAB at the bottom end
+ * for one button (where iOS puts a lone item), a Material 3 floating toolbar at the
+ * bottom center for more. Spacers are iOS-only and skipped. Both float over the
+ * activity's content, above the navigation bar, until `hide`.
+ */
+class BottomToolbarModule(reactContext: ReactApplicationContext) :
+  NativeBottomToolbarSpec(reactContext) {
+
+  /** Weak, so a destroyed activity's view is not kept; the next show replaces it. */
+  private var shown: WeakReference<View>? = null
+
+  override fun show(items: ReadableArray, options: ReadableMap) {
+    val buttons = (0 until items.size())
+      .mapNotNull { items.getMap(it) }
+      .filter { it.getString("type") == "button" }
+    val tint = if (options.hasKey("tintColor")) options.getDouble("tintColor").toInt() else null
+
+    UiThreadUtil.runOnUiThread {
+      val activity = reactApplicationContext.currentActivity ?: return@runOnUiThread
+      val content = activity.findViewById<ViewGroup>(android.R.id.content)
+        ?: return@runOnUiThread
+      removeShown(animated = false)
+      if (buttons.isEmpty()) {
+        return@runOnUiThread
+      }
+      val context = materialContext(activity)
+      val view = if (buttons.size == 1) {
+        fab(context, buttons[0], tint)
+      } else {
+        floatingToolbar(context, buttons, tint).apply {
+          alpha = 0f
+          translationY = ENTER_OFFSET_DP.dpToPx()
+          animate().alpha(1f).translationY(0f).setDuration(ENTER_DURATION).start()
+        }
+      }
+      content.addView(view)
+      // The window's insets went out before the view was added: ask for them again, to
+      // sit above the navigation bar.
+      ViewCompat.requestApplyInsets(view)
+      shown = WeakReference(view)
+    }
+  }
+
+  override fun hide() {
+    UiThreadUtil.runOnUiThread { removeShown(animated = true) }
+  }
+
+  private fun removeShown(animated: Boolean) {
+    val view = shown?.get() ?: return
+    shown = null
+    val parent = view.parent as? ViewGroup ?: return
+    if (!animated) {
+      parent.removeView(view)
+    } else if (view is FloatingActionButton) {
+      view.hide(object : FloatingActionButton.OnVisibilityChangedListener() {
+        override fun onHidden(fab: FloatingActionButton) {
+          parent.removeView(fab)
+        }
+      })
+    } else {
+      view.animate()
+        .alpha(0f)
+        .translationY(view.height / 2f)
+        .setDuration(EXIT_DURATION)
+        .withEndAction { parent.removeView(view) }
+        .start()
+    }
+  }
+
+  /** The activity itself under a Material 3 theme, else wrapped in one (AppCompat apps). */
+  private fun materialContext(activity: Activity): Context {
+    val attributes = activity.obtainStyledAttributes(intArrayOf(MaterialR.attr.isMaterial3Theme))
+    val isMaterial3 = attributes.getBoolean(0, false)
+    attributes.recycle()
+    return if (isMaterial3) {
+      activity
+    } else {
+      ContextThemeWrapper(activity, MaterialR.style.Theme_Material3_DayNight_NoActionBar)
+    }
+  }
+
+  private fun fab(context: Context, item: ReadableMap, tint: Int?): FloatingActionButton {
+    val margin = MARGIN_DP.dpToPx().toInt()
+    return FloatingActionButton(context).apply {
+      icon(context, item)?.let { setImageResource(it) }
+        ?: Log.w(TAG, "No androidIcon drawable for \"${item.getString("id")}\"")
+      tint?.let { imageTintList = ColorStateList.valueOf(it) }
+      describe(this, item)
+      layoutParams = FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.BOTTOM or Gravity.END,
+      ).apply { setMargins(margin, margin, margin, margin) }
+      // Above the navigation bar, as the floating toolbar places itself.
+      ViewCompat.setOnApplyWindowInsetsListener(this) { view, insets ->
+        val bars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
+        view.updateLayoutParams<ViewGroup.MarginLayoutParams> {
+          bottomMargin = margin + bars.bottom
+          marginEnd = margin + bars.right
+        }
+        insets
+      }
+      // FloatingActionButton.show() animates only once laid out, so start hidden.
+      visibility = View.INVISIBLE
+      post { show() }
+    }
+  }
+
+  private fun floatingToolbar(
+    context: Context,
+    items: List<ReadableMap>,
+    tint: Int?,
+  ): FloatingToolbarLayout {
+    val inflater = LayoutInflater.from(context)
+    val row = LinearLayout(context).apply {
+      orientation = LinearLayout.HORIZONTAL
+      gravity = Gravity.CENTER_VERTICAL
+    }
+    for (item in items) {
+      val iconRes = icon(context, item)
+      val button: MaterialButton
+      if (iconRes != null) {
+        button = inflater.inflate(R.layout.bottom_toolbar_icon_button, row, false) as MaterialButton
+        button.setIconResource(iconRes)
+        tint?.let { button.iconTint = ColorStateList.valueOf(it) }
+      } else {
+        button = inflater.inflate(R.layout.bottom_toolbar_text_button, row, false) as MaterialButton
+        button.text = item.getString("title") ?: item.getString("id")
+        tint?.let { button.setTextColor(it) }
+      }
+      describe(button, item)
+      row.addView(button)
+    }
+    return FloatingToolbarLayout(context).apply {
+      addView(row)
+      layoutParams = FrameLayout.LayoutParams(
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        ViewGroup.LayoutParams.WRAP_CONTENT,
+        Gravity.BOTTOM or Gravity.CENTER_HORIZONTAL,
+      ).apply {
+        bottomMargin = MARGIN_DP.dpToPx().toInt()
+      }
+    }
+  }
+
+  private fun describe(view: View, item: ReadableMap) {
+    val id = item.getString("id") ?: ""
+    view.contentDescription = item.getString("accessibilityLabel")
+    view.isEnabled = !(item.hasKey("disabled") && item.getBoolean("disabled"))
+    view.setOnClickListener { emitOnItemPress(id) }
+  }
+
+  /** The `androidIcon` drawable in the app's resources, or null. */
+  private fun icon(context: Context, item: ReadableMap): Int? =
+    ResourceDrawableIdHelper.getResourceDrawableId(context, item.getString("androidIcon"))
+      .takeIf { it != 0 }
+
+  companion object {
+    const val NAME = NativeBottomToolbarSpec.NAME
+    private const val TAG = "BottomToolbar"
+    private const val ENTER_DURATION = 250L
+    private const val EXIT_DURATION = 200L
+    private const val ENTER_OFFSET_DP = 24f
+    private const val MARGIN_DP = 16f
+  }
+}

package/android/src/main/java/com/bottomtoolbar/BottomToolbarPackage.kt

@@ -0,0 +1,30 @@
+package com.bottomtoolbar
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+
+class BottomToolbarPackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == BottomToolbarModule.NAME) {
+      BottomToolbarModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider {
+    mapOf(
+      BottomToolbarModule.NAME to ReactModuleInfo(
+        name = BottomToolbarModule.NAME,
+        className = BottomToolbarModule.NAME,
+        canOverrideExistingModule = false,
+        needsEagerInit = false,
+        isCxxModule = false,
+        isTurboModule = true
+      )
+    )
+  }
+}

package/android/src/main/res/layout/bottom_toolbar_icon_button.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.button.MaterialButton xmlns:android="http://schemas.android.com/apk/res/android"
+  style="@style/Widget.Material3.FloatingToolbar.IconButton"
+  android:layout_width="wrap_content"
+  android:layout_height="wrap_content" />

package/android/src/main/res/layout/bottom_toolbar_text_button.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<com.google.android.material.button.MaterialButton xmlns:android="http://schemas.android.com/apk/res/android"
+  style="@style/Widget.Material3.FloatingToolbar.TextButton"
+  android:layout_width="wrap_content"
+  android:layout_height="wrap_content" />

package/ios/BottomToolbar.h

@@ -0,0 +1,5 @@
+#import <BottomToolbarSpec/BottomToolbarSpec.h>
+
+@interface BottomToolbar : NativeBottomToolbarSpecBase <NativeBottomToolbarSpec>
+
+@end

package/ios/BottomToolbar.mm

@@ -0,0 +1,157 @@
+#import "BottomToolbar.h"
+
+#import <React/RCTConvert.h>
+#import <React/RCTUtils.h>
+#import <UIKit/UIKit.h>
+
+/**
+ * UIKit's own bottom toolbar for a screen of a native stack, so its items are the
+ * system's: on iOS 26 a lone trailing item is drawn as a glass circle (as Photos'
+ * bin), before that as the classic toolbar. Its items belong to the navigation
+ * controller's top screen; the JS side shows it when that screen is reached and
+ * hides it on leave.
+ */
+@implementation BottomToolbar {
+  __weak UIViewController *_owner;
+  /** The navigation bar's tint, as last read undimmed. */
+  UIColor *_barTint;
+}
+
++ (NSString *)moduleName
+{
+  return @"BottomToolbar";
+}
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+- (dispatch_queue_t)methodQueue
+{
+  return dispatch_get_main_queue();
+}
+
+/** The innermost navigation controller on screen, skipping a modal being dismissed. */
+static UINavigationController *VisibleNavigationController(void)
+{
+  UIViewController *controller = RCTKeyWindow().rootViewController;
+  UINavigationController *navigation = nil;
+  while (controller != nil) {
+    UIViewController *presented = controller.presentedViewController;
+    if (presented != nil && !presented.isBeingDismissed) {
+      controller = presented;
+    } else if ([controller isKindOfClass:[UINavigationController class]]) {
+      navigation = (UINavigationController *)controller;
+      controller = navigation.topViewController;
+    } else {
+      controller = controller.childViewControllers.lastObject;
+    }
+  }
+  return navigation;
+}
+
+- (UIBarButtonItem *)barItemFor:(NSDictionary *)item
+{
+  NSString *type = item[@"type"];
+  if ([type isEqualToString:@"flexibleSpace"]) {
+    return [UIBarButtonItem flexibleSpaceItem];
+  }
+  if ([type isEqualToString:@"fixedSpace"]) {
+    return [UIBarButtonItem fixedSpaceItemOfWidth:[item[@"width"] doubleValue]];
+  }
+
+  __weak BottomToolbar *weakSelf = self;
+  NSString *itemId = item[@"id"];
+  UIBarButtonItem *barItem = [[UIBarButtonItem alloc]
+      initWithPrimaryAction:[UIAction actionWithHandler:^(UIAction *action) {
+        [weakSelf emitOnItemPress:itemId];
+      }]];
+  NSString *systemImage = item[@"systemImage"];
+  UIImage *image = systemImage != nil ? [UIImage systemImageNamed:systemImage] : nil;
+  if (image != nil) {
+    barItem.image = image;
+  } else {
+    barItem.title = item[@"title"];
+  }
+  barItem.accessibilityLabel = item[@"accessibilityLabel"];
+  barItem.enabled = ![item[@"disabled"] boolValue];
+  return barItem;
+}
+
+- (void)show:(NSArray *)items options:(JS::NativeBottomToolbar::NativeToolbarOptions &)options
+{
+  // Back on the screen that already had the toolbar (a modal on it was dismissed): use it.
+  // The visible navigation controller could still be the modal's, as JS refocuses this
+  // screen before UIKit starts the dismissal.
+  UIViewController *owner = _owner;
+  UINavigationController *navigation = owner.navigationController;
+  if (navigation == nil || navigation.topViewController != owner) {
+    owner = nil;
+    navigation = VisibleNavigationController();
+  }
+  if (navigation == nil) {
+    return;
+  }
+
+  NSMutableArray<UIBarButtonItem *> *barItems = [NSMutableArray array];
+  BOOL hasSpace = NO;
+  for (NSDictionary *item in items) {
+    hasSpace = hasSpace || ![item[@"type"] isEqualToString:@"button"];
+    [barItems addObject:[self barItemFor:item]];
+  }
+  // Without spacers the items go to the trailing edge, where iOS 26 draws a lone one
+  // as a glass circle.
+  if (!hasSpace) {
+    [barItems insertObject:[UIBarButtonItem flexibleSpaceItem] atIndex:0];
+  }
+  std::optional<double> tintColor = options.tintColor();
+  UIColor *tint = tintColor.has_value() ? [RCTConvert UIColor:@(tintColor.value())] : nil;
+
+  void (^apply)(void) = ^{
+    // A first show reads the top screen once any push has landed, so the items go to
+    // the screen now on top.
+    UIViewController *target = owner ?: navigation.topViewController;
+    // Each item's tint, as iOS 26 glass ignores the toolbar's. By default the header's
+    // own items' colour, not the system blue; read only while undimmed, as before iOS 26
+    // the bar still reports its dimmed grey when back from a modal.
+    if (navigation.navigationBar.tintAdjustmentMode != UIViewTintAdjustmentModeDimmed) {
+      self->_barTint = navigation.navigationBar.tintColor;
+    }
+    for (UIBarButtonItem *barItem in barItems) {
+      barItem.tintColor = tint ?: self->_barTint;
+    }
+    self->_owner = target;
+    [target setToolbarItems:barItems animated:NO];
+    [navigation setToolbarHidden:NO animated:YES];
+  };
+
+  id<UIViewControllerTransitionCoordinator> coordinator = navigation.transitionCoordinator;
+  if (coordinator != nil) {
+    [coordinator animateAlongsideTransition:nil
+                                 completion:^(id _Nonnull context) {
+                                   apply();
+                                 }];
+  } else {
+    apply();
+  }
+}
+
+- (void)hide
+{
+  // The owner is kept (weakly) for the next `show`: a modal over it hides the toolbar,
+  // and its dismissal brings it back on the same screen.
+  UIViewController *owner = _owner;
+  UINavigationController *navigation =
+      owner.navigationController ?: VisibleNavigationController();
+  [owner setToolbarItems:nil animated:NO];
+  [navigation setToolbarHidden:YES animated:YES];
+}
+
+- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:
+    (const facebook::react::ObjCTurboModule::InitParams &)params
+{
+  return std::make_shared<facebook::react::NativeBottomToolbarSpecJSI>(params);
+}
+
+@end

package/lib/module/NativeBottomToolbar.js

@@ -0,0 +1,5 @@
+"use strict";
+
+import { TurboModuleRegistry } from 'react-native';
+export default TurboModuleRegistry.get('BottomToolbar');
+//# sourceMappingURL=NativeBottomToolbar.js.map

package/lib/module/NativeBottomToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["TurboModuleRegistry","get"],"sourceRoot":"../../src","sources":["NativeBottomToolbar.ts"],"mappings":";;AAEA,SAASA,mBAAmB,QAAQ,cAAc;AA6BlD,eAAeA,mBAAmB,CAACC,GAAG,CAAO,eAAe,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import { processColor } from 'react-native';
+import NativeBottomToolbar from "./NativeBottomToolbar.js";
+/** False where the native module is missing: web, Expo Go, an unlinked build. */
+export const isAvailable = NativeBottomToolbar != null;
+let buttons = [];
+
+/**
+ * Shows the native bottom toolbar with `items`, replacing any shown before.
+ *
+ * - iOS: UIKit's own toolbar on the visible navigation controller (so the
+ *   screen must be in a native stack). Without spacers the items sit at the
+ *   trailing edge; on iOS 26 a lone item is drawn as a glass circle, as in
+ *   Photos. Waits for a running push or pop, so the items land on the screen
+ *   on top.
+ * - Android: a Material 3 FAB for one button, a floating toolbar for more,
+ *   above the navigation bar. Spacers are ignored.
+ *
+ * Without any button (an empty array, or spacers only) it hides the toolbar, as
+ * `hide` does: on iOS an empty bar would still take the bottom band's touches and
+ * add its height to the scroll views' insets.
+ */
+export function show(items, options = {}) {
+  if (!NativeBottomToolbar) {
+    return;
+  }
+  if (!items.some(isButton)) {
+    hide();
+    return;
+  }
+  buttons = items.filter(isButton);
+  const tintColor = processColor(options.tintColor);
+  NativeBottomToolbar.show(items.map(item => isButton(item) ? {
+    ...item,
+    accessibilityLabel: item.accessibilityLabel ?? item.title,
+    onPress: undefined,
+    type: 'button'
+  } : item), typeof tintColor === 'number' ? {
+    tintColor
+  } : {});
+}
+
+/** Hides the toolbar. */
+export function hide() {
+  buttons = [];
+  NativeBottomToolbar?.hide();
+}
+
+/**
+ * Calls `listener` with the id of each tapped button, in addition to that
+ * button's own `onPress`. Returns the unsubscribe function.
+ */
+export function addPressListener(listener) {
+  const subscription = NativeBottomToolbar?.onItemPress(listener);
+  return () => subscription?.remove();
+}
+function isButton(item) {
+  return item.type === undefined || item.type === 'button';
+}
+NativeBottomToolbar?.onItemPress(id => buttons.find(button => button.id === id)?.onPress?.());
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["processColor","NativeBottomToolbar","isAvailable","buttons","show","items","options","some","isButton","hide","filter","tintColor","map","item","accessibilityLabel","title","onPress","undefined","type","addPressListener","listener","subscription","onItemPress","remove","id","find","button"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,cAAc;AAE3C,OAAOC,mBAAmB,MAAM,0BAAuB;AASvD;AACA,OAAO,MAAMC,WAAW,GAAGD,mBAAmB,IAAI,IAAI;AAEtD,IAAIE,OAAwB,GAAG,EAAE;;AAEjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,IAAIA,CAACC,KAAoB,EAAEC,OAAuB,GAAG,CAAC,CAAC,EAAE;EACvE,IAAI,CAACL,mBAAmB,EAAE;IACxB;EACF;EACA,IAAI,CAACI,KAAK,CAACE,IAAI,CAACC,QAAQ,CAAC,EAAE;IACzBC,IAAI,CAAC,CAAC;IACN;EACF;EACAN,OAAO,GAAGE,KAAK,CAACK,MAAM,CAACF,QAAQ,CAAC;EAChC,MAAMG,SAAS,GAAGX,YAAY,CAACM,OAAO,CAACK,SAAS,CAAC;EACjDV,mBAAmB,CAACG,IAAI,CACtBC,KAAK,CAACO,GAAG,CAAEC,IAAI,IACbL,QAAQ,CAACK,IAAI,CAAC,GACV;IACE,GAAGA,IAAI;IACPC,kBAAkB,EAAED,IAAI,CAACC,kBAAkB,IAAID,IAAI,CAACE,KAAK;IACzDC,OAAO,EAAEC,SAAS;IAClBC,IAAI,EAAE;EACR,CAAC,GACDL,IACN,CAAC,EACD,OAAOF,SAAS,KAAK,QAAQ,GAAG;IAAEA;EAAU,CAAC,GAAG,CAAC,CACnD,CAAC;AACH;;AAEA;AACA,OAAO,SAASF,IAAIA,CAAA,EAAG;EACrBN,OAAO,GAAG,EAAE;EACZF,mBAAmB,EAAEQ,IAAI,CAAC,CAAC;AAC7B;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASU,gBAAgBA,CAACC,QAA8B,EAAE;EAC/D,MAAMC,YAAY,GAAGpB,mBAAmB,EAAEqB,WAAW,CAACF,QAAQ,CAAC;EAC/D,OAAO,MAAMC,YAAY,EAAEE,MAAM,CAAC,CAAC;AACrC;AAEA,SAASf,QAAQA,CAACK,IAAiB,EAAyB;EAC1D,OAAOA,IAAI,CAACK,IAAI,KAAKD,SAAS,IAAIJ,IAAI,CAACK,IAAI,KAAK,QAAQ;AAC1D;AAEAjB,mBAAmB,EAAEqB,WAAW,CAAEE,EAAE,IAClCrB,OAAO,CAACsB,IAAI,CAAEC,MAAM,IAAKA,MAAM,CAACF,EAAE,KAAKA,EAAE,CAAC,EAAER,OAAO,GAAG,CACxD,CAAC","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/react-navigation/index.js

@@ -0,0 +1,56 @@
+"use strict";
+
+import { useEffect, useRef } from 'react';
+import { hide, show } from "../index.js";
+
+/**
+ * Shows `items` in the native bottom toolbar while this screen is on top of a
+ * native stack (`@react-navigation/native-stack`: the JS stack has no
+ * UINavigationController for iOS to put it in).
+ *
+ * The toolbar belongs to the whole stack: it is shown once the push has landed
+ * (`transitionEnd`), or at once on the stack's first screen; again on
+ * returning from a modal (`focus`); and hidden on `blur`. `items` and
+ * `options` are read at show time, so a new array (a language change) needs
+ * no resubscribe; call `show` to update a toolbar already on screen.
+ */
+export function useBottomToolbar(navigation, items, options) {
+  const latest = useRef({
+    items,
+    options
+  });
+  latest.current = {
+    items,
+    options
+  };
+  useEffect(() => {
+    // Back from a pop, both focus and transitionEnd show: the latter comes after
+    // the popped screen's unmount, whose `hide` would otherwise win.
+    const showLatest = () => show(latest.current.items, latest.current.options);
+    // A pushed screen mounts before its push starts, so showing now would put
+    // the items on the screen below; the first screen has no push to wait for.
+    let arrived = navigation.isFocused() && navigation.getState().index === 0;
+    if (arrived) {
+      showLatest();
+    }
+    const offTransitionEnd = navigation.addListener('transitionEnd', event => {
+      if (!event.data.closing) {
+        arrived = true;
+        showLatest();
+      }
+    });
+    const offFocus = navigation.addListener('focus', () => {
+      if (arrived) {
+        showLatest();
+      }
+    });
+    const offBlur = navigation.addListener('blur', hide);
+    return () => {
+      offTransitionEnd();
+      offFocus();
+      offBlur();
+      hide();
+    };
+  }, [navigation]);
+}
+//# sourceMappingURL=index.js.map

package/lib/module/react-navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useEffect","useRef","hide","show","useBottomToolbar","navigation","items","options","latest","current","showLatest","arrived","isFocused","getState","index","offTransitionEnd","addListener","event","data","closing","offFocus","offBlur"],"sourceRoot":"../../../src","sources":["react-navigation/index.ts"],"mappings":";;AAIA,SAASA,SAAS,EAAEC,MAAM,QAAQ,OAAO;AAEzC,SAASC,IAAI,EAAEC,IAAI,QAAQ,aAAU;;AAErC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAC9BC,UAAoD,EACpDC,KAAoB,EACpBC,OAAwB,EACxB;EACA,MAAMC,MAAM,GAAGP,MAAM,CAAC;IAAEK,KAAK;IAAEC;EAAQ,CAAC,CAAC;EACzCC,MAAM,CAACC,OAAO,GAAG;IAAEH,KAAK;IAAEC;EAAQ,CAAC;EAEnCP,SAAS,CAAC,MAAM;IACd;IACA;IACA,MAAMU,UAAU,GAAGA,CAAA,KAAMP,IAAI,CAACK,MAAM,CAACC,OAAO,CAACH,KAAK,EAAEE,MAAM,CAACC,OAAO,CAACF,OAAO,CAAC;IAC3E;IACA;IACA,IAAII,OAAO,GAAGN,UAAU,CAACO,SAAS,CAAC,CAAC,IAAIP,UAAU,CAACQ,QAAQ,CAAC,CAAC,CAACC,KAAK,KAAK,CAAC;IACzE,IAAIH,OAAO,EAAE;MACXD,UAAU,CAAC,CAAC;IACd;IAEA,MAAMK,gBAAgB,GAAGV,UAAU,CAACW,WAAW,CAC7C,eAAe,EACdC,KAAK,IAAK;MACT,IAAI,CAACA,KAAK,CAACC,IAAI,CAACC,OAAO,EAAE;QACvBR,OAAO,GAAG,IAAI;QACdD,UAAU,CAAC,CAAC;MACd;IACF,CACF,CAAC;IACD,MAAMU,QAAQ,GAAGf,UAAU,CAACW,WAAW,CAAC,OAAO,EAAE,MAAM;MACrD,IAAIL,OAAO,EAAE;QACXD,UAAU,CAAC,CAAC;MACd;IACF,CAAC,CAAC;IACF,MAAMW,OAAO,GAAGhB,UAAU,CAACW,WAAW,CAAC,MAAM,EAAEd,IAAI,CAAC;IAEpD,OAAO,MAAM;MACXa,gBAAgB,CAAC,CAAC;MAClBK,QAAQ,CAAC,CAAC;MACVC,OAAO,CAAC,CAAC;MACTnB,IAAI,CAAC,CAAC;IACR,CAAC;EACH,CAAC,EAAE,CAACG,UAAU,CAAC,CAAC;AAClB","ignoreList":[]}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/typescript/src/NativeBottomToolbar.d.ts

@@ -0,0 +1,28 @@
+import type { CodegenTypes, TurboModule } from 'react-native';
+type NativeToolbarItem = {
+    accessibilityLabel?: string;
+    /** Android: the name of a drawable resource, e.g. `ic_delete`. */
+    androidIcon?: string;
+    disabled?: boolean;
+    /** A button's; reported back through `onItemPress` when it is tapped. */
+    id?: string;
+    /** iOS: an SF Symbol name, e.g. `trash`. */
+    systemImage?: string;
+    title?: string;
+    /** `button`, `flexibleSpace` or `fixedSpace`. */
+    type: string;
+    /** A fixed space's width in points; the system's when left out. */
+    width?: CodegenTypes.Double;
+};
+type NativeToolbarOptions = {
+    /** A `processColor` value; left out for the platform's own. */
+    tintColor?: number;
+};
+export interface Spec extends TurboModule {
+    hide(): void;
+    readonly onItemPress: CodegenTypes.EventEmitter<string>;
+    show(items: NativeToolbarItem[], options: NativeToolbarOptions): void;
+}
+declare const _default: Spec | null | undefined;
+export default _default;
+//# sourceMappingURL=NativeBottomToolbar.d.ts.map

package/lib/typescript/src/NativeBottomToolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeBottomToolbar.d.ts","sourceRoot":"","sources":["../../../src/NativeBottomToolbar.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAI9D,KAAK,iBAAiB,GAAG;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iDAAiD;IACjD,IAAI,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,KAAK,CAAC,EAAE,YAAY,CAAC,MAAM,CAAC;CAC7B,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,WAAW,IAAK,SAAQ,WAAW;IACvC,IAAI,IAAI,IAAI,CAAC;IACb,QAAQ,CAAC,WAAW,EAAE,YAAY,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IACxD,IAAI,CAAC,KAAK,EAAE,iBAAiB,EAAE,EAAE,OAAO,EAAE,oBAAoB,GAAG,IAAI,CAAC;CACvE;;AAED,wBAA8D"}

package/lib/typescript/src/index.d.ts

@@ -0,0 +1,28 @@
+import type { ToolbarItem, ToolbarOptions } from './types.js';
+export type { ToolbarButton, ToolbarItem, ToolbarOptions, ToolbarSpace, } from './types.js';
+/** False where the native module is missing: web, Expo Go, an unlinked build. */
+export declare const isAvailable: boolean;
+/**
+ * Shows the native bottom toolbar with `items`, replacing any shown before.
+ *
+ * - iOS: UIKit's own toolbar on the visible navigation controller (so the
+ *   screen must be in a native stack). Without spacers the items sit at the
+ *   trailing edge; on iOS 26 a lone item is drawn as a glass circle, as in
+ *   Photos. Waits for a running push or pop, so the items land on the screen
+ *   on top.
+ * - Android: a Material 3 FAB for one button, a floating toolbar for more,
+ *   above the navigation bar. Spacers are ignored.
+ *
+ * Without any button (an empty array, or spacers only) it hides the toolbar, as
+ * `hide` does: on iOS an empty bar would still take the bottom band's touches and
+ * add its height to the scroll views' insets.
+ */
+export declare function show(items: ToolbarItem[], options?: ToolbarOptions): void;
+/** Hides the toolbar. */
+export declare function hide(): void;
+/**
+ * Calls `listener` with the id of each tapped button, in addition to that
+ * button's own `onPress`. Returns the unsubscribe function.
+ */
+export declare function addPressListener(listener: (id: string) => void): () => void | undefined;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAM1E,YAAY,EACV,aAAa,EACb,WAAW,EACX,cAAc,EACd,YAAY,GACb,MAAM,YAAS,CAAC;AAEjB,iFAAiF;AACjF,eAAO,MAAM,WAAW,SAA8B,CAAC;AAIvD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE,cAAmB,QAuBtE;AAED,yBAAyB;AACzB,wBAAgB,IAAI,SAGnB;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,0BAG9D"}

package/lib/typescript/src/react-navigation/index.d.ts

@@ -0,0 +1,16 @@
+import type { ParamListBase } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { ToolbarItem, ToolbarOptions } from '../types.js';
+/**
+ * Shows `items` in the native bottom toolbar while this screen is on top of a
+ * native stack (`@react-navigation/native-stack`: the JS stack has no
+ * UINavigationController for iOS to put it in).
+ *
+ * The toolbar belongs to the whole stack: it is shown once the push has landed
+ * (`transitionEnd`), or at once on the stack's first screen; again on
+ * returning from a modal (`focus`); and hidden on `blur`. `items` and
+ * `options` are read at show time, so a new array (a language change) needs
+ * no resubscribe; call `show` to update a toolbar already on screen.
+ */
+export declare function useBottomToolbar(navigation: NativeStackNavigationProp<ParamListBase>, items: ToolbarItem[], options?: ToolbarOptions): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/react-navigation/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/react-navigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAChF,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAU,CAAC;AAM5D;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,yBAAyB,CAAC,aAAa,CAAC,EACpD,KAAK,EAAE,WAAW,EAAE,EACpB,OAAO,CAAC,EAAE,cAAc,QAuCzB"}

package/lib/typescript/src/types.d.ts

@@ -0,0 +1,33 @@
+import type { ColorValue } from 'react-native';
+export type ToolbarButton = {
+    /** Read by VoiceOver / TalkBack; defaults to `title`. */
+    accessibilityLabel?: string;
+    /** Android: the name of a drawable resource, e.g. `ic_delete`. */
+    androidIcon?: string;
+    disabled?: boolean;
+    /** Unique among the items; passed to `onPress` listeners. */
+    id: string;
+    onPress?: () => void;
+    /** iOS: an SF Symbol name, e.g. `trash`. */
+    systemImage?: string;
+    /** Shown when the platform has no icon for the item. */
+    title?: string;
+    type?: 'button';
+};
+export type ToolbarSpace = {
+    type: 'flexibleSpace';
+}
+/** `width` in points; the system's own when left out. */
+ | {
+    type: 'fixedSpace';
+    width?: number;
+};
+export type ToolbarItem = ToolbarButton | ToolbarSpace;
+export type ToolbarOptions = {
+    /**
+     * Icon and title color. iOS defaults to the navigation bar's tint (as the
+     * header's own buttons), Android to the Material 3 theme.
+     */
+    tintColor?: ColorValue;
+};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,MAAM,MAAM,aAAa,GAAG;IAC1B,yDAAyD;IACzD,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,YAAY,GACpB;IAAE,IAAI,EAAE,eAAe,CAAA;CAAE;AAC3B,yDAAyD;GACvD;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,aAAa,GAAG,YAAY,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG;IAC3B;;;OAGG;IACH,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC"}

package/package.json

@@ -1,6 +1,171 @@
 {
   "name": "@27appstudio/react-native-bottom-toolbar",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.1",
+  "description": "Native bottom toolbar for React Native: UIKit's toolbar on iOS (Liquid Glass on iOS 26) and a Material 3 floating toolbar on Android.",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-bottom-toolbar-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./react-navigation": {
+      "react-native-bottom-toolbar-source": "./src/react-navigation/index.ts",
+      "types": "./lib/typescript/src/react-navigation/index.d.ts",
+      "default": "./lib/module/react-navigation/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "*.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-bottom-toolbar-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "release": "release-it --only-version"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "toolbar",
+    "liquid-glass",
+    "material3",
+    "fab",
+    "turbo-module",
+    "react-navigation"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/27AppStudio/react-native-bottom-toolbar.git"
+  },
+  "author": "27AppStudio <hello@27appstudio.com> (https://github.com/27AppStudio)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/27AppStudio/react-native-bottom-toolbar/issues"
+  },
+  "homepage": "https://github.com/27AppStudio/react-native-bottom-toolbar#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.1",
+    "@eslint/eslintrc": "^3.3.7",
+    "@eslint/js": "^9.39.5",
+    "@react-native/babel-preset": "0.84.1",
+    "@react-native/eslint-config": "0.84.1",
+    "@react-navigation/native": "^7.5.1",
+    "@react-navigation/native-stack": "^7.21.0",
+    "@release-it/conventional-changelog": "^12.0.2",
+    "@types/react": "^19.2.0",
+    "del-cli": "^8.0.1",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.7",
+    "prettier": "^3.9.10",
+    "react": "19.2.3",
+    "react-native": "0.84.1",
+    "react-native-builder-bob": "^0.44.1",
+    "react-native-safe-area-context": "~5.10.0",
+    "react-native-screens": "4.30.0",
+    "release-it": "^21.1.1",
+    "turbo": "^2.11.10",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": ">=7",
+    "@react-navigation/native-stack": ">=7",
+    "react": "*",
+    "react-native": ">=0.82"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.18.1",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "BottomToolbarSpec",
+    "type": "modules",
+    "jsSrcsDir": "src",
+    "ios": {
+      "modulesProvider": {
+        "BottomToolbar": "BottomToolbar"
+      }
+    },
+    "android": {
+      "javaPackageName": "com.bottomtoolbar"
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "peerDependenciesMeta": {
+    "@react-navigation/native": {
+      "optional": true
+    },
+    "@react-navigation/native-stack": {
+      "optional": true
+    }
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": false
+    },
+    "github": {
+      "release": false
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        },
+        "infile": "CHANGELOG.md"
+      }
+    }
+  }
+}

package/src/NativeBottomToolbar.ts

@@ -0,0 +1,32 @@
+import type { CodegenTypes, TurboModule } from 'react-native';
+
+import { TurboModuleRegistry } from 'react-native';
+
+type NativeToolbarItem = {
+  accessibilityLabel?: string;
+  /** Android: the name of a drawable resource, e.g. `ic_delete`. */
+  androidIcon?: string;
+  disabled?: boolean;
+  /** A button's; reported back through `onItemPress` when it is tapped. */
+  id?: string;
+  /** iOS: an SF Symbol name, e.g. `trash`. */
+  systemImage?: string;
+  title?: string;
+  /** `button`, `flexibleSpace` or `fixedSpace`. */
+  type: string;
+  /** A fixed space's width in points; the system's when left out. */
+  width?: CodegenTypes.Double;
+};
+
+type NativeToolbarOptions = {
+  /** A `processColor` value; left out for the platform's own. */
+  tintColor?: number;
+};
+
+export interface Spec extends TurboModule {
+  hide(): void;
+  readonly onItemPress: CodegenTypes.EventEmitter<string>;
+  show(items: NativeToolbarItem[], options: NativeToolbarOptions): void;
+}
+
+export default TurboModuleRegistry.get<Spec>('BottomToolbar');

package/src/index.tsx

@@ -0,0 +1,80 @@
+import type { ToolbarButton, ToolbarItem, ToolbarOptions } from './types';
+
+import { processColor } from 'react-native';
+
+import NativeBottomToolbar from './NativeBottomToolbar';
+
+export type {
+  ToolbarButton,
+  ToolbarItem,
+  ToolbarOptions,
+  ToolbarSpace,
+} from './types';
+
+/** False where the native module is missing: web, Expo Go, an unlinked build. */
+export const isAvailable = NativeBottomToolbar != null;
+
+let buttons: ToolbarButton[] = [];
+
+/**
+ * Shows the native bottom toolbar with `items`, replacing any shown before.
+ *
+ * - iOS: UIKit's own toolbar on the visible navigation controller (so the
+ *   screen must be in a native stack). Without spacers the items sit at the
+ *   trailing edge; on iOS 26 a lone item is drawn as a glass circle, as in
+ *   Photos. Waits for a running push or pop, so the items land on the screen
+ *   on top.
+ * - Android: a Material 3 FAB for one button, a floating toolbar for more,
+ *   above the navigation bar. Spacers are ignored.
+ *
+ * Without any button (an empty array, or spacers only) it hides the toolbar, as
+ * `hide` does: on iOS an empty bar would still take the bottom band's touches and
+ * add its height to the scroll views' insets.
+ */
+export function show(items: ToolbarItem[], options: ToolbarOptions = {}) {
+  if (!NativeBottomToolbar) {
+    return;
+  }
+  if (!items.some(isButton)) {
+    hide();
+    return;
+  }
+  buttons = items.filter(isButton);
+  const tintColor = processColor(options.tintColor);
+  NativeBottomToolbar.show(
+    items.map((item) =>
+      isButton(item)
+        ? {
+            ...item,
+            accessibilityLabel: item.accessibilityLabel ?? item.title,
+            onPress: undefined,
+            type: 'button',
+          }
+        : item
+    ),
+    typeof tintColor === 'number' ? { tintColor } : {}
+  );
+}
+
+/** Hides the toolbar. */
+export function hide() {
+  buttons = [];
+  NativeBottomToolbar?.hide();
+}
+
+/**
+ * Calls `listener` with the id of each tapped button, in addition to that
+ * button's own `onPress`. Returns the unsubscribe function.
+ */
+export function addPressListener(listener: (id: string) => void) {
+  const subscription = NativeBottomToolbar?.onItemPress(listener);
+  return () => subscription?.remove();
+}
+
+function isButton(item: ToolbarItem): item is ToolbarButton {
+  return item.type === undefined || item.type === 'button';
+}
+
+NativeBottomToolbar?.onItemPress((id) =>
+  buttons.find((button) => button.id === id)?.onPress?.()
+);

package/src/react-navigation/index.ts

@@ -0,0 +1,62 @@
+import type { ParamListBase } from '@react-navigation/native';
+import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import type { ToolbarItem, ToolbarOptions } from '../types';
+
+import { useEffect, useRef } from 'react';
+
+import { hide, show } from '../index';
+
+/**
+ * Shows `items` in the native bottom toolbar while this screen is on top of a
+ * native stack (`@react-navigation/native-stack`: the JS stack has no
+ * UINavigationController for iOS to put it in).
+ *
+ * The toolbar belongs to the whole stack: it is shown once the push has landed
+ * (`transitionEnd`), or at once on the stack's first screen; again on
+ * returning from a modal (`focus`); and hidden on `blur`. `items` and
+ * `options` are read at show time, so a new array (a language change) needs
+ * no resubscribe; call `show` to update a toolbar already on screen.
+ */
+export function useBottomToolbar(
+  navigation: NativeStackNavigationProp<ParamListBase>,
+  items: ToolbarItem[],
+  options?: ToolbarOptions
+) {
+  const latest = useRef({ items, options });
+  latest.current = { items, options };
+
+  useEffect(() => {
+    // Back from a pop, both focus and transitionEnd show: the latter comes after
+    // the popped screen's unmount, whose `hide` would otherwise win.
+    const showLatest = () => show(latest.current.items, latest.current.options);
+    // A pushed screen mounts before its push starts, so showing now would put
+    // the items on the screen below; the first screen has no push to wait for.
+    let arrived = navigation.isFocused() && navigation.getState().index === 0;
+    if (arrived) {
+      showLatest();
+    }
+
+    const offTransitionEnd = navigation.addListener(
+      'transitionEnd',
+      (event) => {
+        if (!event.data.closing) {
+          arrived = true;
+          showLatest();
+        }
+      }
+    );
+    const offFocus = navigation.addListener('focus', () => {
+      if (arrived) {
+        showLatest();
+      }
+    });
+    const offBlur = navigation.addListener('blur', hide);
+
+    return () => {
+      offTransitionEnd();
+      offFocus();
+      offBlur();
+      hide();
+    };
+  }, [navigation]);
+}

package/src/types.ts

@@ -0,0 +1,32 @@
+import type { ColorValue } from 'react-native';
+
+export type ToolbarButton = {
+  /** Read by VoiceOver / TalkBack; defaults to `title`. */
+  accessibilityLabel?: string;
+  /** Android: the name of a drawable resource, e.g. `ic_delete`. */
+  androidIcon?: string;
+  disabled?: boolean;
+  /** Unique among the items; passed to `onPress` listeners. */
+  id: string;
+  onPress?: () => void;
+  /** iOS: an SF Symbol name, e.g. `trash`. */
+  systemImage?: string;
+  /** Shown when the platform has no icon for the item. */
+  title?: string;
+  type?: 'button';
+};
+
+export type ToolbarSpace =
+  | { type: 'flexibleSpace' }
+  /** `width` in points; the system's own when left out. */
+  | { type: 'fixedSpace'; width?: number };
+
+export type ToolbarItem = ToolbarButton | ToolbarSpace;
+
+export type ToolbarOptions = {
+  /**
+   * Icon and title color. iOS defaults to the navigation bar's tint (as the
+   * header's own buttons), Android to the Material 3 theme.
+   */
+  tintColor?: ColorValue;
+};