@27appstudio/react-native-bottom-toolbar 0.2.0 → 0.3.0

package/README.md

@@ -112,6 +112,21 @@ When `items` contains no space, iOS puts the buttons at the trailing edge. When
 
 `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.
 
+### `getHeight(): Promise<number>` and `useBottomToolbarHeight(): number`
+
+The room the toolbar takes at the bottom, in points, to keep a list's last row clear of it (its touches take the whole band, not just the buttons):
+
+- iOS: the band the bar adds over the content above the bottom safe area, measured from the screen's safe area (iOS 26 floats the bar inside a full-screen frame, so the bar's own frame says nothing). 0 where the bar doesn't sit under the content, such as a foldable's side column. While hidden, the band last measured, else the bar's own height.
+- Android: the floating button or toolbar's height plus its margin, above the navigation bar.
+
+`useBottomToolbarHeight()` keeps it up to date: it measures again once a `show` has settled and when the window changes size (rotation, a foldable opening). It reads 0 until the first answer.
+
+```tsx
+const toolbarHeight = useBottomToolbarHeight();
+// ...
+<FlatList ListFooterComponent={<View style={{ height: toolbarHeight }} />} />;
+```
+
 ### `hide()`
 
 ### `addPressListener(listener: (id: string) => void): () => void`

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

@@ -15,6 +15,7 @@ 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.Promise
 import com.facebook.react.bridge.ReactApplicationContext
 import com.facebook.react.bridge.ReadableArray
 import com.facebook.react.bridge.ReadableMap
@@ -70,6 +71,23 @@ class BottomToolbarModule(reactContext: ReactApplicationContext) :
     }
   }
 
+  /**
+   * The room at the bottom, in dp, above the navigation bar: the shown view's height
+   * plus its margin, else a FAB's (the Material 3 size), which a one-button `show` adds.
+   */
+  override fun getHeight(promise: Promise) {
+    UiThreadUtil.runOnUiThread {
+      val view = shown?.get()
+      val density = reactApplicationContext.resources.displayMetrics.density
+      val height = if (view != null && view.height > 0) {
+        view.height / density + MARGIN_DP
+      } else {
+        FAB_SIZE_DP + MARGIN_DP
+      }
+      promise.resolve(height.toDouble())
+    }
+  }
+
   override fun hide() {
     UiThreadUtil.runOnUiThread { removeShown(animated = true) }
   }
@@ -191,5 +209,7 @@ class BottomToolbarModule(reactContext: ReactApplicationContext) :
     private const val EXIT_DURATION = 200L
     private const val ENTER_OFFSET_DP = 24f
     private const val MARGIN_DP = 16f
+    // Material 3's regular FAB.
+    private const val FAB_SIZE_DP = 56f
   }
 }

package/ios/BottomToolbar.mm

@@ -12,6 +12,8 @@
  * hides it on leave.
  */
 @implementation BottomToolbar {
+  /** The band last measured while the bar was shown, in points. */
+  NSNumber *_measuredHeight;
   __weak UIViewController *_owner;
   /** The navigation bar's tint, as last read undimmed. */
   UIColor *_barTint;
@@ -137,6 +139,32 @@ static UINavigationController *VisibleNavigationController(void)
   }
 }
 
+- (void)getHeight:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    UINavigationController *navigation =
+        self->_owner.navigationController ?: VisibleNavigationController();
+    UIToolbar *toolbar = navigation.toolbar;
+    UIView *top = navigation.topViewController.viewIfLoaded;
+    if (toolbar == nil || top == nil) {
+      resolve(self->_measuredHeight ?: @0);
+      return;
+    }
+    if (!navigation.toolbarHidden) {
+      // UIKit adds the bar's band to the screen's bottom safe area: measured there, as
+      // the bar's own frame is the whole screen on iOS 26 (it floats inside it). 0 where
+      // the bar doesn't sit under the content, e.g. a foldable's side column.
+      CGFloat band = top.safeAreaInsets.bottom - navigation.view.safeAreaInsets.bottom;
+      self->_measuredHeight = @(MAX(0, band));
+      resolve(self->_measuredHeight);
+      return;
+    }
+    // Hidden: the band last measured, else the bar's own height (without iOS 26's gap
+    // under it, which only shows once the bar does).
+    resolve(self->_measuredHeight ?: @([toolbar sizeThatFits:navigation.view.bounds.size].height));
+  });
+}
+
 - (void)hide
 {
   // The owner is kept (weakly) for the next `show`: a modal over it hides the toolbar,

package/lib/module/NativeBottomToolbar.js.map

@@ -1 +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":[]}
+{"version":3,"names":["TurboModuleRegistry","get"],"sourceRoot":"../../src","sources":["NativeBottomToolbar.ts"],"mappings":";;AAEA,SAASA,mBAAmB,QAAQ,cAAc;AAkClD,eAAeA,mBAAmB,CAACC,GAAG,CAAO,eAAe,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
-import { processColor } from 'react-native';
+import { useEffect, useState } from 'react';
+import { processColor, useWindowDimensions } 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;
@@ -39,14 +40,66 @@ export function show(items, options = {}) {
   } : item), typeof tintColor === 'number' ? {
     tintColor
   } : {});
+  // Once the bar has slid in (and any push has landed), its band is final.
+  setTimeout(refreshHeight, SETTLE_MS);
 }
 
+/** Longer than UIKit's toolbar and push animations. */
+const SETTLE_MS = 600;
+
 /** Hides the toolbar. */
 export function hide() {
   buttons = [];
   NativeBottomToolbar?.hide();
 }
 
+/**
+ * The room the toolbar takes at the bottom of the screen, in points: on iOS the
+ * band it adds over the content above the bottom safe area (so not the home
+ * indicator; 0 where the bar doesn't sit under the content, e.g. a foldable's side
+ * column), on Android above the navigation bar. While hidden, the size it last
+ * took, so a list can keep that much room under its last row without jumping when
+ * the toolbar comes and goes. 0 without the native module.
+ */
+export function getHeight() {
+  return NativeBottomToolbar?.getHeight() ?? Promise.resolve(0);
+}
+let lastHeight = 0;
+const heightListeners = new Set();
+
+/** Measures the band again and tells `useBottomToolbarHeight` users if it changed. */
+function refreshHeight() {
+  getHeight().then(height => {
+    if (height !== lastHeight) {
+      lastHeight = height;
+      heightListeners.forEach(listener => listener(height));
+    }
+  });
+}
+
+/**
+ * `getHeight`, kept up to date: measured again once a `show` has settled (the band
+ * is only exact once the bar is on screen) and when the window changes size (a
+ * rotation, a foldable opening). 0 until the first answer.
+ */
+export function useBottomToolbarHeight() {
+  const [height, setHeight] = useState(lastHeight);
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = useWindowDimensions();
+  useEffect(() => {
+    heightListeners.add(setHeight);
+    return () => {
+      heightListeners.delete(setHeight);
+    };
+  }, []);
+  useEffect(() => {
+    refreshHeight();
+  }, [windowHeight, windowWidth]);
+  return height;
+}
+
 /**
  * Calls `listener` with the id of each tapped button, in addition to that
  * button's own `onPress`. Returns the unsubscribe function.

package/lib/module/index.js.map

@@ -1 +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":[]}
+{"version":3,"names":["useEffect","useState","processColor","useWindowDimensions","NativeBottomToolbar","isAvailable","buttons","show","items","options","some","isButton","hide","filter","tintColor","map","item","accessibilityLabel","title","onPress","undefined","type","setTimeout","refreshHeight","SETTLE_MS","getHeight","Promise","resolve","lastHeight","heightListeners","Set","then","height","forEach","listener","useBottomToolbarHeight","setHeight","windowHeight","width","windowWidth","add","delete","addPressListener","subscription","onItemPress","remove","id","find","button"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -19,6 +19,11 @@ type NativeToolbarOptions = {
     tintColor?: number;
 };
 export interface Spec extends TurboModule {
+    /**
+     * The room the toolbar takes at the bottom, in points: above the bottom safe area on
+     * iOS, above the navigation bar on Android. Its size when shown, even while hidden.
+     */
+    getHeight(): Promise<number>;
     hide(): void;
     readonly onItemPress: CodegenTypes.EventEmitter<string>;
     show(items: NativeToolbarItem[], options: NativeToolbarOptions): void;

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

@@ -1 +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"}
+{"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;;;OAGG;IACH,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAC7B,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

@@ -20,6 +20,21 @@ export declare const isAvailable: boolean;
 export declare function show(items: ToolbarItem[], options?: ToolbarOptions): void;
 /** Hides the toolbar. */
 export declare function hide(): void;
+/**
+ * The room the toolbar takes at the bottom of the screen, in points: on iOS the
+ * band it adds over the content above the bottom safe area (so not the home
+ * indicator; 0 where the bar doesn't sit under the content, e.g. a foldable's side
+ * column), on Android above the navigation bar. While hidden, the size it last
+ * took, so a list can keep that much room under its last row without jumping when
+ * the toolbar comes and goes. 0 without the native module.
+ */
+export declare function getHeight(): Promise<number>;
+/**
+ * `getHeight`, kept up to date: measured again once a `show` has settled (the band
+ * is only exact once the bar is on screen) and when the window changes size (a
+ * rotation, a foldable opening). 0 until the first answer.
+ */
+export declare function useBottomToolbarHeight(): number;
 /**
  * Calls `listener` with the id of each tapped button, in addition to that
  * button's own `onPress`. Returns the unsubscribe function.

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,WAAW,EAAE,cAAc,EAAE,MAAM,YAAS,CAAC;AAO1E,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,QAyBtE;AAKD,yBAAyB;AACzB,wBAAgB,IAAI,SAGnB;AAED;;;;;;;GAOG;AACH,wBAAgB,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAE3C;AAeD;;;;GAIG;AACH,wBAAgB,sBAAsB,IAAI,MAAM,CAa/C;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,0BAG9D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@27appstudio/react-native-bottom-toolbar",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "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",

package/src/NativeBottomToolbar.ts

@@ -24,6 +24,11 @@ type NativeToolbarOptions = {
 };
 
 export interface Spec extends TurboModule {
+  /**
+   * The room the toolbar takes at the bottom, in points: above the bottom safe area on
+   * iOS, above the navigation bar on Android. Its size when shown, even while hidden.
+   */
+  getHeight(): Promise<number>;
   hide(): void;
   readonly onItemPress: CodegenTypes.EventEmitter<string>;
   show(items: NativeToolbarItem[], options: NativeToolbarOptions): void;

package/src/index.tsx

@@ -1,6 +1,7 @@
 import type { ToolbarButton, ToolbarItem, ToolbarOptions } from './types';
 
-import { processColor } from 'react-native';
+import { useEffect, useState } from 'react';
+import { processColor, useWindowDimensions } from 'react-native';
 
 import NativeBottomToolbar from './NativeBottomToolbar';
 
@@ -54,14 +55,64 @@ export function show(items: ToolbarItem[], options: ToolbarOptions = {}) {
     ),
     typeof tintColor === 'number' ? { tintColor } : {}
   );
+  // Once the bar has slid in (and any push has landed), its band is final.
+  setTimeout(refreshHeight, SETTLE_MS);
 }
 
+/** Longer than UIKit's toolbar and push animations. */
+const SETTLE_MS = 600;
+
 /** Hides the toolbar. */
 export function hide() {
   buttons = [];
   NativeBottomToolbar?.hide();
 }
 
+/**
+ * The room the toolbar takes at the bottom of the screen, in points: on iOS the
+ * band it adds over the content above the bottom safe area (so not the home
+ * indicator; 0 where the bar doesn't sit under the content, e.g. a foldable's side
+ * column), on Android above the navigation bar. While hidden, the size it last
+ * took, so a list can keep that much room under its last row without jumping when
+ * the toolbar comes and goes. 0 without the native module.
+ */
+export function getHeight(): Promise<number> {
+  return NativeBottomToolbar?.getHeight() ?? Promise.resolve(0);
+}
+
+let lastHeight = 0;
+const heightListeners = new Set<(height: number) => void>();
+
+/** Measures the band again and tells `useBottomToolbarHeight` users if it changed. */
+function refreshHeight() {
+  getHeight().then((height) => {
+    if (height !== lastHeight) {
+      lastHeight = height;
+      heightListeners.forEach((listener) => listener(height));
+    }
+  });
+}
+
+/**
+ * `getHeight`, kept up to date: measured again once a `show` has settled (the band
+ * is only exact once the bar is on screen) and when the window changes size (a
+ * rotation, a foldable opening). 0 until the first answer.
+ */
+export function useBottomToolbarHeight(): number {
+  const [height, setHeight] = useState(lastHeight);
+  const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+  useEffect(() => {
+    heightListeners.add(setHeight);
+    return () => {
+      heightListeners.delete(setHeight);
+    };
+  }, []);
+  useEffect(() => {
+    refreshHeight();
+  }, [windowHeight, windowWidth]);
+  return height;
+}
+
 /**
  * Calls `listener` with the id of each tapped button, in addition to that
  * button's own `onPress`. Returns the unsubscribe function.