@27appstudio/react-native-bottom-toolbar 0.1.2 → 0.2.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
 
@@ -124,7 +124,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/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/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.2.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/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]);
 }