@oxyhq/bloom 1.11.0 → 1.13.0

package/src/layout/bottom-edge.tsx

@@ -27,20 +27,27 @@
  * edge, so two surfaces at that edge overlap rather than stack; the tallest is
  * what a new surface has to clear. Summing would strand it at twice the height.
  *
- * ## Two numbers, because there are two questions
+ * ## What does NOT belong here: the collapse
  *
- * A surface that collapses — the tab bar minimizes 58 -> 44 on scroll — occupies
- * less than it reserves. Readers want different halves of that:
+ * The tab bar minimizes 58 -> 44 on scroll, and this registry twice tried to
+ * publish that so a FAB could react — first as a live pixel height (1.11.0), then
+ * as a boolean (1.12.0). Both felt wrong on a device, for the same reason, and
+ * the reason is structural rather than a matter of tuning:
  *
- *   - RESERVED (`useBottomEdgeInset`) never shrinks while the claimant is
- *     mounted. It is what must be kept permanently free: a list's bottom
- *     padding, a toast stack's offset. Tracking the collapse here would jitter a
- *     list's content size on every scroll and jump a toast 14px mid-display.
- *   - LIVE (`useBottomEdgeLiveInset`) follows the collapse. It is what a surface
- *     SITTING ON the edge wants, so it rides down with the bar instead of
- *     leaving a hole.
+ *   the bar animates on the UI thread, while anything reading it from here
+ *   arrives via `runOnJS` plus two React render passes.
  *
- * A claimant that never collapses passes one number and both answers agree.
+ * So a consumer's reaction STARTS one to three frames after the bar's, and the
+ * delay is variable — worst exactly while scrolling, because that is when the JS
+ * thread is busiest. Fading instead of moving does not hide it either: the eye
+ * still sees two pieces of chrome change at different moments.
+ *
+ * A collapse is MOTION, and motion that must stay in lock-step with a
+ * reanimated animation has to travel as a shared value on the UI thread. React
+ * state is the wrong transport at any width, so it is not offered here at all.
+ * The app owns that signal — Mention drives its header, its bar and its FAB from
+ * one `SharedValue` through `useAnimatedStyle` — and this registry stays what it
+ * is good at: GEOMETRY. Where things are, not when they move.
  *
  * ## Why an external store
  *
@@ -60,46 +67,33 @@ import {
   type PropsWithChildren,
 } from 'react';
 
