react-native-terra-ui 0.9.1 → 0.10.1

package/src/components/toast/parts/ToastAnimatedItem.tsx

@@ -1,16 +1,15 @@
 import type { ReactElement } from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 
 import Animated, {
   Easing,
-  Extrapolation,
-  interpolate,
   Keyframe,
   type SharedValue,
   useAnimatedStyle,
   withSpring,
   withTiming,
 } from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
 
 import type { ToastId, ToastPlacement } from "../types";
 
@@ -21,7 +20,8 @@ export interface ToastAnimatedItemProps {
   index: number;
   maxVisibleToasts: number;
   placement: ToastPlacement;
-  total: SharedValue<number>;
+  total: number;
+  frontId: ToastId;
 }
 
 export const enteringTop = new Keyframe({
@@ -72,12 +72,7 @@ export const exitingBottom = new Keyframe({
   },
 }).duration(150);
 
-const opacityValue = [1, 0] as [number, number];
-const opacityTimingConfig = { duration: 300 };
-const translateYValue = [0, 10] as [number, number];
-const translateYTimingConfig = { duration: 300 };
-const scaleValue = [1, 0.97] as [number, number];
-const scaleTimingConfig = { duration: 300 };
+const timingConfig = { duration: 300 };
 
 export function ToastAnimatedItem({
   children,
@@ -87,28 +82,14 @@ export function ToastAnimatedItem({
   maxVisibleToasts,
   placement,
   total,
+  frontId,
 }: ToastAnimatedItemProps) {
+  const depth = total - index - 1;
+  const isVisible = depth < maxVisibleToasts;
   const containerStyle = useAnimatedStyle(() => {
-    const heightEntries = Object.entries(heights.value);
-    const lastToastId = heightEntries[heightEntries.length - 1]?.[0];
-    const lastToastHeight = lastToastId ? heights.value[lastToastId] : undefined;
-    const totalValue = total.value;
+    const lastToastHeight = heights.value[frontId];
     const sign = placement === "top" ? 1 : -1;
 
-    const inputRange = [totalValue - 1, totalValue - 2];
-    const opacityInputRange = [totalValue - maxVisibleToasts, totalValue - maxVisibleToasts - 1];
-
-    const opacity = interpolate(index, opacityInputRange, opacityValue);
-    const translateY = interpolate(
-      index,
-      inputRange,
-      [translateYValue[0], translateYValue[1] * sign],
-      Extrapolation.CLAMP
-    );
-    const scale = interpolate(index, inputRange, scaleValue, {
-      extrapolateLeft: Extrapolation.CLAMP,
-    });
-
     return {
       height: lastToastHeight
         ? withSpring(lastToastHeight, {
@@ -117,11 +98,10 @@ export function ToastAnimatedItem({
             mass: 3,
           })
         : undefined,
-      pointerEvents: opacity === 0 ? "none" : "auto",
-      opacity: withTiming(opacity, opacityTimingConfig),
+      opacity: withTiming(isVisible ? 1 : 0, timingConfig),
       transform: [
-        { translateY: withTiming(translateY, translateYTimingConfig) },
-        { scale: withTiming(scale, scaleTimingConfig) },
+        { translateY: withTiming(Math.min(depth, 1) * 10 * sign, timingConfig) },
+        { scale: withTiming(Math.max(0, 1 - depth * 0.03), timingConfig) },
       ],
       zIndex: 1000 + index,
     };
@@ -134,23 +114,26 @@ export function ToastAnimatedItem({
       pointerEvents="box-none"
       style={[styles.position, placement === "top" ? styles.top : styles.bottom]}
     >
-      <Animated.View style={containerStyle}>{children}</Animated.View>
-      <View
-        pointerEvents="none"
-        aria-hidden
-        importantForAccessibility="no-hide-descendants"
-        accessibilityElementsHidden
-        style={styles.measurement}
-        onLayout={(event) => {
-          const measuredHeight = event.nativeEvent.layout.height;
-          heights.value = {
-            ...heights.value,
-            [id]: measuredHeight,
-          };
-        }}
+      <Animated.View
+        style={containerStyle}
+        pointerEvents={isVisible ? "box-none" : "none"}
+        accessibilityElementsHidden={!isVisible}
+        importantForAccessibility={isVisible ? "auto" : "no-hide-descendants"}
+        aria-hidden={!isVisible}
       >
-        {process.env.NODE_ENV === "test" ? null : children}
-      </View>
+        {/* An unconstrained child measures natural height without mounting a second copy. */}
+        <View
+          style={[styles.content, placement === "top" ? styles.top : styles.bottom]}
+          onLayout={(event) => {
+            const height = event.nativeEvent.layout.height;
+            if (heights.value[id] !== height) {
+              heights.value = { ...heights.value, [id]: height };
+            }
+          }}
+        >
+          {children}
+        </View>
+      </Animated.View>
     </Animated.View>
   );
 }
@@ -167,10 +150,9 @@ const styles = StyleSheet.create({
   bottom: {
     bottom: 0,
   },
-  measurement: {
+  content: {
     position: "absolute",
     left: 0,
     right: 0,
-    opacity: 0,
   },
 });

package/src/components/toast/parts/ToastOverlay.ios.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+
+import { FullWindowOverlay } from "react-native-screens";
+
+/**
+ * Lifts the toast viewport into a window of its own, above every presented
+ * view controller.
+ *
+ * Without this, a toast raised from a screen presented as `modal` or
+ * `formSheet` is invisible. `ToastProvider` sits above the app's navigator, so
+ * its viewport belongs to the root view controller's view; UIKit presents a
+ * sheet as a *separate* view controller on top of that one. They are different
+ * presentation layers, so no `zIndex` or `elevation` can lift the viewport over
+ * the sheet — the toast is mounted and animating, just underneath. The reader
+ * presses something, the app reports the result, and nothing appears.
+ *
+ * `FullWindowOverlay` hosts its children in its own `UIWindow`, which sits
+ * above presented controllers, so the viewport paints over a sheet the same way
+ * it paints over an ordinary screen.
+ *
+ * It covers the whole window, but it does not swallow the app's touches:
+ * `RNSFullWindowOverlay`'s `pointInside:` walks its subviews and answers NO
+ * anywhere they are not, so presses fall through to whatever is underneath.
+ *
+ * Mounted only alongside a non-empty viewport — `ToastViewport` returns `null`
+ * before reaching this — so an idle app carries no extra window.
+ */
+export function ToastOverlay({ children }: { children: ReactNode }) {
+  return <FullWindowOverlay>{children}</FullWindowOverlay>;
+}

package/src/components/toast/parts/ToastOverlay.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from "react";
+
+/**
+ * Hosts the toast viewport where it already is, because on Android it is
+ * already in the right place.
+ *
+ * The iOS variant explains the problem: a sheet there is a separate view
+ * controller, so a toast in the root tree paints underneath it. Android does
+ * not have that problem for these screens. `react-native-screens` handles
+ * `formSheet` as a `StackPresentation` inside the screen stack (see
+ * `Screen.kt`), which lives in the Activity's own window — the same window as
+ * this provider — so the viewport's `elevation: 9999` puts it on top the
+ * ordinary way. Verified on an API 36 emulator: a toast raised from a
+ * `formSheet` route renders over that sheet.
+ *
+ * Not to be confused with `ScreenModalFragment`, which *is* a
+ * `BottomSheetDialogFragment` and so does carry its own `Window`. It backs a
+ * different presentation, not the `formSheet` route above. A toast raised from
+ * something hosted in a real `Dialog` — that fragment, or React Native's own
+ * `Modal` — would still be behind it, and `elevation` cannot cross windows.
+ * Untested, and left alone: `FullWindowOverlay` is iOS-only (elsewhere it warns
+ * and renders a plain `View`), so the remedy there would be to own a window
+ * too, via a React Native `Modal`, which brings its own back-button and
+ * touch-capture behaviour.
+ */
+export function ToastOverlay({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}

package/src/components/toast/parts/ToastViewport.tsx

@@ -0,0 +1,104 @@
+import { useEffect } from "react";
+import { Keyboard, Platform } from "react-native";
+
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+import type { ToastId, ToastItem, ToastManager, ToastPlacement, ToastProviderProps } from "../types";
+import { ToastAnimatedItem } from "./ToastAnimatedItem";
+import { ToastOverlay } from "./ToastOverlay";
+
+interface ToastViewportProps {
+  placement: ToastPlacement;
+  toasts: ToastItem[];
+  manager: ToastManager;
+  maxVisibleToasts: number;
+  offset?: ToastProviderProps["offset"];
+}
+
+export function ToastViewport({ placement, toasts, manager, maxVisibleToasts, offset }: ToastViewportProps) {
+  const safeAreaInsets = useSafeAreaInsets();
+  const heights = useSharedValue<Record<ToastId, number>>({});
+  const keyboardHeight = useSharedValue(0);
+
+  const baseBottom = offset?.bottom ?? safeAreaInsets.bottom + (Platform.OS === "ios" ? 6 : 12);
+  const baseTop = offset?.top ?? safeAreaInsets.top + (Platform.OS === "ios" ? 0 : 12);
+
+  useEffect(() => {
+    if (placement !== "bottom") return;
+    const showEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const showSub = Keyboard.addListener(showEvent, (e) => {
+      keyboardHeight.value = withTiming(e.endCoordinates.height);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      keyboardHeight.value = withTiming(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardHeight, placement]);
+
+  const gap = Platform.OS === "ios" ? 6 : 12;
+
+  const keyboardStyle = useAnimatedStyle(() => {
+    if (placement === "top") return { top: baseTop };
+    if (keyboardHeight.value > 0) {
+      return { bottom: keyboardHeight.value + gap };
+    }
+    return { bottom: baseBottom };
+  });
+
+  useEffect(() => {
+    const activeIds = new Set(toasts.map((toast) => toast.id));
+    const nextHeights: Record<ToastId, number> = {};
+    for (const [id, height] of Object.entries(heights.value)) {
+      if (activeIds.has(id)) {
+        nextHeights[id] = height;
+      }
+    }
+    heights.value = nextHeights;
+  }, [heights, toasts]);
+
+  const frontToast = toasts[toasts.length - 1];
+  if (!frontToast) return null;
+
+  return (
+    <ToastOverlay>
+      <Animated.View
+        pointerEvents="box-none"
+        style={[
+          {
+            position: "absolute",
+            zIndex: 9999,
+            elevation: 9999,
+            left: offset?.left ?? safeAreaInsets.left + 12,
+            right: offset?.right ?? safeAreaInsets.right + 12,
+          },
+          keyboardStyle,
+        ]}
+      >
+        {toasts.map((toast, index) => (
+          <ToastAnimatedItem
+            key={toast.id}
+            heights={heights}
+            id={toast.id}
+            index={index}
+            maxVisibleToasts={maxVisibleToasts}
+            placement={placement}
+            total={toasts.length}
+            frontId={frontToast.id}
+          >
+            {toast.component({
+              id: toast.id,
+              index,
+              hide: manager.hide,
+              show: manager.show,
+            })}
+          </ToastAnimatedItem>
+        ))}
+      </Animated.View>
+    </ToastOverlay>
+  );
+}

package/src/theme/defaults/icons.tsx

@@ -19,6 +19,11 @@ const strokeProps = (color: string, strokeWidth: number) => ({
   strokeLinejoin: "round" as const,
 });
 
+// Every registry icon draws through this: one 24×24 viewBox rendered at exactly
+// the requested `size`, so `<Icon size={24} />` is the same optical weight
+// whichever name it resolves to. A glyph that needs to sit smaller than its box
+// (Avatar's person fallback) asks for a smaller `size` — it must not shrink
+// itself here, or it would scale differently from every other icon.
 const SvgIcon = ({ size, children }: { size: number; children: React.ReactNode }) => (
   <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
     {children}
@@ -36,25 +41,25 @@ const PathIcon = ({ d, ...props }: TerraIconProps & { d: string }) => {
 };
 
 // Lucide chevron geometry scaled 20% from the 24×24 viewBox center (45° arms unchanged).
-const NAV_CENTER = 12;
-const NAV_CHEVRON_OPEN = 3 * 1.2;
-const NAV_CHEVRON_ARM = 6 * 1.2;
+const CHEVRON_CENTER = 12;
+const CHEVRON_OPEN = 3 * 1.2;
+const CHEVRON_ARM = 6 * 1.2;
 
-const BackIcon: TerraIconComponent = (props) => (
+const ChevronLeftIcon: TerraIconComponent = (props) => (
   <PathIcon
-    d={`M${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER + NAV_CHEVRON_ARM}L${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER} ${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER - NAV_CHEVRON_ARM}`}
+    d={`M${CHEVRON_CENTER + CHEVRON_OPEN} ${CHEVRON_CENTER + CHEVRON_ARM}L${CHEVRON_CENTER - CHEVRON_OPEN} ${CHEVRON_CENTER} ${CHEVRON_CENTER + CHEVRON_OPEN} ${CHEVRON_CENTER - CHEVRON_ARM}`}
     {...props}
   />
 );
 
-const ForwardIcon: TerraIconComponent = (props) => (
+const ChevronRightIcon: TerraIconComponent = (props) => (
   <PathIcon
-    d={`M${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER + NAV_CHEVRON_ARM}L${NAV_CENTER + NAV_CHEVRON_OPEN} ${NAV_CENTER} ${NAV_CENTER - NAV_CHEVRON_OPEN} ${NAV_CENTER - NAV_CHEVRON_ARM}`}
+    d={`M${CHEVRON_CENTER - CHEVRON_OPEN} ${CHEVRON_CENTER + CHEVRON_ARM}L${CHEVRON_CENTER + CHEVRON_OPEN} ${CHEVRON_CENTER} ${CHEVRON_CENTER - CHEVRON_OPEN} ${CHEVRON_CENTER - CHEVRON_ARM}`}
     {...props}
   />
 );
 
-const CloseIcon: TerraIconComponent = (props) => <PathIcon d="M18 6L6 18M6 6l12 12" {...props} />;
+const XIcon: TerraIconComponent = (props) => <PathIcon d="M18 6L6 18M6 6l12 12" {...props} />;
 
 const InfoIcon: TerraIconComponent = (props) => {
   const { color, size, strokeWidth } = resolveIconProps(props);
@@ -107,26 +112,28 @@ const DangerIcon: TerraIconComponent = (props) => {
   );
 };
 
+const CheckIcon: TerraIconComponent = (props) => <PathIcon d="M20 6 9 17l-5-5" {...props} />;
+
 export const PersonIcon: TerraIconComponent = (props) => {
   const { color, size, strokeWidth } = resolveIconProps(props);
   const stroke = strokeProps(color, strokeWidth);
-  const iconSize = size * 0.55;
 
   return (
-    <Svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none">
+    <SvgIcon size={size}>
       <Circle cx={12} cy={8} r={4} {...stroke} />
       <Path d="M4 20c0-4 3.582-7 8-7s8 3 8 7" {...stroke} />
-    </Svg>
+    </SvgIcon>
   );
 };
 
 export const defaultIcons: Record<TerraSemanticIconName, TerraIconComponent> = {
-  "navigation.back": BackIcon,
-  "navigation.forward": ForwardIcon,
-  "navigation.close": CloseIcon,
+  "terra.chevron-left": ChevronLeftIcon,
+  "terra.chevron-right": ChevronRightIcon,
+  "terra.x": XIcon,
+  "terra.check": CheckIcon,
+  "terra.person": PersonIcon,
   "status.info": InfoIcon,
   "status.success": SuccessIcon,
   "status.warning": WarningIcon,
   "status.danger": DangerIcon,
-  person: PersonIcon,
 };

package/src/theme/types.ts

@@ -412,14 +412,15 @@ declare global {
 export interface TerraIconRegistry extends TerraUI.IconRegistry {}
 
 export type TerraSemanticIconName =
-  | "navigation.back"
-  | "navigation.forward"
-  | "navigation.close"
+  | "terra.chevron-left"
+  | "terra.chevron-right"
+  | "terra.x"
+  | "terra.check"
+  | "terra.person"
   | "status.info"
   | "status.success"
   | "status.warning"
-  | "status.danger"
-  | "person";
+  | "status.danger";
 
 export type TerraConfiguredIconName = keyof TerraIconRegistry & string;