react-native-terra-ui 0.4.1 → 0.5.0

package/src/components/header/parts/HeaderGradientOverlay.tsx

@@ -20,7 +20,7 @@ export function HeaderGradientOverlay({ color }: HeaderGradientOverlayProps) {
       <Defs>
         <SvgLinearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
           <Stop offset="0" stopColor={color} stopOpacity="1" />
-          <Stop offset="1" stopColor={color} stopOpacity="0.9" />
+          <Stop offset="1" stopColor={color} stopOpacity="0.86" />
         </SvgLinearGradient>
       </Defs>
       <Rect width="100%" height="100%" fill={`url(#${gradientId})`} />

package/src/components/screen/Screen.tsx

@@ -17,7 +17,6 @@ import type { ColorToken } from '#theme/types';
 import { resolveThemeColor } from '#utils/resolve-theme-color';
 import { PortalProvider } from '../portal';
 import { ScreenScrollProvider } from './ScreenContext';
-import { ScreenFlashList } from './ScreenFlashList';
 import { ScreenFlatList } from './ScreenFlatList';
 import { ScreenList } from './ScreenList';
 import { ScreenScrollView } from './ScreenScrollView';
@@ -95,16 +94,15 @@ type ScreenComponent = ReturnType<
 > & {
   Header: typeof ScreenHeader;
   ScrollView: typeof ScreenScrollView;
+  /** @deprecated Use {@link ScreenList} (`Screen.List`) instead. */
   FlatList: typeof ScreenFlatList;
-  FlashList: typeof ScreenFlashList;
   List: typeof ScreenList;
 };
 
 /**
  * Themed page container: solid themed background, safe-area handling, and a
  * shared scroll context for headers. Pair with `Screen.ScrollView` /
- * `Screen.List` (or `Screen.FlatList` / `Screen.FlashList` directly) and a
- * `Header.LargeTitle` / `Header.Title`.
+ * `Screen.List` and a `Header.LargeTitle` / `Header.Title`.
  *
  * @example
  * ```tsx
@@ -141,7 +139,6 @@ const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(
 ScreenBase.Header = ScreenHeader;
 ScreenBase.ScrollView = ScreenScrollView;
 ScreenBase.FlatList = ScreenFlatList;
-ScreenBase.FlashList = ScreenFlashList;
 ScreenBase.List = ScreenList;
 
 export const Screen = ScreenBase;

package/src/components/screen/ScreenContext.tsx

@@ -26,8 +26,8 @@ export const SCREEN_HEADER_PORTAL_HOST = 'screen-header';
 export interface ScreenContextValue {
   /**
    * Which axes scroll containers pad with `layout.screen.margin`.
-   * Overridable per `Screen.ScrollView` / `Screen.FlatList` /
-   * `Screen.FlashList` via their own `margins` prop.
+   * Overridable per `Screen.ScrollView` / `Screen.FlatList` / `Screen.List`
+   * via their own `margins` prop.
    */
   margins: ScreenMargins;
   /** Whether a `Screen.Header` is present. Used by scroll containers to add top inset. */

package/src/components/screen/ScreenFlatList.tsx

@@ -20,6 +20,12 @@ import { SCREEN_HEADER_PORTAL_HOST, useScreen } from './ScreenContext';
 import type { ScreenMargins, ScreenScrollableProps } from './types';
 import { hasXMargin, hasYMargin, renderListHeader } from './utils';
 
+/**
+ * @deprecated Use {@link ScreenListProps} (`Screen.List`) instead —
+ * `Screen.List` renders `FlatList` by default and binds the screen's shared
+ * scroll ref exactly as `Screen.FlatList` does, but also lets a screen swap in
+ * any other FlatList-shaped list (e.g. `FlashList`) via its `as` prop.
+ */
 export interface ScreenFlatListProps<T>
   extends Omit<FlatListProps<T>, 'CellRendererComponent' | 'horizontal'>,
     ScreenScrollableProps {
@@ -40,6 +46,11 @@ export interface ScreenFlatListProps<T>
  * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
  * another without relearning its API.
  *
+ * @deprecated Use {@link ScreenList} (`Screen.List`) instead — it renders
+ * `FlatList` by default and behaves identically, but also accepts an `as`
+ * prop for swapping in another list implementation later without changing
+ * the surrounding API.
+ *
  * @example
  * ```tsx
  * <Screen.FlatList data={items} renderItem={({ item }) => <Row item={item} />} />

package/src/components/screen/ScreenList.tsx

@@ -64,8 +64,9 @@ export type ScreenListProps<
      *
      * Only the default `FlatList` binds the screen's shared imperative
      * scroll ref — a custom `as` is responsible for its own ref if it needs
-     * one, since not every list exposes a Reanimated-compatible ref (this is
-     * why `Screen.FlashList` doesn't bind it either).
+     * one, since not every list exposes a Reanimated-compatible ref (e.g.
+     * `FlashList`'s ref exposes a different, non Reanimated-compatible
+     * imperative API).
      */
     as?: As;
     data?: readonly T[] | null;
@@ -133,8 +134,8 @@ export function ScreenList<
 
   // `Animated.createAnimatedComponent` should only run once per component,
   // not on every render — `as` is arbitrary here (not a fixed module-scope
-  // reference like `Screen.FlatList`/`Screen.FlashList` use), so it's
-  // memoized on the resolved component instead of hoisted to module scope.
+  // reference like `Screen.FlatList` uses), so it's memoized on the resolved
+  // component instead of hoisted to module scope.
   const AnimatedComponent = useMemo(
     () => Animated.createAnimatedComponent(Component),
     [Component]

package/src/components/screen/index.ts

@@ -2,8 +2,6 @@ export type { ScreenHeaderProps, ScreenProps } from './Screen';
 export { Screen } from './Screen';
 export type { ScreenContextValue } from './ScreenContext';
 export { useScreen } from './ScreenContext';
-export type { ScreenFlashListProps } from './ScreenFlashList';
-export { ScreenFlashList } from './ScreenFlashList';
 export type { ScreenFlatListProps } from './ScreenFlatList';
 export { ScreenFlatList } from './ScreenFlatList';
 export type { ScreenListProps } from './ScreenList';

package/src/components/screen/types.ts

@@ -11,9 +11,8 @@ import type { ReactNode } from 'react';
 export type ScreenMargins = 'all' | 'x' | 'y' | 'none';
 
 /**
- * Props shared by `Screen.ScrollView`, `Screen.FlatList` and
- * `Screen.FlashList`, so a screen can swap one container for another without
- * relearning its API.
+ * Props shared by `Screen.ScrollView`, `Screen.FlatList` and `Screen.List`, so
+ * a screen can swap one container for another without relearning its API.
  */
 export interface ScreenScrollableProps {
   /** Lay content out along the x axis. Defaults to `false`. */

package/src/components/toast/Toast.tsx

@@ -150,7 +150,7 @@ const ToastRoot = forwardRef<ComponentRef<typeof View>, ToastProps>(
           p="4"
           row
           align="center"
-          gap="3"
+          gap="2"
           accessibilityRole={accessibilityRole}
           accessibilityLiveRegion="polite"
           borderWidth="hairline"
@@ -415,7 +415,7 @@ export function DefaultToast({
       {shouldRenderIcon ? (
         <Box alignSelf="start">{icon ?? <ToastIcon />}</Box>
       ) : null}
-      <Box flex={1} gap="1">
+      <Box flex={1} gap="0">
         {label ? <ToastTitle>{label}</ToastTitle> : null}
         {description ? (
           <ToastDescription>{description}</ToastDescription>

package/src/components/toolbar/Toolbar.tsx

@@ -310,6 +310,7 @@ const styles = StyleSheet.create((theme) => ({
     backgroundColor: resolveThemeColor(background, theme),
     borderWidth: StyleSheet.hairlineWidth,
     borderColor: theme.color['border.subtle'],
+    ...theme.elevation.xs,
   }),
   // Geometry is two finite axes, so it belongs in `variants` rather than in
   // conditionals: an icon-only cell is an exact square, a labelled one keeps the
@@ -333,6 +334,7 @@ const styles = StyleSheet.create((theme) => ({
           paddingHorizontal: 10,
           borderWidth: StyleSheet.hairlineWidth,
           borderColor: theme.color['border.subtle'],
+          ...theme.elevation.xs,
         },
       },
     },

package/src/theme/tokens/primitives.ts

@@ -326,20 +326,26 @@ export const primitives = {
   'elevation.none.shadowOffset.height': 0,
   'elevation.none.elevation': 0,
 
+  'elevation.xs.shadowOpacity': 0.03,
+  'elevation.xs.shadowRadius': 2,
+  'elevation.xs.shadowOffset.width': 0,
+  'elevation.xs.shadowOffset.height': 0.5,
+  'elevation.xs.elevation': 1,
+
   'elevation.sm.shadowOpacity': 0.1,
-  'elevation.sm.shadowRadius': 2,
+  'elevation.sm.shadowRadius': 4,
   'elevation.sm.shadowOffset.width': 0,
   'elevation.sm.shadowOffset.height': 1,
   'elevation.sm.elevation': 1,
 
   'elevation.md.shadowOpacity': 0.14,
-  'elevation.md.shadowRadius': 4,
+  'elevation.md.shadowRadius': 6,
   'elevation.md.shadowOffset.width': 0,
   'elevation.md.shadowOffset.height': 2,
   'elevation.md.elevation': 3,
 
   'elevation.lg.shadowOpacity': 0.16,
-  'elevation.lg.shadowRadius': 8,
+  'elevation.lg.shadowRadius': 12,
   'elevation.lg.shadowOffset.width': 0,
   'elevation.lg.shadowOffset.height': 4,
   'elevation.lg.elevation': 6,

package/src/theme/types.ts

@@ -66,7 +66,7 @@ export interface ElevationStyle {
   elevation: number;
 }
 
-export type ElevationKey = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type ElevationKey = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
 export type ElevationScale = Record<ElevationKey, ElevationStyle>;
 

package/lib/module/components/screen/ScreenFlashList.js

@@ -1,166 +0,0 @@
-"use strict";
-
-import { View } from "react-native-unistyles/components/native/View";
-import { FlashList } from '@shopify/flash-list';
-import Animated, { useAnimatedScrollHandler, useComposedEventHandler } from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { resolveScreenMargin } from "../../theme/screen-margin.js";
-import { PortalHost } from "../portal/index.js";
-import { BottomSafeArea } from "./parts/BottomSafeArea.js";
-import { renderScreenPlaceholder } from "./parts/ScreenPlaceholder.js";
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from "./ScreenContext.js";
-import { hasXMargin, hasYMargin, renderListHeader } from "./utils.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export function ScreenFlashList({
-  data,
-  style,
-  contentContainerStyle,
-  ListHeaderComponent,
-  ListFooterComponent,
-  ListEmptyComponent,
-  horizontal = false,
-  loading = false,
-  LoadingComponent,
-  EmptyComponent,
-  margins,
-  bottomInset,
-  onScroll,
-  ...rest
-}) {
-  if (FlashList == null) {
-    throw new Error('[react-native-terra-ui] Screen.FlashList requires "@shopify/flash-list" to be installed in your app. Run `yarn add @shopify/flash-list` (or the npm/pnpm equivalent) and rebuild.');
-  }
-  const {
-    background,
-    scrollHandler,
-    headerSnapOffsets,
-    margins: screenMargins,
-    hasHeader
-  } = useScreen();
-  const resolvedMargins = margins ?? screenMargins;
-  // The placeholder rides in on `ListEmptyComponent` rather than replacing the
-  // list, so the header portal and snap offsets stay put. While loading the
-  // list is fed an empty `data` so that slot is the one that renders.
-  const placeholder = renderScreenPlaceholder({
-    loading,
-    LoadingComponent,
-    EmptyComponent,
-    isEmpty: !data || data.length === 0
-  });
-  const jsScrollHandler = useAnimatedScrollHandler(event => {
-    if (onScroll) onScroll(event);
-  }, [onScroll]);
-  const composedHandler = useComposedEventHandler([scrollHandler, jsScrollHandler]);
-
-  // `AnimatedFlashList` is typed for `unknown` items, so the remaining props
-  // are cast back to its prop type — minus the ones set explicitly below,
-  // which the spread would otherwise re-supply.
-  const listProps = rest;
-
-  // A caller naming its own `bottomInset` has taken the bottom over entirely,
-  // and a horizontal list has no bottom edge to clear.
-  const needsBottomSafeArea = bottomInset === undefined && !horizontal;
-  const footerComponent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [renderListHeader(ListFooterComponent), needsBottomSafeArea ? /*#__PURE__*/_jsx(BottomSafeArea, {}) : null]
-  });
-  const headerComponent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.headerWrapper(resolvedMargins),
-      children: /*#__PURE__*/_jsx(PortalHost, {
-        name: SCREEN_HEADER_PORTAL_HOST
-      })
-    }), renderListHeader(ListHeaderComponent)]
-  });
-  return /*#__PURE__*/_jsx(AnimatedFlashList, {
-    data: loading ? [] : data,
-    style: [{
-      backgroundColor: background
-    }, style],
-    horizontal: horizontal,
-    contentInsetAdjustmentBehavior: hasHeader ? 'never' : undefined,
-    contentContainerStyle: [styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle],
-    ListHeaderComponent: headerComponent,
-    ListFooterComponent: footerComponent,
-    ListEmptyComponent: placeholder ?? ListEmptyComponent,
-    showsVerticalScrollIndicator: false,
-    scrollEventThrottle: 16,
-    snapToOffsets: headerSnapOffsets,
-    ...listProps,
-    onScroll: composedHandler
-  });
-}
-
-// `resolveScreenMargin` is called *inside* each dynamic function below, not
-// hoisted to the factory's top level — the Babel plugin only attributes a
-// runtime dependency (here, breakpoint) to a style key when the `rt`/
-// `runtime` read it derives from sits inside that key's own value. Hoisting
-// it would silently drop the dependency, so the margin would freeze at
-// whatever breakpoint was active on mount and never update on rotation.
-const styles = StyleSheet.create((theme, runtime) => ({
-  content: (margins, hasHeader, bottomInset) => {
-    const {
-      x: marginX,
-      y: marginY
-    } = resolveScreenMargin(theme, runtime.breakpoint);
-    return {
-      flexGrow: 1,
-      // The header is absolutely positioned, so the list reserves its full
-      // height — bar plus top safe area. This assumes the scroll view does not
-      // also get UIKit's automatic inset adjustment: on a native tab screen
-      // that means `disableAutomaticContentInsets` on the tab, or the two
-      // insets are counted twice.
-      paddingTop: (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) + (hasYMargin(margins) ? marginY : 0),
-      paddingHorizontal: hasXMargin(margins) ? marginX : 0,
-      // The safe area is `BottomSafeArea`'s job; counting it here as well
-      // would leave a gap the height of the gesture bar.
-      paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
-      uni__dependencies: [0, 3, 9]
-    };
-  },
-  safeArea: {
-    height: runtime.insets.top,
-    uni__dependencies: [9]
-  },
-  headerWrapper: margins => {
-    const {
-      x: marginX
-    } = resolveScreenMargin(theme, runtime.breakpoint);
-    return {
-      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
-      uni__dependencies: [0, 3]
-    };
-  }
-}));
-//# sourceMappingURL=ScreenFlashList.js.map

package/lib/module/components/screen/ScreenFlashList.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["FlashList","Animated","useAnimatedScrollHandler","useComposedEventHandler","StyleSheet","resolveScreenMargin","PortalHost","BottomSafeArea","renderScreenPlaceholder","SCREEN_HEADER_PORTAL_HOST","useScreen","hasXMargin","hasYMargin","renderListHeader","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","AnimatedFlashList","createAnimatedComponent","ScreenFlashList","data","style","contentContainerStyle","ListHeaderComponent","ListFooterComponent","ListEmptyComponent","horizontal","loading","LoadingComponent","EmptyComponent","margins","bottomInset","onScroll","rest","Error","background","scrollHandler","headerSnapOffsets","screenMargins","hasHeader","resolvedMargins","placeholder","isEmpty","length","jsScrollHandler","event","composedHandler","listProps","needsBottomSafeArea","undefined","footerComponent","children","headerComponent","View","styles","headerWrapper","name","backgroundColor","contentInsetAdjustmentBehavior","content","showsVerticalScrollIndicator","scrollEventThrottle","snapToOffsets","create","theme","runtime","x","marginX","y","marginY","breakpoint","flexGrow","paddingTop","layout","header","height","insets","top","paddingHorizontal","paddingBottom","uni__dependencies","safeArea","marginHorizontal"],"sourceRoot":"../../../../src","sources":["components/screen/ScreenFlashList.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/components/screen/ScreenFlashList.d.ts

@@ -1,43 +0,0 @@
-import { type FlashListProps } from '@shopify/flash-list';
-import type { ScreenScrollableProps } from './types.js';
-export interface ScreenFlashListProps<T> extends Omit<FlashListProps<T>, 'horizontal'>, ScreenScrollableProps {
-    /**
-     * Extra bottom padding on the list content — clearance for a tab bar or home
-     * indicator. Defaults to the `layout.screen.margin.y` token when margins are
-     * enabled, otherwise `0`.
-     */
-    bottomInset?: number;
-}
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export declare function ScreenFlashList<T>({ data, style, contentContainerStyle, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal, loading, LoadingComponent, EmptyComponent, margins, bottomInset, onScroll, ...rest }: ScreenFlashListProps<T>): import("react").JSX.Element;
-//# sourceMappingURL=ScreenFlashList.d.ts.map

package/lib/typescript/src/components/screen/ScreenFlashList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ScreenFlashList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenFlashList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAmBrE,OAAO,KAAK,EAAiB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAOpE,MAAM,WAAW,oBAAoB,CAAC,CAAC,CACrC,SAAQ,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,EAC3C,qBAAqB;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAAE,EACjC,IAAI,EACJ,KAAK,EACL,qBAAqB,EACrB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,UAAkB,EAClB,OAAe,EACf,gBAAgB,EAChB,cAAc,EACd,OAAO,EACP,WAAW,EACX,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,oBAAoB,CAAC,CAAC,CAAC,+BAyFzB"}

package/src/components/screen/ScreenFlashList.tsx

@@ -1,216 +0,0 @@
-import { FlashList, type FlashListProps } from '@shopify/flash-list';
-import type { ComponentType } from 'react';
-import {
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  View,
-} from 'react-native';
-import Animated, {
-  useAnimatedScrollHandler,
-  useComposedEventHandler,
-} from 'react-native-reanimated';
-
-import { StyleSheet } from 'react-native-unistyles';
-
-import { resolveScreenMargin } from '#theme/screen-margin';
-import { PortalHost } from '../portal';
-import { BottomSafeArea } from './parts/BottomSafeArea';
-import { renderScreenPlaceholder } from './parts/ScreenPlaceholder';
-import { SCREEN_HEADER_PORTAL_HOST, useScreen } from './ScreenContext';
-import type { ScreenMargins, ScreenScrollableProps } from './types';
-import { hasXMargin, hasYMargin, renderListHeader } from './utils';
-
-const AnimatedFlashList = Animated.createAnimatedComponent(
-  FlashList as unknown as ComponentType<FlashListProps<unknown>>
-);
-
-export interface ScreenFlashListProps<T>
-  extends Omit<FlashListProps<T>, 'horizontal'>,
-    ScreenScrollableProps {
-  /**
-   * Extra bottom padding on the list content — clearance for a tab bar or home
-   * indicator. Defaults to the `layout.screen.margin.y` token when margins are
-   * enabled, otherwise `0`.
-   */
-  bottomInset?: number;
-}
-
-/**
- * `FlashList` variant of `Screen.ScrollView`: mirrors scroll offset into the
- * screen's shared `scrollY`, hosts the portal target above the list, and
- * applies token-driven content padding.
- *
- * Requires `@shopify/flash-list` — it is a peer dependency of
- * `react-native-terra-ui` and must be installed in the consuming app.
- *
- * Note: unlike `Screen.FlatList`, this does not bind the screen's shared
- * imperative `scrollRef` — `FlashList`'s ref exposes a different (non
- * Reanimated-compatible) imperative API.
- *
- * Shares `loading` / `LoadingComponent` / `EmptyComponent` / `margins` /
- * `horizontal` with `Screen.ScrollView`, so a screen can swap one container for
- * another without relearning its API.
- *
- * @example
- * ```tsx
- * <Screen.FlashList data={items} renderItem={({ item }) => <Row item={item} />} />
- * ```
- *
- * @example Loading and empty placeholders
- * ```tsx
- * <Screen.FlashList
- *   data={items}
- *   loading={isLoading}
- *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
- *   renderItem={({ item }) => <Row item={item} />}
- * />
- * ```
- */
-export function ScreenFlashList<T>({
-  data,
-  style,
-  contentContainerStyle,
-  ListHeaderComponent,
-  ListFooterComponent,
-  ListEmptyComponent,
-  horizontal = false,
-  loading = false,
-  LoadingComponent,
-  EmptyComponent,
-  margins,
-  bottomInset,
-  onScroll,
-  ...rest
-}: ScreenFlashListProps<T>) {
-  if (FlashList == null) {
-    throw new Error(
-      '[react-native-terra-ui] Screen.FlashList requires "@shopify/flash-list" to be installed in your app. Run `yarn add @shopify/flash-list` (or the npm/pnpm equivalent) and rebuild.'
-    );
-  }
-
-  const {
-    background,
-    scrollHandler,
-    headerSnapOffsets,
-    margins: screenMargins,
-    hasHeader,
-  } = useScreen();
-
-  const resolvedMargins = margins ?? screenMargins;
-  // The placeholder rides in on `ListEmptyComponent` rather than replacing the
-  // list, so the header portal and snap offsets stay put. While loading the
-  // list is fed an empty `data` so that slot is the one that renders.
-  const placeholder = renderScreenPlaceholder({
-    loading,
-    LoadingComponent,
-    EmptyComponent,
-    isEmpty: !data || data.length === 0,
-  });
-
-  const jsScrollHandler = useAnimatedScrollHandler(
-    (event) => {
-      if (onScroll)
-        onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
-    },
-    [onScroll]
-  );
-
-  const composedHandler = useComposedEventHandler([
-    scrollHandler,
-    jsScrollHandler,
-  ]);
-
-  // `AnimatedFlashList` is typed for `unknown` items, so the remaining props
-  // are cast back to its prop type — minus the ones set explicitly below,
-  // which the spread would otherwise re-supply.
-  const listProps = rest as Omit<FlashListProps<unknown>, 'data' | 'onScroll'>;
-
-  // A caller naming its own `bottomInset` has taken the bottom over entirely,
-  // and a horizontal list has no bottom edge to clear.
-  const needsBottomSafeArea = bottomInset === undefined && !horizontal;
-
-  const footerComponent = (
-    <>
-      {renderListHeader(ListFooterComponent)}
-      {needsBottomSafeArea ? <BottomSafeArea /> : null}
-    </>
-  );
-
-  const headerComponent = (
-    <>
-      {/* `headerWrapper`'s negative margin cancels the list's inherited
-          content padding for the portaled header (`LargeTitlePortalContent`
-          etc. manage their own horizontal padding) — a caller's own
-          `ListHeaderComponent` has no such self-padding, so it stays outside
-          this wrapper and gets the list's normal item padding instead. */}
-      <View style={styles.headerWrapper(resolvedMargins)}>
-        <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
-      </View>
-      {renderListHeader(ListHeaderComponent)}
-    </>
-  );
-
-  return (
-    <AnimatedFlashList
-      data={loading ? [] : (data as readonly unknown[] | null | undefined)}
-      style={[{ backgroundColor: background }, style]}
-      horizontal={horizontal}
-      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
-      contentContainerStyle={[
-        styles.content(resolvedMargins, hasHeader, bottomInset),
-        contentContainerStyle,
-      ]}
-      ListHeaderComponent={headerComponent}
-      ListFooterComponent={footerComponent}
-      ListEmptyComponent={placeholder ?? ListEmptyComponent}
-      showsVerticalScrollIndicator={false}
-      scrollEventThrottle={16}
-      snapToOffsets={headerSnapOffsets}
-      {...listProps}
-      onScroll={composedHandler}
-    />
-  );
-}
-
-// `resolveScreenMargin` is called *inside* each dynamic function below, not
-// hoisted to the factory's top level — the Babel plugin only attributes a
-// runtime dependency (here, breakpoint) to a style key when the `rt`/
-// `runtime` read it derives from sits inside that key's own value. Hoisting
-// it would silently drop the dependency, so the margin would freeze at
-// whatever breakpoint was active on mount and never update on rotation.
-const styles = StyleSheet.create((theme, runtime) => ({
-  content: (
-    margins: ScreenMargins,
-    hasHeader: boolean,
-    bottomInset: number | undefined
-  ) => {
-    const { x: marginX, y: marginY } = resolveScreenMargin(
-      theme,
-      runtime.breakpoint
-    );
-    return {
-      flexGrow: 1,
-      // The header is absolutely positioned, so the list reserves its full
-      // height — bar plus top safe area. This assumes the scroll view does not
-      // also get UIKit's automatic inset adjustment: on a native tab screen
-      // that means `disableAutomaticContentInsets` on the tab, or the two
-      // insets are counted twice.
-      paddingTop:
-        (hasHeader ? theme.layout.header.height + runtime.insets.top : 0) +
-        (hasYMargin(margins) ? marginY : 0),
-      paddingHorizontal: hasXMargin(margins) ? marginX : 0,
-      // The safe area is `BottomSafeArea`'s job; counting it here as well
-      // would leave a gap the height of the gesture bar.
-      paddingBottom: bottomInset ?? (hasYMargin(margins) ? marginY : 0),
-    };
-  },
-  safeArea: {
-    height: runtime.insets.top,
-  },
-  headerWrapper: (margins: ScreenMargins) => {
-    const { x: marginX } = resolveScreenMargin(theme, runtime.breakpoint);
-    return {
-      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
-    };
-  },
-}));