react-native-terra-ui 0.1.0 → 0.2.0

package/src/components/screen/ScreenFlashList.tsx

@@ -0,0 +1,196 @@
+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 { 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 = (
+    <View style={styles.headerWrapper(resolvedMargins)}>
+      <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
+      {renderListHeader(ListHeaderComponent)}
+    </View>
+  );
+
+  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}
+    />
+  );
+}
+
+const styles = StyleSheet.create((theme, runtime) => ({
+  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) ? theme.layout.screen.margin.y : 0),
+      paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 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) ? theme.layout.screen.margin.y : 0),
+    };
+  },
+  safeArea: {
+    height: runtime.insets.top,
+  },
+  headerWrapper: (margins: ScreenMargins) => ({
+    marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0,
+  }),
+}));

package/src/components/screen/ScreenFlatList.tsx

@@ -1,9 +1,3 @@
-import {
-  createElement,
-  type FunctionComponent,
-  isValidElement,
-  type ReactElement,
-} from 'react';
 import {
   type FlatListProps,
   type NativeScrollEvent,
@@ -16,20 +10,18 @@ import Animated, {
   useAnimatedScrollHandler,
   useComposedEventHandler,
 } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useUnistyles } from 'react-native-unistyles';
+import { StyleSheet } from 'react-native-unistyles';
 
 import { PortalHost } from '../portal';
-import { useScreen } from './ScreenContext';
-import { resolveScreenContentInsets } from './utils';
+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';
 
 export interface ScreenFlatListProps<T>
-  extends Omit<FlatListProps<T>, 'CellRendererComponent'> {
-  /**
-   * Apply `layout.screen.margin` padding. Defaults to the enclosing `Screen`'s
-   * `margins` value.
-   */
-  margins?: boolean;
+  extends Omit<FlatListProps<T>, 'CellRendererComponent' | '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
@@ -38,36 +30,48 @@ export interface ScreenFlatListProps<T>
   bottomInset?: number;
 }
 
