react-native-terra-ui 0.4.0 → 0.4.1

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

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,QAAQ,EACR,UAAU,EAEV,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAS,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,IACnE,iBAAiB,CACf;IACE;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAClD,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,EAAE,EAC7D,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAGtB;kBAPQ,YAAY;;;AAyBrB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,eAAe,GAAG,UAAU,CAC/B,OAAO,UAAU,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAC1D,GAAG;IACF,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,UAAU,EAAE,OAAO,gBAAgB,CAAC;IACpC,QAAQ,EAAE,OAAO,cAAc,CAAC;IAChC,SAAS,EAAE,OAAO,eAAe,CAAC;CACnC,CAAC;AA4CF,eAAO,MAAM,MAAM,iBAAa,CAAC"}
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,wBAAwB,EAC7B,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,QAAQ,EACR,UAAU,EAEV,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,8CAA8C,CAAC;AAE9E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAS,CAAC;AAE7C,MAAM,MAAM,iBAAiB,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,IACnE,iBAAiB,CACf;IACE;;;;OAIG;IACH,EAAE,CAAC,EAAE,CAAC,CAAC;CACR,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAClD,CAAC;AAEJ;;;;;;;;;;;GAWG;AACH,iBAAS,YAAY,CAAC,CAAC,SAAS,WAAW,GAAG,OAAO,QAAQ,EAAE,EAC7D,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACR,EAAE,iBAAiB,CAAC,CAAC,CAAC,+BAGtB;kBAPQ,YAAY;;;AAyBrB,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,QAAQ,EAAE,SAAS,CAAC;IACpB,kEAAkE;IAClE,EAAE,CAAC,EAAE,UAAU,CAAC;IAChB,+EAA+E;IAC/E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,KAAK,eAAe,GAAG,UAAU,CAC/B,OAAO,UAAU,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAC1D,GAAG;IACF,MAAM,EAAE,OAAO,YAAY,CAAC;IAC5B,UAAU,EAAE,OAAO,gBAAgB,CAAC;IACpC,QAAQ,EAAE,OAAO,cAAc,CAAC;IAChC,SAAS,EAAE,OAAO,eAAe,CAAC;IAClC,IAAI,EAAE,OAAO,UAAU,CAAC;CACzB,CAAC;AA8CF,eAAO,MAAM,MAAM,iBAAa,CAAC"}

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

@@ -1 +1 @@
-{"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,+BAkFzB"}
+{"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/lib/typescript/src/components/screen/ScreenFlatList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAiB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAGpE,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,uBAAuB,GAAG,YAAY,CAAC,EACpE,qBAAqB;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,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,mBAAmB,CAAC,CAAC,CAAC,+BA2ExB"}
+{"version":3,"file":"ScreenFlatList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenFlatList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAInB,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAiB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AAGpE,MAAM,WAAW,mBAAmB,CAAC,CAAC,CACpC,SAAQ,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,uBAAuB,GAAG,YAAY,CAAC,EACpE,qBAAqB;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,EAChC,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,mBAAmB,CAAC,CAAC,CAAC,+BAiFxB"}

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

