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

package/README.md

@@ -70,7 +70,7 @@ function ExpenseScreen({
 }
 ```
 
-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.
+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. New `items` or `options` update a toolbar already on screen, and an empty array hides it, so memoize them (`useMemo`) rather than building a new array on every render.
 
 ### Without React Navigation
 
@@ -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`
@@ -124,7 +139,7 @@ Called for every button tap, in addition to that button's own `onPress`.
 
 ### `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.
+Imported from `/react-navigation`. New `items` or `options` update the toolbar while the screen is on top (an empty array hides it); they never resubscribe the navigation listeners. Memoize them, or every render sends them to the native side again.
 
 ## Platform notes
 

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/module/react-navigation/index.js

@@ -10,9 +10,10 @@ import { hide, show } from "../index.js";
  *
  * 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.
+ * returning from a modal (`focus`); and hidden on `blur`. While the screen is
+ * on top, new `items` or `options` update the toolbar (an empty array hides
+ * it), so memoize them (`useMemo`): a new array on every render would send it
+ * to the native side every time.
  */
 export function useBottomToolbar(navigation, items, options) {
   const latest = useRef({
@@ -23,24 +24,31 @@ export function useBottomToolbar(navigation, items, options) {
     items,
     options
   };
+  // Whether the push has landed, so `show` reaches this screen and not the one
+  // below; and what was last sent, so an update only goes out when it changed.
+  const arrived = useRef(false);
+  const shown = useRef(undefined);
   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);
+    const showLatest = () => {
+      shown.current = latest.current;
+      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) {
+    arrived.current = navigation.isFocused() && navigation.getState().index === 0;
+    if (arrived.current) {
       showLatest();
     }
     const offTransitionEnd = navigation.addListener('transitionEnd', event => {
       if (!event.data.closing) {
-        arrived = true;
+        arrived.current = true;
         showLatest();
       }
     });
     const offFocus = navigation.addListener('focus', () => {
-      if (arrived) {
+      if (arrived.current) {
         showLatest();
       }
     });
@@ -52,5 +60,18 @@ export function useBottomToolbar(navigation, items, options) {
       hide();
     };
   }, [navigation]);
+
+  // New items or options on a screen whose toolbar is up: update it in place.
+  useEffect(() => {
+    const last = shown.current;
+    if (!arrived.current || !navigation.isFocused() || last && last.items === items && last.options === options) {
+      return;
+    }
+    shown.current = {
+      items,
+      options
+    };
+    show(items, options);
+  }, [items, navigation, options]);
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +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":[]}
+{"version":3,"names":["useEffect","useRef","hide","show","useBottomToolbar","navigation","items","options","latest","current","arrived","shown","undefined","showLatest","isFocused","getState","index","offTransitionEnd","addListener","event","data","closing","offFocus","offBlur","last"],"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;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;EACnC;EACA;EACA,MAAMG,OAAO,GAAGT,MAAM,CAAC,KAAK,CAAC;EAC7B,MAAMU,KAAK,GAAGV,MAAM,CAElBW,SAAS,CAAC;EAEZZ,SAAS,CAAC,MAAM;IACd;IACA;IACA,MAAMa,UAAU,GAAGA,CAAA,KAAM;MACvBF,KAAK,CAACF,OAAO,GAAGD,MAAM,CAACC,OAAO;MAC9BN,IAAI,CAACK,MAAM,CAACC,OAAO,CAACH,KAAK,EAAEE,MAAM,CAACC,OAAO,CAACF,OAAO,CAAC;IACpD,CAAC;IACD;IACA;IACAG,OAAO,CAACD,OAAO,GACbJ,UAAU,CAACS,SAAS,CAAC,CAAC,IAAIT,UAAU,CAACU,QAAQ,CAAC,CAAC,CAACC,KAAK,KAAK,CAAC;IAC7D,IAAIN,OAAO,CAACD,OAAO,EAAE;MACnBI,UAAU,CAAC,CAAC;IACd;IAEA,MAAMI,gBAAgB,GAAGZ,UAAU,CAACa,WAAW,CAC7C,eAAe,EACdC,KAAK,IAAK;MACT,IAAI,CAACA,KAAK,CAACC,IAAI,CAACC,OAAO,EAAE;QACvBX,OAAO,CAACD,OAAO,GAAG,IAAI;QACtBI,UAAU,CAAC,CAAC;MACd;IACF,CACF,CAAC;IACD,MAAMS,QAAQ,GAAGjB,UAAU,CAACa,WAAW,CAAC,OAAO,EAAE,MAAM;MACrD,IAAIR,OAAO,CAACD,OAAO,EAAE;QACnBI,UAAU,CAAC,CAAC;MACd;IACF,CAAC,CAAC;IACF,MAAMU,OAAO,GAAGlB,UAAU,CAACa,WAAW,CAAC,MAAM,EAAEhB,IAAI,CAAC;IAEpD,OAAO,MAAM;MACXe,gBAAgB,CAAC,CAAC;MAClBK,QAAQ,CAAC,CAAC;MACVC,OAAO,CAAC,CAAC;MACTrB,IAAI,CAAC,CAAC;IACR,CAAC;EACH,CAAC,EAAE,CAACG,UAAU,CAAC,CAAC;;EAEhB;EACAL,SAAS,CAAC,MAAM;IACd,MAAMwB,IAAI,GAAGb,KAAK,CAACF,OAAO;IAC1B,IACE,CAACC,OAAO,CAACD,OAAO,IAChB,CAACJ,UAAU,CAACS,SAAS,CAAC,CAAC,IACtBU,IAAI,IAAIA,IAAI,CAAClB,KAAK,KAAKA,KAAK,IAAIkB,IAAI,CAACjB,OAAO,KAAKA,OAAQ,EAC1D;MACA;IACF;IACAI,KAAK,CAACF,OAAO,GAAG;MAAEH,KAAK;MAAEC;IAAQ,CAAC;IAClCJ,IAAI,CAACG,KAAK,EAAEC,OAAO,CAAC;EACtB,CAAC,EAAE,CAACD,KAAK,EAAED,UAAU,EAAEE,OAAO,CAAC,CAAC;AAClC","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/lib/typescript/src/react-navigation/index.d.ts

@@ -8,9 +8,10 @@ import type { ToolbarItem, ToolbarOptions } from '../types.js';
  *
  * 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.
+ * returning from a modal (`focus`); and hidden on `blur`. While the screen is
+ * on top, new `items` or `options` update the toolbar (an empty array hides
+ * it), so memoize them (`useMemo`): a new array on every render would send it
+ * to the native side every time.
  */
 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

@@ -1 +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"}
+{"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;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,yBAAyB,CAAC,aAAa,CAAC,EACpD,KAAK,EAAE,WAAW,EAAE,EACpB,OAAO,CAAC,EAAE,cAAc,QA+DzB"}

package/package.json

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

package/src/react-navigation/index.ts

@@ -13,9 +13,10 @@ import { hide, show } from '../index';
  *
  * 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.
+ * returning from a modal (`focus`); and hidden on `blur`. While the screen is
+ * on top, new `items` or `options` update the toolbar (an empty array hides
+ * it), so memoize them (`useMemo`): a new array on every render would send it
+ * to the native side every time.
  */
 export function useBottomToolbar(
   navigation: NativeStackNavigationProp<ParamListBase>,
@@ -24,15 +25,25 @@ export function useBottomToolbar(
 ) {
   const latest = useRef({ items, options });
   latest.current = { items, options };
+  // Whether the push has landed, so `show` reaches this screen and not the one
+  // below; and what was last sent, so an update only goes out when it changed.
+  const arrived = useRef(false);
+  const shown = useRef<
+    { items: ToolbarItem[]; options?: ToolbarOptions } | undefined
+  >(undefined);
 
   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);
+    const showLatest = () => {
+      shown.current = latest.current;
+      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) {
+    arrived.current =
+      navigation.isFocused() && navigation.getState().index === 0;
+    if (arrived.current) {
       showLatest();
     }
 
@@ -40,13 +51,13 @@ export function useBottomToolbar(
       'transitionEnd',
       (event) => {
         if (!event.data.closing) {
-          arrived = true;
+          arrived.current = true;
           showLatest();
         }
       }
     );
     const offFocus = navigation.addListener('focus', () => {
-      if (arrived) {
+      if (arrived.current) {
         showLatest();
       }
     });
@@ -59,4 +70,18 @@ export function useBottomToolbar(
       hide();
     };
   }, [navigation]);
+
+  // New items or options on a screen whose toolbar is up: update it in place.
+  useEffect(() => {
+    const last = shown.current;
+    if (
+      !arrived.current ||
+      !navigation.isFocused() ||
+      (last && last.items === items && last.options === options)
+    ) {
+      return;
+    }
+    shown.current = { items, options };
+    show(items, options);
+  }, [items, navigation, options]);
 }