@momo-kits/foundation 0.168.1-beta.2 → 0.168.1-beta.21

package/Application/BottomTab/useLiquidSelection.ts

@@ -0,0 +1,374 @@
+import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { Gesture } from 'react-native-gesture-handler';
+import {
+  clamp,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { ApplicationContext } from '../../Context';
+
+type Axis = 'x' | 'y';
+
+type Options = {
+  count: number;
+  // distance between two neighbouring tab centers
+  pitch: number;
+  // position of the first tab's center inside the gesture view
+  firstCenter: number;
+  axis: Axis;
+  index: number;
+  onSelect: (index: number) => void;
+};
+
+const SPRING = { damping: 18, stiffness: 220, mass: 0.8 };
+// the lens trails the finger a little while dragged, like the system tab bar
+const DRAG_SPRING = { damping: 24, stiffness: 600, mass: 0.6 };
+const REDUCED_TIMING = { duration: 200 };
+// while pressed the selection bubble grows into a lens past the bar's edges (80x54 to about 96x70)
+const LENS_SCALE_X = 1.2;
+const LENS_SCALE_Y = 1.3;
+// a moving lens stretches along its path and thins across it, eased per frame so the
+// shape follows the speed smoothly
+const STRETCH_PER_POINT = 0.012;
+const MAX_STRETCH = 0.25;
+const STRETCH_EASING = 0.25;
+// once eased below this the lens is round again
+const REST_STRETCH = 0.002;
+// a tap is shorter than the lift: the lens finishes rising, then settles, one smooth pulse
+const TAP_LIFT_DURATION = 120;
+// the bar swells a little under the finger
+const BAR_SWELL = 0.04;
+// the tab the lens lands on pops
+const ICON_POP = 1.15;
+// movement before a press turns into a drag, below it the tab's touchable handles the tap
+const DRAG_SLOP = 10;
+// UIScrollView rubber band constant
+const RUBBER_BAND = 0.55;
+// a cancelled press or a prevented switch: the lens returns to the selected tab after this
+const RESYNC_DELAY = 100;
+
+/**
+ * resistance past the first and last tab, the further the finger goes the less the lens follows
+ */
+const rubberBand = (value: number, max: number, dimension: number) => {
+  'worklet';
+  const band = (overshoot: number) =>
+    (1 - 1 / ((overshoot * RUBBER_BAND) / dimension + 1)) * dimension;
+  if (value < 0) {
+    return -band(-value);
+  }
+  if (value > max) {
+    return max + band(value - max);
+  }
+  return value;
+};
+
+/**
+ * iOS 26 tab bar selection motion, without the glass material:
+ * - press lifts the selection into a lens over the pressed tab and swells the bar, release
+ *   settles it back (the tab's touchable drives this through pressIn / pressOut)
+ * - dragging slides the lens under the finger, stretched by its speed and rubber banded
+ *   past the ends, with a tick on each tab it enters; releasing selects the tab under it.
+ *   The drag cancels the touchable once it activates, so a press is either a tap or a drag
+ */
+const useLiquidSelection = ({
+  count,
+  pitch,
+  firstCenter,
+  axis,
+  index,
+  onSelect,
+}: Options) => {
+  const { navigator } = useContext<any>(ApplicationContext);
+  const reduceMotion = useReducedMotion();
+
+  const offset = useSharedValue(index * pitch);
+  // where the lens is heading, so a re-render doesn't restart a spring already going there
+  const destination = useSharedValue(index * pitch);
+  const selected = useSharedValue(index);
+  const hovered = useSharedValue(index);
+  const lift = useSharedValue(0);
+  const dragging = useSharedValue(false);
+  const stretch = useSharedValue(0);
+  const metrics = useSharedValue({ count, pitch, firstCenter });
+  const measured = useRef(pitch > 0);
+
+  const indexRef = useRef(index);
+  const pitchRef = useRef(pitch);
+  // read through refs so the gesture is never rebuilt mid drag
+  const callbacks = useRef({ onSelect, navigator });
+  indexRef.current = index;
+  pitchRef.current = pitch;
+  callbacks.current = { onSelect, navigator };
+
+  useEffect(() => {
+    metrics.value = { count, pitch, firstCenter };
+  }, [count, pitch, firstCenter, metrics]);
+
+  const move = useCallback(
+    (target: number, velocity: number, config: typeof SPRING) => {
+      'worklet';
+      if (destination.value === target && velocity === 0) {
+        return;
+      }
+      destination.value = target;
+      offset.value = reduceMotion
+        ? withTiming(target, REDUCED_TIMING)
+        : withSpring(target, { ...config, velocity });
+    },
+    [offset, destination, reduceMotion],
+  );
+
+  useEffect(() => {
+    const target = index * pitch;
+    selected.value = index;
+    // snap on first layout so the lens doesn't slide in from the leading edge
+    if (measured.current) {
+      move(target, 0, SPRING);
+    } else {
+      destination.value = target;
+      offset.value = target;
+    }
+    measured.current = pitch > 0;
+  }, [index, pitch, offset, destination, selected, move]);
+
+  useAnimatedReaction(
+    () => offset.value,
+    (current, previous) => {
+      if (previous === null || reduceMotion) {
+        return;
+      }
+      const target = Math.min(
+        Math.abs(current - previous) * STRETCH_PER_POINT,
+        MAX_STRETCH,
+      );
+      // eased both ways: a slow frame (e.g. the spring turning at its overshoot) must not
+      // snap the shape
+      const next = stretch.value + (target - stretch.value) * STRETCH_EASING;
+      stretch.value = next < REST_STRETCH ? 0 : next;
+    },
+    [reduceMotion],
+  );
+
+  /**
+   * returns the lens to the selected tab unless a switch to where it is heading happened
+   */
+  const resync = useCallback(() => {
+    setTimeout(() => {
+      const target = indexRef.current * pitchRef.current;
+      if (!dragging.value && destination.value !== target) {
+        move(target, 0, SPRING);
+      }
+    }, RESYNC_DELAY);
+  }, [destination, dragging, move]);
+
+  const pressIn = (itemIndex: number) => {
+    // the lens heads to the pressed tab, not only the selected one
+    move(itemIndex * pitch, 0, SPRING);
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+
+  /**
+   * false when a drag took the press over
+   */
+  const pressOut = () => {
+    // a drag taking over cancels the touchable, the drag owns the lens from there
+    if (dragging.value) {
+      return false;
+    }
+    if (!reduceMotion) {
+      lift.value = withSequence(
+        withTiming(1, { duration: TAP_LIFT_DURATION }),
+        withSpring(0, SPRING),
+      );
+    }
+    // the lens keeps heading to the pressed tab: onPress switches to it, and a cancelled
+    // press brings it back
+    resync();
+    return true;
+  };
+
+  const tick = useCallback(() => {
+    callbacks.current.navigator?.maxApi?.triggerEventVibration?.('light');
+  }, []);
+
+  const select = useCallback(
+    (target: number) => {
+      callbacks.current.onSelect(target);
+      resync();
+    },
+    [resync],
+  );
+
+  const gesture = useMemo(() => {
+    const position = (e: { x: number; y: number }) => {
+      'worklet';
+      return (axis === 'x' ? e.x : e.y) - metrics.value.firstCenter;
+    };
+    const nearest = (value: number) => {
+      'worklet';
+      const { count: tabs, pitch: step } = metrics.value;
+      return step > 0 ? clamp(Math.round(value / step), 0, tabs - 1) : 0;
+    };
+
+    return Gesture.Pan()
+      .minDistance(DRAG_SLOP)
+      .shouldCancelWhenOutside(false)
+      .onStart(e => {
+        dragging.value = true;
+        hovered.value = nearest(position(e));
+        if (!reduceMotion) {
+          lift.value = withSpring(1, SPRING);
+        }
+      })
+      .onUpdate(e => {
+        const { count: tabs, pitch: step } = metrics.value;
+        const value = position(e);
+        const target = nearest(value);
+        if (target !== hovered.value) {
+          hovered.value = target;
+          scheduleOnRN(tick);
+        }
+        const follow = rubberBand(value, (tabs - 1) * step, step);
+        if (reduceMotion) {
+          destination.value = follow;
+          offset.value = follow;
+        } else {
+          move(follow, 0, DRAG_SPRING);
+        }
+      })
+      .onEnd((e, success) => {
+        dragging.value = false;
+        lift.value = reduceMotion ? 0 : withSpring(0, SPRING);
+        const raw = axis === 'x' ? e.velocityX : e.velocityY;
+        const velocity = Number.isFinite(raw) ? raw : 0;
+        if (!success) {
+          move(selected.value * metrics.value.pitch, velocity, SPRING);
+          return;
+        }
+        const target = nearest(position(e));
+        move(target * metrics.value.pitch, velocity, SPRING);
+        scheduleOnRN(select, target);
+      });
+  }, [
+    axis,
+    reduceMotion,
+    offset,
+    destination,
+    selected,
+    hovered,
+    lift,
+    dragging,
+    metrics,
+    move,
+    tick,
+    select,
+  ]);
+
+  const bubbleStyle = useAnimatedStyle(() => {
+    const along = 1 + stretch.value;
+    const across = 1 - stretch.value * 0.5;
+    const lensX = 1 + lift.value * (LENS_SCALE_X - 1);
+    const lensY = 1 + lift.value * (LENS_SCALE_Y - 1);
+    return {
+      transform:
+        axis === 'x'
+          ? [
+              { translateX: offset.value },
+              { scaleX: lensX * along },
+              { scaleY: lensY * across },
+            ]
+          : [
+              { translateY: offset.value },
+              { scaleX: lensX * across },
+              { scaleY: lensY * along },
+            ],
+    };
+  });
+
+  const barStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * BAR_SWELL }],
+  }));
+
+  return {
+    gesture,
+    bubbleStyle,
+    barStyle,
+    pressIn,
+    pressOut,
+    offset,
+    selected,
+    pitch,
+    reduceMotion,
+  };
+};
+
+type LiquidSelection = ReturnType<typeof useLiquidSelection>;
+
+/**
+ * active tint of a tab follows the lens over it, and the tab the lens lands on pops
+ */
+const useLiquidItem = (
+  { offset, selected, pitch, reduceMotion }: LiquidSelection,
+  itemIndex: number,
+) => {
+  const pop = useSharedValue(1);
+
+  useAnimatedReaction(
+    () => selected.value === itemIndex,
+    (isSelected, wasSelected) => {
+      if (isSelected && wasSelected === false && !reduceMotion) {
+        pop.value = withSequence(
+          withTiming(ICON_POP, { duration: 120 }),
+          withSpring(1, SPRING),
+        );
+      }
+    },
+    [itemIndex, reduceMotion],
+  );
+
+  const activeStyle = useAnimatedStyle(() => {
+    if (pitch <= 0) {
+      return { opacity: selected.value === itemIndex ? 1 : 0 };
+    }
+    const distance = Math.abs(offset.value - itemIndex * pitch) / pitch;
+    return { opacity: clamp(1 - distance, 0, 1) };
+  });
+
+  const popStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: pop.value }],
+  }));
+
+  return { activeStyle, popStyle };
+};
+
+/**
+ * lift for a single button, e.g. the compressed rail
+ */
+const usePressLift = () => {
+  const reduceMotion = useReducedMotion();
+  const lift = useSharedValue(0);
+  const style = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + lift.value * (LENS_SCALE_X - 1) * 0.5 }],
+  }));
+  const onPressIn = () => {
+    if (!reduceMotion) {
+      lift.value = withSpring(1, SPRING);
+    }
+  };
+  const onPressOut = () => {
+    lift.value = withSpring(0, SPRING);
+  };
+  return { style, onPressIn, onPressOut };
+};
+
+export type { LiquidSelection };
+export { useLiquidSelection, useLiquidItem, usePressLift };