-function renderListHeader(
-  ListHeaderComponent: FlatListProps<unknown>['ListHeaderComponent']
-): ReactElement | null {
-  if (!ListHeaderComponent) return null;
-  if (isValidElement(ListHeaderComponent)) return ListHeaderComponent;
-  return createElement(ListHeaderComponent as FunctionComponent);
-}
-
 /**
  * `FlatList` variant of `Screen.ScrollView`: binds the screen's shared scroll
  * ref, mirrors offset into `scrollY`, hosts the portal target above the list,
  * and applies token-driven content padding.
  *
+ * 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.FlatList data={items} renderItem={({ item }) => <Row item={item} />} />
  * ```
+ *
+ * @example Loading and empty placeholders
+ * ```tsx
+ * <Screen.FlatList
+ *   data={items}
+ *   loading={isLoading}
+ *   EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}
+ *   renderItem={({ item }) => <Row item={item} />}
+ * />
+ * ```
  */
 export function ScreenFlatList<T>({
+  data,
   style,
   contentContainerStyle,
   ListHeaderComponent,
+  ListFooterComponent,
+  ListEmptyComponent,
+  horizontal = false,
+  loading = false,
+  LoadingComponent,
+  EmptyComponent,
   margins,
   bottomInset,
   onScroll,
   ...rest
 }: ScreenFlatListProps<T>) {
-  const { theme } = useUnistyles();
-  const { top } = useSafeAreaInsets();
   const {
+    background,
     scrollRef,
     scrollHandler,
     headerSnapOffsets,
@@ -75,15 +79,17 @@ export function ScreenFlatList<T>({
     hasHeader,
   } = useScreen();
 
-  const margin = theme.layout.screen.margin;
-  const marginsEnabled = margins ?? screenMargins;
-  const compactHeaderHeight = hasHeader ? top + theme.layout.header.height : 0;
-  const { contentPadding } = resolveScreenContentInsets(
-    margin,
-    marginsEnabled,
-    bottomInset,
-    compactHeaderHeight
-  );
+  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) => {
@@ -98,9 +104,21 @@ export function ScreenFlatList<T>({
     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 = (
-    <View>
-      <PortalHost />
+    <View style={styles.headerWrapper(resolvedMargins)}>
+      {hasHeader ? <View style={styles.header} /> : null}
+      <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
       {renderListHeader(ListHeaderComponent)}
     </View>
   );
@@ -108,9 +126,17 @@ export function ScreenFlatList<T>({
   return (
     <Animated.FlatList
       ref={scrollRef as unknown as AnimatedRef<Animated.FlatList<T>>}
-      style={style}
-      contentContainerStyle={[contentPadding, contentContainerStyle]}
+      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}
@@ -119,3 +145,38 @@ export function ScreenFlatList<T>({
     />
   );
 }
+
+const styles = StyleSheet.create((theme, runtime) => ({
+  scrollContent: {
+    flexGrow: 1,
+  },
+  content: (
+    margins: ScreenMargins,
+    hasHeader: boolean,
+    bottomInset: number | undefined
+  ) => ({
+    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) ? theme.layout.screen.margin.y : 0),
+    paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 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) ? theme.layout.screen.margin.y : 0),
+  }),
+  safeArea: {
+    height: runtime.insets.top,
+  },
+  headerWrapper: (margins: ScreenMargins) => ({
+    marginHorizontal: hasXMargin(margins) ? -theme.layout.screen.margin.x : 0,
+  }),
+  header: {
+    height: theme.layout.header.height,
+  },
+}));

package/src/components/screen/ScreenScrollView.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { Children, type ReactNode } from 'react';
 import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
@@ -11,29 +11,24 @@ import Animated, {
   useAnimatedScrollHandler,
   useComposedEventHandler,
 } from 'react-native-reanimated';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useUnistyles } from 'react-native-unistyles';
-
+import { StyleSheet } from 'react-native-unistyles';
+import { scheduleOnRN } from 'react-native-worklets';
 import { PortalHost } from '../portal';
-import { useScreen } from './ScreenContext';
-import { resolveScreenContentInsets } from './utils';
+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 } from './utils';
 
-export interface ScreenScrollViewProps extends ScrollViewProps {
+export interface ScreenScrollViewProps
+  extends Omit<ScrollViewProps, 'horizontal'>,
+    ScreenScrollableProps {
   children?: ReactNode;
   /**
-   * Apply `layout.screen.margin` padding. Defaults to the enclosing `Screen`'s
-   * `margins` value.
-   */
-  hasMargins?: boolean;
-  /**
-   * Extra bottom padding on the scroll 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;
-  /**
-   * Optional Reanimated scroll handler composed with the screen's own scroll
-   * tracking and any JS `onScroll` callback.
+   * Reanimated scroll handler for custom scroll-driven animation, composed
+   * alongside the screen's own scroll tracking and any JS `onScroll`
+   * callback. Runs on the UI thread — for simple JS-side callbacks, use
+   * `onScroll` instead; it doesn't require writing a worklet.
    */
   scrollHandler?: ScrollHandlerProcessed<Record<string, unknown>>;
 }
@@ -43,45 +38,96 @@ export interface ScreenScrollViewProps extends ScrollViewProps {
  * ref, mirrors offset into `scrollY`, hosts the portal target at the top (where
  * header content is injected), and applies token-driven content padding.
  *
+ * For simple side effects (analytics, infinite-scroll triggers), pass a plain
+ * `onScroll` callback. For scroll-driven animation, pass your own
+ * `useAnimatedScrollHandler` via `scrollHandler` instead — it runs on the UI
+ * thread alongside the screen's own handler, with no JS-thread round trip.
+ *
  * @example
  * ```tsx
  * <Screen.ScrollView>
  *   <Text>Scrollable content</Text>
  * </Screen.ScrollView>
  * ```
+ *
+ * @example Loading placeholder instead of a per-screen spinner branch
+ * ```tsx
+ * const { data, loading } = useQuery();
+ *
+ * <Screen.ScrollView loading={loading}>
+ *   <Text>{data?.title}</Text>
+ * </Screen.ScrollView>
+ * ```
+ *
+ * @example Empty placeholder when there is nothing to render
+ * ```tsx
+ * <Screen.ScrollView EmptyComponent={<EmptyState icon="status.info" title="Nothing yet" fill />}>
+ *   {items.map((item) => <Row key={item.id} item={item} />)}
+ * </Screen.ScrollView>
+ * ```
+ *
+ * @example Simple JS-side scroll callback
+ * ```tsx
+ * <Screen.ScrollView onScroll={(e) => console.log(e.nativeEvent.contentOffset.y)}>
+ *   <Text>Scrollable content</Text>
+ * </Screen.ScrollView>
+ * ```
+ *
+ * @example Custom scroll-driven animation
+ * ```tsx
+ * const headerOpacity = useSharedValue(1);
+ * const scrollHandler = useAnimatedScrollHandler({
+ *   onScroll: (event) => {
+ *     headerOpacity.value = interpolate(event.contentOffset.y, [0, 100], [1, 0]);
+ *     // Need a JS-side side effect too? Call scheduleOnRN(fn, ...args) here.
+ *   },
+ * });
+ *
+ * <Screen.ScrollView scrollHandler={scrollHandler}>
+ *   <Text>Scrollable content</Text>
+ * </Screen.ScrollView>
+ * ```
  */
 export function ScreenScrollView({
   children,
   style,
   contentContainerStyle,
-  hasMargins,
-  bottomInset,
   scrollHandler: externalScrollHandler,
   onScroll: onScrollProp,
   horizontal = false,
+  loading = false,
+  LoadingComponent,
+  EmptyComponent,
+  margins,
   ...rest
 }: ScreenScrollViewProps) {
-  const { theme } = useUnistyles();
-  const { top } = useSafeAreaInsets();
   const {
     scrollRef,
     scrollHandler: screenScrollHandler,
-    headerSnapOffsets,
     margins: screenMargins,
     hasHeader,
+    background,
   } = useScreen();
 
-  const jsScrollHandler = useAnimatedScrollHandler(
-    onScrollProp
-      ? {
-          onScroll: (event) => {
-            onScrollProp({
-              nativeEvent: event,
-            } as unknown as NativeSyntheticEvent<NativeScrollEvent>);
-          },
-        }
-      : {}
-  );
+  const resolvedMargins = margins ?? screenMargins;
+  // `toArray` drops the nullish/boolean children a conditional render leaves
+  // behind, so `{items.map(...)}` over an empty array counts as empty.
+  const placeholder = renderScreenPlaceholder({
+    loading,
+    LoadingComponent,
+    EmptyComponent,
+    isEmpty: Children.toArray(children).length === 0,
+  });
+
+  const jsScrollHandler = useAnimatedScrollHandler({
+    onScroll: (event) => {
+      if (onScrollProp) {
+        scheduleOnRN(onScrollProp, {
+          nativeEvent: event,
+        } as unknown as NativeSyntheticEvent<NativeScrollEvent>);
+      }
+    },
+  });
 
   const handlers: ScrollHandlerProcessed<Record<string, unknown>>[] = [
     screenScrollHandler,
@@ -91,40 +137,55 @@ export function ScreenScrollView({
 
   const composedHandler = useComposedEventHandler(handlers);
 
-  const margin = theme.layout.screen.margin;
-  const marginsEnabled = hasMargins ?? screenMargins;
-  const compactHeaderHeight = hasHeader ? top + theme.layout.header.height : 0;
-  const { contentPadding } = resolveScreenContentInsets(
-    margin,
-    marginsEnabled,
-    bottomInset,
-    compactHeaderHeight
-  );
-
   return (
     <Animated.ScrollView
       ref={scrollRef}
-      style={style}
+      style={[{ backgroundColor: background }, style]}
       horizontal={horizontal}
+      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={16}
-      contentContainerStyle={contentPadding}
-      snapToOffsets={headerSnapOffsets}
+      contentContainerStyle={styles.scrollContent(hasHeader, resolvedMargins)}
+      // snapToOffsets={headerSnapOffsets}
       {...rest}
       onScroll={composedHandler}
     >
+      {/* <View style={styles.safeArea} /> */}
       <View>
-        <PortalHost />
+        <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
       </View>
       <View
         style={[
+          styles.content(horizontal, resolvedMargins),
           contentContainerStyle,
-          { flexDirection: horizontal ? 'row' : 'column' },
         ]}
       >
-        {/* content spacing */}
-        {children}
+        {placeholder ?? children}
       </View>
+      {/* Outside the padded content view so the horizontal margins do not
+          apply to it, and last so it sits below everything. A horizontal
+          scroller has no bottom edge to clear. */}
+      {horizontal ? null : <BottomSafeArea />}
     </Animated.ScrollView>
   );
 }
+
+const styles = StyleSheet.create((theme, rt) => ({
+  scrollContent: (hasHeader: boolean, margins: ScreenMargins) => ({
+    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.
+    paddingTop:
+      (hasHeader ? theme.layout.header.height + rt.insets.top : 0) +
+      (hasYMargin(margins) ? theme.layout.screen.margin.y : 0),
+    // 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) ? theme.layout.screen.margin.y : 0,
+  }),
+
+  content: (horizontal: boolean, margins: ScreenMargins) => ({
+    flexGrow: 1,
+    paddingHorizontal: hasXMargin(margins) ? theme.layout.screen.margin.x : 0,
+    flexDirection: horizontal ? 'row' : 'column',
+  }),
+}));

package/src/components/screen/index.ts

@@ -2,7 +2,10 @@ 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 { ScreenScrollViewProps } from './ScreenScrollView';
 export { ScreenScrollView } from './ScreenScrollView';
+export type { ScreenMargins, ScreenScrollableProps } from './types';