@@ -0,0 +1,64 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactElement } from 'react';
+import { FlatList, type NativeScrollEvent, type NativeSyntheticEvent, type StyleProp, type ViewStyle } from 'react-native';
+import type { ScreenScrollableProps } from './types.js';
+import { type ListHeaderComponent } from './utils.js';
+export interface ScreenListRenderItemInfo<T> {
+    item: T;
+    index: number;
+}
+export type ScreenListProps<T = unknown, As extends ElementType = typeof FlatList> = ScreenScrollableProps & Omit<ComponentPropsWithoutRef<As>, 'data' | 'renderItem' | 'keyExtractor' | 'style' | 'contentContainerStyle' | 'onScroll' | 'ListHeaderComponent' | 'ListFooterComponent' | 'ListEmptyComponent' | keyof ScreenScrollableProps> & {
+    /**
+     * Which list component to render as. Defaults to React Native's
+     * `FlatList` — pass any list with a FlatList-shaped prop surface
+     * (`data`, `renderItem`, `ListHeaderComponent`, …), e.g. `FlashList`
+     * from `@shopify/flash-list`, or a custom virtualized list.
+     *
+     * 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).
+     */
+    as?: As;
+    data?: readonly T[] | null;
+    renderItem?: (info: ScreenListRenderItemInfo<T>) => ReactElement | null;
+    keyExtractor?: (item: T, index: number) => string;
+    ListHeaderComponent?: ListHeaderComponent;
+    ListFooterComponent?: ListHeaderComponent;
+    ListEmptyComponent?: ListHeaderComponent;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * 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;
+};
+/**
+ * Polymorphic list container — renders whichever list `as` names (defaults
+ * to `FlatList`), applying the same margin/header/safe-area/scroll-handler
+ * chrome regardless of which one it is. A screen can swap list
+ * implementations by changing `as`, without relearning the surrounding API.
+ *
+ * @example
+ * ```tsx
+ * <Screen.List data={items} renderItem={({ item }) => <Row item={item} />} />
+ * ```
+ *
+ * @example Any other list component
+ * ```tsx
+ * import { FlashList } from '@shopify/flash-list';
+ *
+ * <Screen.List
+ *   as={FlashList}
+ *   data={items}
+ *   renderItem={({ item }) => <Row item={item} />}
+ * />
+ * ```
+ */
+export declare function ScreenList<T = unknown, As extends ElementType = typeof FlatList>({ as, data, renderItem, style, contentContainerStyle, ListHeaderComponent, ListFooterComponent, ListEmptyComponent, horizontal, loading, LoadingComponent, EmptyComponent, margins, bottomInset, onScroll, ...rest }: ScreenListProps<T, As>): import("react").JSX.Element;
+export declare namespace ScreenList {
+    var displayName: string;
+}
+//# sourceMappingURL=ScreenList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScreenList.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/ScreenList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,wBAAwB,EAE7B,KAAK,WAAW,EAChB,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AACf,OAAO,EACL,QAAQ,EACR,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EACzB,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AActB,OAAO,KAAK,EAAiB,qBAAqB,EAAE,MAAM,YAAS,CAAC;AACpE,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,YAAS,CAAC;AAEjB,MAAM,WAAW,wBAAwB,CAAC,CAAC;IACzC,IAAI,EAAE,CAAC,CAAC;IACR,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,MAAM,eAAe,CACzB,CAAC,GAAG,OAAO,EACX,EAAE,SAAS,WAAW,GAAG,OAAO,QAAQ,IACtC,qBAAqB,GACvB,IAAI,CACF,wBAAwB,CAAC,EAAE,CAAC,EAC1B,MAAM,GACN,YAAY,GACZ,cAAc,GACd,OAAO,GACP,uBAAuB,GACvB,UAAU,GACV,qBAAqB,GACrB,qBAAqB,GACrB,oBAAoB,GACpB,MAAM,qBAAqB,CAC9B,GAAG;IACF;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,EAAE,CAAC;IACR,IAAI,CAAC,EAAE,SAAS,CAAC,EAAE,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,YAAY,GAAG,IAAI,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClD,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,kBAAkB,CAAC,EAAE,mBAAmB,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IACpE;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,UAAU,CACxB,CAAC,GAAG,OAAO,EACX,EAAE,SAAS,WAAW,GAAG,OAAO,QAAQ,EACxC,EACA,EAAE,EACF,IAAI,EACJ,UAAU,EACV,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,eAAe,CAAC,CAAC,EAAE,EAAE,CAAC,+BAkGxB;yBAtHe,UAAU"}

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

@@ -6,6 +6,8 @@ export type { ScreenFlashListProps } from './ScreenFlashList.js';
 export { ScreenFlashList } from './ScreenFlashList.js';
 export type { ScreenFlatListProps } from './ScreenFlatList.js';
 export { ScreenFlatList } from './ScreenFlatList.js';
+export type { ScreenListProps } from './ScreenList.js';
+export { ScreenList } from './ScreenList.js';
 export type { ScreenScrollViewProps } from './ScreenScrollView.js';
 export { ScreenScrollView } from './ScreenScrollView.js';
 export type { ScreenMargins, ScreenScrollableProps } from './types.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAU,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAU,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAiB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,YAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/screen/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAU,CAAC;AAC/D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAU,CAAC;AAClC,YAAY,EAAE,kBAAkB,EAAE,MAAM,oBAAiB,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAiB,CAAC;AAC5C,YAAY,EAAE,oBAAoB,EAAE,MAAM,sBAAmB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAmB,CAAC;AACpD,YAAY,EAAE,mBAAmB,EAAE,MAAM,qBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAkB,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,iBAAc,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAc,CAAC;AAC1C,YAAY,EAAE,qBAAqB,EAAE,MAAM,uBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAoB,CAAC;AACtD,YAAY,EAAE,aAAa,EAAE,qBAAqB,EAAE,MAAM,YAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-terra-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Themeable React Native UI components built on react-native-unistyles",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/screen/Screen.tsx

@@ -19,6 +19,7 @@ import { PortalProvider } from '../portal';
 import { ScreenScrollProvider } from './ScreenContext';
 import { ScreenFlashList } from './ScreenFlashList';
 import { ScreenFlatList } from './ScreenFlatList';