package/Application/Components/DuoGlassBackground.tsx

@@ -10,12 +10,10 @@ import { ApplicationContext } from '../../Context';
 import { Shadow } from '../../Consts';
 import { Image } from '../../Image';
 import { AnimatedCompatValue, useNormalizedSharedValue } from '../utils';
+import { useScreenLayout } from '../../Layout';
 
-// extended headers run their gradient this far below the header, as off Duo
 const EXTENDED_GRADIENT_EXTRA = 52;
-// scroll distance over which the extended gradient collapses to the header
 const EXTENDED_COLLAPSE_DISTANCE = 100;
-// scroll distance over which the bar material fades in
 const FADE_DISTANCE = 16;
 const TRANSLUCENT_ALPHA = 'CC';
 
@@ -25,11 +23,12 @@ const TRANSLUCENT_ALPHA = 'CC';
  */
 const DuoGlassBackground: React.FC<{
   animatedValue?: AnimatedCompatValue;
-  // scroll offset where the bar starts to show, e.g. below an animated banner
-  fadeStart?: number;
-}> = ({ animatedValue, fadeStart = 0 }) => {
+  bannerBottom?: number;
+}> = ({ animatedValue, bannerBottom = 0 }) => {
   const { theme } = useContext(ApplicationContext);
+  const { headerHeight } = useScreenLayout();
   const sharedValue = useNormalizedSharedValue(animatedValue);
+  const fadeStart = Math.max(bannerBottom - headerHeight, 0);
 
   const fadeStyle = useAnimatedStyle(() => ({
     opacity: interpolate(
@@ -68,7 +67,6 @@ const DuoScrollGradient: React.FC<{
   headerBackground?: string;
   heightHeader: number;
   extended?: boolean;
-  // quick return header: the gradient leaves with the content instead of fading
   followScroll?: boolean;
 }> = ({
   animatedValue,
@@ -147,7 +145,6 @@ const styles = StyleSheet.create({
     right: 0,
     overflow: 'hidden',
   },
-  // banner image keeps its 375:154 shape, the gradient box clips it
   gradientFill: {
     width: '100%',
     position: 'absolute',

package/Application/ModalScreen.tsx

@@ -18,7 +18,7 @@ import { Styles } from '../Consts';
 import Navigation from './Navigation';
 import { ModalParams } from './types';
 import BottomSheet from './BottomSheet';
-import { getDuoTopInset, isIPhoneDuo } from './device';
+import { getDuoModalBounds, isIPhoneDuo } from './device';
 import { scheduleOnRN } from 'react-native-worklets';
 
 const ModalScreen: React.FC<any> = props => {
@@ -42,6 +42,7 @@ const Modal: React.FC<ModalParams> = props => {
   const Component = useRef(screen).current;
   const insets = useSafeAreaInsets();
   const windowSize = useWindowDimensions();
+  const isDuo = isIPhoneDuo();
 
   /**
    * Fire auto_popup_displayed tracking event on mount
@@ -135,6 +136,7 @@ const Modal: React.FC<ModalParams> = props => {
       onRequestClose={onDismiss}
       style={StyleSheet.absoluteFillObject}
       isModalKit={true}
+      supportedOrientations={isDuo ? DUO_ORIENTATIONS : undefined}
     >
       <KeyboardAvoidingView
         style={Styles.flexCenter}
@@ -152,14 +154,13 @@ const Modal: React.FC<ModalParams> = props => {
               opacity,
               transform: [{ scale }],
             },
-            // center below the side status bar and above the home indicator
-            isIPhoneDuo() && {
-              marginTop: getDuoTopInset(
-                insets,
-                windowSize.width,
-                windowSize.height,
-              ),
+            isDuo && styles.shrink,
+            isDuo && {
+              marginTop: insets.top,
               marginBottom: insets.bottom,
+              marginLeft: insets.left,
+              marginRight: insets.right,
+              ...getDuoModalBounds(insets, windowSize.width, windowSize.height),
             },
             modalStyle,
           ]}
@@ -171,11 +172,14 @@ const Modal: React.FC<ModalParams> = props => {
   );
 };
 
+const DUO_ORIENTATIONS = ['portrait', 'landscape'];
+
 const styles = StyleSheet.create({
   overlayContent: {
     flex: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
   },
+  shrink: { flexShrink: 1 },
 });
 
 export default ModalScreen;

package/Application/device.ts

@@ -1,9 +1,13 @@
 import { Dimensions, Platform, ScaledSize } from 'react-native';
 import type { EdgeInsets } from 'react-native-safe-area-context';
+import { Spacing } from '../Consts';
 
 // widest short side of any single-display iPhone
 const IPHONE_MAX_SHORT_SIDE = 440;
 
+const DUO_MODAL_MAX_WIDTH = 440;
+const DUO_MODAL_MAX_HEIGHT = 640;
+
 // iPhone Duo reports idiom "phone"; 'screen' stays on the outer display, so it
 // still matches when Split View narrows the window
 const isIPhoneDuo = () => {
@@ -26,4 +30,23 @@ const getDuoTopInset = (insets: EdgeInsets, width: number, height: number) =>
     height > width ? Math.max(insets.left, insets.right) * 2 : 0,
   );
 
-export { isIPhoneDuo, getDuoTopInset };
+/**
+ * Max modal size on iPhone Duo: inside the safe area, so clear of the side
+ * toolbar strip, and capped so it stays a dialog on the inner display.
+ */
+const getDuoModalBounds = (
+  insets: EdgeInsets,
+  width: number,
+  height: number,
+) => ({
+  maxWidth: Math.min(
+    width - insets.left - insets.right - Spacing.XL * 2,
+    DUO_MODAL_MAX_WIDTH,
+  ),
+  maxHeight: Math.min(
+    height - insets.top - insets.bottom - Spacing.XL * 2,
+    DUO_MODAL_MAX_HEIGHT,
+  ),
+});
+
+export { isIPhoneDuo, getDuoTopInset, getDuoModalBounds };

package/Application/utils.tsx

@@ -32,6 +32,8 @@ import { HeaderBackground } from './Components/HeaderBackground';
 import { HeaderLeft } from './Components/HeaderLeft';
 import { HeaderRight } from './Components/HeaderRight';
 
+const SWIPE_BACK_HAPTIC_THRESHOLD = 50;
+
 const forStackTransitionWithOverlay = (
   props: StackCardInterpolationProps,
 ): StackCardInterpolatedStyle => {
@@ -374,13 +376,6 @@ const useNormalizedSharedValue = (
   return fallback;
 };
 
-/**
- * Travel, in points, at which the swipe back gesture ticks. Flat and well short of
- * react-navigation's own `distance / 2` commit rule: the tick marks "the gesture is
- * recognised", not "you are past the point of no return".
- */
-const SWIPE_BACK_HAPTIC_THRESHOLD = 50;
-
 /**
  * `current.progress` is `gesture.interpolate(...)` built by CardStack
  * (@react-navigation/stack 7.4.2, views/Stack/CardStack.tsx `getProgressFromGesture`).
@@ -478,8 +473,9 @@ const SwipeBackHaptic = () => {
   return null;
 };
 
-const isWhiteListDesignSystem = (context: any): boolean =>
-  context?.designSystemConfig?.isWhiteListDesignSystem === true;
+const isWhiteListDesignSystem = (context: any): boolean => {
+  return context?.designSystemConfig?.isWhiteListDesignSystem === true;
+};
 
 export {
   getStackOptions,