-interface Claim {
-  /** What the surface keeps permanently free, collapsed or not. */
-  reserved: number;
-  /** What it occupies right now. */
-  current: number;
-}
-
 interface BottomEdgeStore {
   subscribe: (onChange: () => void) => () => void;
   /**
-   * The cached totals. Each returns the SAME number until a claim actually
-   * changes it — `useSyncExternalStore` re-renders forever if the snapshot is
-   * recomputed per call, and a reader of one channel must not re-render when
-   * only the other moved.
+   * The cached total. Returns the SAME number until a claim actually changes it
+   * — `useSyncExternalStore` re-renders forever if the snapshot is recomputed
+   * per call.
    */
-  getReserved: () => number;
-  getLive: () => number;
-  claim: (id: string, reserved: number, current: number) => void;
+  getInset: () => number;
+  claim: (id: string, height: number) => void;
   release: (id: string) => void;
 }
 
 function createBottomEdgeStore(): BottomEdgeStore {
-  const claims = new Map<string, Claim>();
+  const claims = new Map<string, number>();
   const listeners = new Set<() => void>();
-  let reserved = 0;
-  let live = 0;
+  let inset = 0;
 
   const recompute = () => {
-    let nextReserved = 0;
-    let nextLive = 0;
-    for (const claim of claims.values()) {
-      if (claim.reserved > nextReserved) nextReserved = claim.reserved;
-      if (claim.current > nextLive) nextLive = claim.current;
+    let next = 0;
+    for (const height of claims.values()) {
+      if (height > next) next = height;
     }
-    // Bail before notifying: a re-registration at unchanged heights (every
+    // Bail before notifying: a re-registration at an unchanged height (every
     // render of a claimant whose footprint did not move) must not re-render
     // every reader.
-    if (nextReserved === reserved && nextLive === live) return;
-    reserved = nextReserved;
-    live = nextLive;
+    if (next === inset) return;
+    inset = next;
     for (const listener of listeners) listener();
   };
 
@@ -110,12 +104,10 @@ function createBottomEdgeStore(): BottomEdgeStore {
         listeners.delete(onChange);
       };
     },
-    getReserved: () => reserved,
-    getLive: () => live,
-    claim(id, nextReserved, nextCurrent) {
-      const existing = claims.get(id);
-      if (existing?.reserved === nextReserved && existing.current === nextCurrent) return;
-      claims.set(id, { reserved: nextReserved, current: nextCurrent });
+    getInset: () => inset,
+    claim(id, height) {
+      if (claims.get(id) === height) return;
+      claims.set(id, height);
       recompute();
     },
     release(id) {
@@ -146,15 +138,13 @@ const NO_SUBSCRIPTION = () => () => {};
 const NO_INSET = () => 0;
 
 /**
- * How much of the bottom edge is permanently RESERVED, in px.
+ * How much of the bottom edge is already occupied, in px.
  *
- * Never shrinks while its claimant is mounted, so it is the number for anything
- * that must not move as the user scrolls — a list's bottom padding, a toast
- * stack's offset:
+ * Add it to whatever offset the surface would otherwise use:
  *
  * ```tsx
- * const reserved = useBottomEdgeInset();
- * <FlatList contentContainerStyle={{ paddingBottom: reserved + 12 }} />
+ * const occupied = useBottomEdgeInset();
+ * <View style={{ position: 'absolute', bottom: windowEdgeGap(insets.bottom) + occupied }} />
  * ```
  *
  * `0` outside a provider, and `0` on the first commit even inside one — a claim
@@ -166,54 +156,29 @@ export function useBottomEdgeInset(): number {
   const store = useContext(BottomEdgeContext);
   return useSyncExternalStore(
     store?.subscribe ?? NO_SUBSCRIPTION,
-    store?.getReserved ?? NO_INSET,
-    store?.getReserved ?? NO_INSET,
-  );
-}
-
-/**
- * How much of the bottom edge is occupied RIGHT NOW, in px — the same number as
- * {@link useBottomEdgeInset} for a surface that does not collapse, and smaller
- * while one does.
- *
- * This is what a surface sitting ON the edge wants, so it rides down with a
- * minimizing tab bar rather than leaving a hole above it. It changes when the
- * collapse STATE changes, not per frame: a claimant reports its settled
- * footprint and the reader animates the difference itself, which keeps the
- * motion on whatever animation system that reader already uses instead of
- * forcing a shared one through React state.
- */
-export function useBottomEdgeLiveInset(): number {
-  const store = useContext(BottomEdgeContext);
-  return useSyncExternalStore(
-    store?.subscribe ?? NO_SUBSCRIPTION,
-    store?.getLive ?? NO_INSET,
-    store?.getLive ?? NO_INSET,
+    store?.getInset ?? NO_INSET,
+    store?.getInset ?? NO_INSET,
   );
 }
 
 /**
- * Claim the bottom edge for as long as the caller is mounted.
+ * Claim `height` px of the bottom edge for as long as the caller is mounted.
  *
  * The claimant owns its own placement — claiming does not move it. It declares
- * the space it occupies so that everything reading the edge stays off it. Pass
- * the FULL footprint (the surface's height plus the gap it holds off the window
- * edge), which is the same number the surface positions itself with.
- *
- * `current` is what the surface occupies right now; it defaults to `reserved`,
- * which is correct for anything that does not collapse. A surface that shrinks
- * on scroll passes its live footprint as `current` and keeps `reserved` at its
- * full size — see the two channels above for why both are needed.
+ * the space it occupies so that everything reading `useBottomEdgeInset()` stays
+ * off it. Pass the FULL footprint (the surface's height plus the gap it holds
+ * off the window edge), which is the same number the surface positions itself
+ * with.
  *
  * A no-op outside a provider, so a surface stays usable standalone.
  */
-export function useClaimBottomEdge(reserved: number, current: number = reserved): void {
+export function useClaimBottomEdge(height: number): void {
   const store = useContext(BottomEdgeContext);
   const id = useId();
 
   useEffect(() => {
     if (!store) return;
-    store.claim(id, reserved, current);
+    store.claim(id, height);
     return () => store.release(id);
-  }, [store, id, reserved, current]);
+  }, [store, id, height]);
 }

package/src/layout/index.ts

@@ -5,9 +5,4 @@
  * parked there". A surface that floats at the bottom needs both.
  */
 export { EDGE_GAP, windowEdgeGap } from './edge';
-export {
-  BottomEdgeProvider,
-  useBottomEdgeInset,
-  useBottomEdgeLiveInset,
-  useClaimBottomEdge,
-} from './bottom-edge';
+export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from './bottom-edge';

package/src/tab-bar/TabBarBase.tsx

@@ -20,7 +20,6 @@ import {
   useContext,
   useEffect,
   useMemo,
-  useState,
   type ComponentType,
 } from 'react';
 import { Pressable, StyleSheet, useWindowDimensions, View, type ViewStyle } from 'react-native';
@@ -30,7 +29,6 @@ import Animated, {
   interpolate,
   interpolateColor,
   runOnJS,
-  useAnimatedReaction,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
@@ -424,36 +422,13 @@ function TabBarBody({
   // its own layout can never drift from where the bar actually sits.
   const bottomOffset = windowEdgeGap(insets.bottom);
 
-  // Whether the bar has settled into its minimized size, as REACT state.
-  //
-  // Reacting on `target` rather than on `progress` is what keeps this cheap:
-  // `target` is the binary 0/1 the minimize spring is heading for, so this fires
-  // twice per scroll gesture instead of once per frame. Crossing `progress > 0.5`
-  // would work too and would cost the same, but it would report the change
-  // halfway through the animation rather than when it was decided.
-  const [isMinimized, setIsMinimized] = useState(false);
-  useAnimatedReaction(
-    () => minimized.target.value,
-    (target, previous) => {
-      if (target !== previous) runOnJS(setIsMinimized)(target === 1);
-    },
-    [minimized],
-  );
-
   // Publish what the bar occupies so anything else at this edge stacks above it
-  // rather than behind it. Same numbers `useTabBarFootprint` reports, derived
-  // from the same geometry, so a consumer reading either can never disagree with
-  // where the bar actually sits.
-  //
-  // RESERVED stays the EXPANDED height: the bar re-expands the moment the user
-  // scrolls back up, so anything that permanently reserves space (a list's
-  // bottom padding, a toast) must keep room for the full pill or it would jitter
-  // on every scroll. LIVE follows the minimize, so a surface sitting ON the edge
-  // rides down with the bar instead of leaving a 14px hole above it.
-  useClaimBottomEdge(
-    bottomOffset + EXPANDED_HEIGHT,
-    bottomOffset + (isMinimized ? MINIMIZED_HEIGHT : EXPANDED_HEIGHT),
-  );
+  // rather than behind it. Same number `useTabBarFootprint` reports, derived from
+  // the same two values, so a consumer reading either can never disagree with
+  // where the bar actually sits. The EXPANDED height on purpose: the bar
+  // minimizes on scroll and re-expands, so claiming the minimized height would
+  // drop a FAB onto the pill the moment the user scrolled back up.
+  useClaimBottomEdge(bottomOffset + EXPANDED_HEIGHT);
 
   // How centring and the animated inset compose: centring is STATIC and belongs
   // to the wrap, the inset stays ANIMATED on the pill inside it. The wrap is