+import { ScreenList } from './ScreenList';
 import { ScreenScrollView } from './ScreenScrollView';
 import type { ScreenMargins } from './types';
 
@@ -96,12 +97,14 @@ type ScreenComponent = ReturnType<
   ScrollView: typeof ScreenScrollView;
   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.FlatList` and a `Header.LargeTitle` / `Header.Title`.
+ * `Screen.List` (or `Screen.FlatList` / `Screen.FlashList` directly) and a
+ * `Header.LargeTitle` / `Header.Title`.
  *
  * @example
  * ```tsx
@@ -139,6 +142,7 @@ ScreenBase.Header = ScreenHeader;
 ScreenBase.ScrollView = ScreenScrollView;
 ScreenBase.FlatList = ScreenFlatList;
 ScreenBase.FlashList = ScreenFlashList;
+ScreenBase.List = ScreenList;
 
 export const Screen = ScreenBase;
 

package/src/components/screen/ScreenFlashList.tsx

@@ -137,10 +137,17 @@ export function ScreenFlashList<T>({
   );
 
   const headerComponent = (
-    <View style={styles.headerWrapper(resolvedMargins)}>
-      <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
+    <>
+      {/* `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)}
-    </View>
+    </>
   );
 
   return (
@@ -165,39 +172,45 @@ export function ScreenFlashList<T>({
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => {
-  const { x: marginX, y: marginY } = resolveScreenMargin(
-    theme,
-    runtime.breakpoint
-  );
-
-  return {
-    content: (
-      margins: ScreenMargins,
-      hasHeader: boolean,
-      bottomInset: number | undefined
-    ) => {
-      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) => ({
+// `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,
-    }),
-  };
-});
+    };
+  },
+}));

package/src/components/screen/ScreenFlatList.tsx

@@ -117,11 +117,17 @@ export function ScreenFlatList<T>({
   );
 
   const headerComponent = (
-    <View style={styles.headerWrapper(resolvedMargins)}>
-      {hasHeader ? <View style={styles.header} /> : null}
-      <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
+    <>
+      {/* `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)}
-    </View>
+    </>
   );
 
   return (
@@ -147,21 +153,26 @@ export function ScreenFlatList<T>({
   );
 }
 
-const styles = StyleSheet.create((theme, runtime) => {
-  const { x: marginX, y: marginY } = resolveScreenMargin(
-    theme,
-    runtime.breakpoint
-  );
-
-  return {
-    scrollContent: {
-      flexGrow: 1,
-    },
-    content: (
-      margins: ScreenMargins,
-      hasHeader: boolean,
-      bottomInset: number | undefined
-    ) => ({
+// `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) => ({
+  scrollContent: {
+    flexGrow: 1,
+  },
+  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
@@ -175,15 +186,15 @@ const styles = StyleSheet.create((theme, runtime) => {
       // 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) => ({
+    };
+  },
+  safeArea: {
+    height: runtime.insets.top,
+  },
+  headerWrapper: (margins: ScreenMargins) => {
+    const { x: marginX } = resolveScreenMargin(theme, runtime.breakpoint);
+    return {
       marginHorizontal: hasXMargin(margins) ? -marginX : 0,
-    }),
-    header: {
-      height: theme.layout.header.height,
-    },
-  };
-});
+    };
+  },
+}));

package/src/components/screen/ScreenList.tsx

@@ -0,0 +1,269 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ElementType,
+  type ReactElement,
+  useMemo,
+} from 'react';
+import {
+  FlatList,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native';
+
+import Animated, {
+  type AnimatedRef,
+  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,
+  type ListHeaderComponent,
+  renderListHeader,
+} from './utils';
+
+export interface ScreenListRenderItemInfo<T> {
+  item: T;
+  index: number;
+}
+
+export type ScreenListProps<
+  T = unknown,
+  As extends ElementType = typeof FlatList,
+> = ScreenScrollableProps &
+  Omit<
+    ComponentPropsWithoutRef<As>,
+    | 'data'
+    | 'renderItem'
+    | 'keyExtractor'
+    | 'style'
+    | 'contentContainerStyle'
+    | 'onScroll'
+    | 'ListHeaderComponent'
+    | 'ListFooterComponent'
+    | 'ListEmptyComponent'
+    | keyof ScreenScrollableProps
+  > & {
+    /**
+     * Which list component to render as. Defaults to React Native's
+     * `FlatList` — pass any list with a FlatList-shaped prop surface
+     * (`data`, `renderItem`, `ListHeaderComponent`, …), e.g. `FlashList`
+     * from `@shopify/flash-list`, or a custom virtualized list.
+     *
+     * 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).
+     */
+    as?: As;
+    data?: readonly T[] | null;
+    renderItem?: (info: ScreenListRenderItemInfo<T>) => ReactElement | null;
+    keyExtractor?: (item: T, index: number) => string;
+    ListHeaderComponent?: ListHeaderComponent;
+    ListFooterComponent?: ListHeaderComponent;
+    ListEmptyComponent?: ListHeaderComponent;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * 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;
+  };
+
+/**
+ * Polymorphic list container — renders whichever list `as` names (defaults
+ * to `FlatList`), applying the same margin/header/safe-area/scroll-handler
+ * chrome regardless of which one it is. A screen can swap list
+ * implementations by changing `as`, without relearning the surrounding API.
+ *
+ * @example
+ * ```tsx
+ * <Screen.List data={items} renderItem={({ item }) => <Row item={item} />} />
+ * ```
+ *
+ * @example Any other list component
+ * ```tsx
+ * import { FlashList } from '@shopify/flash-list';
+ *
+ * <Screen.List
+ *   as={FlashList}
+ *   data={items}
+ *   renderItem={({ item }) => <Row item={item} />}
+ * />
+ * ```
+ */
+export function ScreenList<
+  T = unknown,
+  As extends ElementType = typeof FlatList,
+>({
+  as,
+  data,
+  renderItem,
+  style,
+  contentContainerStyle,
+  ListHeaderComponent,
+  ListFooterComponent,
+  ListEmptyComponent,
+  horizontal = false,
+  loading = false,
+  LoadingComponent,
+  EmptyComponent,
+  margins,
+  bottomInset,
+  onScroll,
+  ...rest
+}: ScreenListProps<T, As>) {
+  const isDefaultFlatList = as === undefined;
+  const Component = (as ?? FlatList) as ComponentType<Record<string, unknown>>;
+
+  // `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.
+  const AnimatedComponent = useMemo(
+    () => Animated.createAnimatedComponent(Component),
+    [Component]
+  );
+
+  const {
+    background,
+    scrollRef,
+    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, scroll binding and snap offsets all 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,
+  ]);
+
+  // 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 (
+    <AnimatedComponent
+      ref={
+        isDefaultFlatList
+          ? (scrollRef as unknown as AnimatedRef<never>)
+          : undefined
+      }
+      data={loading ? [] : data}
+      renderItem={renderItem}
+      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}
+      {...rest}
+      onScroll={composedHandler}
+    />
+  );
+}
+ScreenList.displayName = 'Screen.List';
+
+// `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),
+    };
+  },
+  headerWrapper: (margins: ScreenMargins) => {
+    const { x: marginX } = resolveScreenMargin(theme, runtime.breakpoint);
+    return {
+      marginHorizontal: hasXMargin(margins) ? -marginX : 0,
+    };
+  },
+}));

package/src/components/screen/ScreenScrollView.tsx

@@ -172,11 +172,17 @@ export function ScreenScrollView({
   );
 }
 
-const styles = StyleSheet.create((theme, rt) => {
-  const { x: marginX, y: marginY } = resolveScreenMargin(theme, rt.breakpoint);
-
-  return {
-    scrollContent: (hasHeader: boolean, margins: ScreenMargins) => ({
+const styles = StyleSheet.create((theme, rt) => ({
+  // `resolveScreenMargin` is called *inside* each dynamic function, not
+  // hoisted above `return` — the Babel plugin only attributes a runtime
+  // dependency (here, breakpoint) to a style key when the `rt` read it
+  // derives from sits inside that key's own value. Hoisting it to the
+  // factory's top level silently drops the dependency, so the margin would
+  // freeze at whatever breakpoint was active on mount and never update on
+  // rotation.
+  scrollContent: (hasHeader: boolean, margins: ScreenMargins) => {
+    const { y: marginY } = resolveScreenMargin(theme, rt.breakpoint);
+    return {
       flexGrow: 1,
       // The header inset and the safe area are structural — they apply
       // whether or not margins are on; the y margin stacks on top of them.
@@ -186,12 +192,15 @@ const styles = StyleSheet.create((theme, rt) => {
       // The safe area is `BottomSafeArea`'s job; counting it here as well
       // would leave a gap the height of the gesture bar.
       paddingBottom: hasYMargin(margins) ? marginY : 0,
-    }),
+    };
+  },
 
-    content: (horizontal: boolean, margins: ScreenMargins) => ({
+  content: (horizontal: boolean, margins: ScreenMargins) => {
+    const { x: marginX } = resolveScreenMargin(theme, rt.breakpoint);
+    return {
       flexGrow: 1,
       paddingHorizontal: hasXMargin(margins) ? marginX : 0,
       flexDirection: horizontal ? 'row' : 'column',
-    }),
-  };
-});
+    };
+  },
+}));