react-native-terra-ui 0.5.1 → 0.6.0

package/src/components/screen/Screen.tsx

@@ -9,30 +9,31 @@ import {
   type PropsWithChildren,
   type ReactNode,
   useMemo,
-} from 'react';
-import { View } from 'react-native';
-import type { ViewProps } from 'react-native-svg/lib/typescript/fabric/utils';
-import { StyleSheet, useUnistyles } from 'react-native-unistyles';
-import type { ColorToken } from '#theme/types';
-import { resolveThemeColor } from '#utils/resolve-theme-color';
-import { PortalProvider } from '../portal';
-import { ScreenScrollProvider } from './ScreenContext';
-import { ScreenFlatList } from './ScreenFlatList';
-import { ScreenList } from './ScreenList';
-import { ScreenScrollView } from './ScreenScrollView';
-import type { ScreenMargins } from './types';
+} from "react";
+import { View } from "react-native";
 
-export type ScreenHeaderProps<T extends ElementType = typeof Fragment> =
-  PropsWithChildren<
-    {
-      /**
-       * Component to render the header as. Defaults to `Fragment` (no
-       * wrapper). Use this to cast the header to a different container,
-       * e.g. `as={View}` — any extra props are forwarded to it.
-       */
-      as?: T;
-    } & Omit<ComponentPropsWithoutRef<T>, 'children'>
-  >;
+import type { ViewProps } from "react-native-svg/lib/typescript/fabric/utils";
+import { StyleSheet, useUnistyles } from "react-native-unistyles";
+
+import type { ColorToken } from "#theme/types";
+import { resolveThemeColor } from "#utils/resolve-theme-color";
+import { PortalProvider } from "../portal";
+import { ScreenScrollProvider } from "./ScreenContext";
+import { ScreenFlatList } from "./ScreenFlatList";
+import { ScreenList } from "./ScreenList";
+import { ScreenScrollView } from "./ScreenScrollView";
+import type { ScreenMargins } from "./types";
+
+export type ScreenHeaderProps<T extends ElementType = typeof Fragment> = PropsWithChildren<
+  {
+    /**
+     * Component to render the header as. Defaults to `Fragment` (no
+     * wrapper). Use this to cast the header to a different container,
+     * e.g. `as={View}` — any extra props are forwarded to it.
+     */
+    as?: T;
+  } & Omit<ComponentPropsWithoutRef<T>, "children">
+>;
 
 /**
  * Marker slot identifying the screen's header — its purpose is to let
@@ -54,7 +55,7 @@ function ScreenHeader<T extends ElementType = typeof Fragment>({
   const Component = as ?? Fragment;
   return <Component {...rest}>{children}</Component>;
 }
-ScreenHeader.displayName = 'Screen.Header';
+ScreenHeader.displayName = "Screen.Header";
 
 /** True if `children` directly contains a `Screen.Header`. */
 function hasScreenHeader(children: ReactNode): boolean {
@@ -63,8 +64,8 @@ function hasScreenHeader(children: ReactNode): boolean {
     if (found) return;
     if (
       isValidElement(child) &&
-      typeof child.type !== 'string' &&
-      (child.type as { displayName?: string }).displayName === 'Screen.Header'
+      typeof child.type !== "string" &&
+      (child.type as { displayName?: string }).displayName === "Screen.Header"
     )
       found = true;
   });
@@ -74,7 +75,7 @@ function hasScreenHeader(children: ReactNode): boolean {
 export interface ScreenProps extends ViewProps {
   children: ReactNode;
   /** Background color token. Defaults to the `background` token. */
-  bg?: ColorToken;
+  background?: ColorToken;
   /** Hosted inside a tab navigator? Exposed via `useScreen()`. Default false. */
   inTabView?: boolean;
   /**
@@ -89,9 +90,7 @@ export interface ScreenProps extends ViewProps {
   hasMargins?: boolean;
 }
 
-type ScreenComponent = ReturnType<
-  typeof forwardRef<ComponentRef<typeof View>, ScreenProps>
-> & {
+type ScreenComponent = ReturnType<typeof forwardRef<ComponentRef<typeof View>, ScreenProps>> & {
   Header: typeof ScreenHeader;
   ScrollView: typeof ScreenScrollView;
   /** @deprecated Use {@link ScreenList} (`Screen.List`) instead. */
@@ -112,29 +111,23 @@ type ScreenComponent = ReturnType<
  * </Screen>
  * ```
  */
-const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(
-  function Screen(
-    { children, bg = 'background', margins, hasMargins, style, ...rest },
-    _ref
-  ) {
-    const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
-    const resolvedMargins = margins ?? (hasMargins === false ? 'none' : 'all');
-    const { theme } = useUnistyles();
-    const resolvedBg = resolveThemeColor(bg, theme) ?? theme.color.background;
+const ScreenBase = forwardRef<ComponentRef<typeof View>, ScreenProps>(function Screen(
+  { children, background = "background", margins, hasMargins, style, ...rest },
+  _ref
+) {
+  const hasHeader = useMemo(() => hasScreenHeader(children), [children]);
+  const resolvedMargins = margins ?? (hasMargins === false ? "none" : "all");
+  const { theme } = useUnistyles();
+  const resolvedBackground = resolveThemeColor(background, theme) ?? theme.color.background;
 
-    return (
-      <View style={[styles.container, style]} {...rest}>
-        <ScreenScrollProvider
-          background={resolvedBg}
-          margins={resolvedMargins}
-          hasHeader={hasHeader}
-        >
-          <PortalProvider>{children}</PortalProvider>
-        </ScreenScrollProvider>
-      </View>
-    );
-  }
-) as ScreenComponent;
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <ScreenScrollProvider background={resolvedBackground} margins={resolvedMargins} hasHeader={hasHeader}>
+        <PortalProvider>{children}</PortalProvider>
+      </ScreenScrollProvider>
+    </View>
+  );
+}) as ScreenComponent;
 
 ScreenBase.Header = ScreenHeader;
 ScreenBase.ScrollView = ScreenScrollView;

package/src/components/screen/ScreenContext.tsx

@@ -1,11 +1,4 @@
-import {
-  createContext,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
+import { createContext, type ReactNode, useCallback, useContext, useMemo, useState } from "react";
 
 import Animated, {
   type AnimatedRef,
@@ -14,14 +7,14 @@ import Animated, {
   useAnimatedRef,
   useAnimatedScrollHandler,
   useSharedValue,
-} from 'react-native-reanimated';
+} from "react-native-reanimated";
 
-import type { ScreenMargins } from './types';
+import type { ScreenMargins } from "./types";
 
 export type ScreenScrollRef = AnimatedRef<Animated.ScrollView>;
 
 /** `PortalHost` name shared by `Screen.ScrollView` / `Screen.FlatList` and header variants that portal content into them. */
-export const SCREEN_HEADER_PORTAL_HOST = 'screen-header';
+export const SCREEN_HEADER_PORTAL_HOST = "screen-header";
 
 export interface ScreenContextValue {
   /**
@@ -77,9 +70,9 @@ export interface ScreenScrollProviderProps {
  * scroll containers bind the ref via {@link useScreen}.
  */
 export function ScreenScrollProvider({
-  background = 'transparent',
+  background = "transparent",
   children,
-  margins = 'all',
+  margins = "all",
   hasHeader = false,
 }: ScreenScrollProviderProps) {
   const scrollY = useSharedValue(0);
@@ -127,9 +120,7 @@ export function ScreenScrollProvider({
     ]
   );
 
-  return (
-    <ScreenContext.Provider value={value}>{children}</ScreenContext.Provider>
-  );
+  return <ScreenContext.Provider value={value}>{children}</ScreenContext.Provider>;
 }
 
 /**
@@ -145,7 +136,7 @@ export function ScreenScrollProvider({
 export function useScreen(): ScreenContextValue {
   const context = useContext(ScreenContext);
   if (!context) {
-    throw new Error('useScreen must be used within a Screen component');
+    throw new Error("useScreen must be used within a Screen component");
   }
   return context;
 }

package/src/components/screen/ScreenFlatList.tsx

@@ -1,24 +1,19 @@
-import {
-  type FlatListProps,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  View,
-} from 'react-native';
+import { type FlatListProps, type NativeScrollEvent, type NativeSyntheticEvent, View } from "react-native";
 
 import Animated, {
   type AnimatedRef,
   useAnimatedScrollHandler,
   useComposedEventHandler,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
+} 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';
+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";
 
 /**
  * @deprecated Use {@link ScreenListProps} (`Screen.List`) instead —
@@ -27,7 +22,7 @@ import { hasXMargin, hasYMargin, renderListHeader } from './utils';
  * any other FlatList-shaped list (e.g. `FlashList`) via its `as` prop.
  */
 export interface ScreenFlatListProps<T>
-  extends Omit<FlatListProps<T>, 'CellRendererComponent' | 'horizontal'>,
+  extends Omit<FlatListProps<T>, "CellRendererComponent" | "horizontal">,
     ScreenScrollableProps {
   /**
    * Extra bottom padding on the list content — clearance for a tab bar or home
@@ -105,16 +100,12 @@ export function ScreenFlatList<T>({
 
   const jsScrollHandler = useAnimatedScrollHandler(
     (event) => {
-      if (onScroll)
-        onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
+      if (onScroll) onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
     },
     [onScroll]
   );
 
-  const composedHandler = useComposedEventHandler([
-    scrollHandler,
-    jsScrollHandler,
-  ]);
+  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.
@@ -147,11 +138,8 @@ export function ScreenFlatList<T>({
       data={loading ? [] : data}
       style={[{ backgroundColor: background }, style]}
       horizontal={horizontal}
-      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
-      contentContainerStyle={[
-        styles.content(resolvedMargins, hasHeader, bottomInset),
-        contentContainerStyle,
-      ]}
+      contentInsetAdjustmentBehavior={hasHeader ? "never" : undefined}
+      contentContainerStyle={[styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle]}
       ListHeaderComponent={headerComponent}
       ListFooterComponent={footerComponent}
       ListEmptyComponent={placeholder ?? ListEmptyComponent}
@@ -174,15 +162,8 @@ 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
-    );
+  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

package/src/components/screen/ScreenList.tsx

@@ -4,7 +4,7 @@ import {
   type ElementType,
   type ReactElement,
   useMemo,
-} from 'react';
+} from "react";
 import {
   FlatList,
   type NativeScrollEvent,
@@ -12,48 +12,40 @@ import {
   type StyleProp,
   View,
   type ViewStyle,
-} from 'react-native';
+} from "react-native";
 
 import Animated, {
   type AnimatedRef,
   useAnimatedScrollHandler,
   useComposedEventHandler,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
+} 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';
+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 &
+export type ScreenListProps<T = unknown, As extends ElementType = typeof FlatList> = ScreenScrollableProps &
   Omit<
     ComponentPropsWithoutRef<As>,
-    | 'data'
-    | 'renderItem'
-    | 'keyExtractor'
-    | 'style'
-    | 'contentContainerStyle'
-    | 'onScroll'
-    | 'ListHeaderComponent'
-    | 'ListFooterComponent'
-    | 'ListEmptyComponent'
+    | "data"
+    | "renderItem"
+    | "keyExtractor"
+    | "style"
+    | "contentContainerStyle"
+    | "onScroll"
+    | "ListHeaderComponent"
+    | "ListFooterComponent"
+    | "ListEmptyComponent"
     | keyof ScreenScrollableProps
   > & {
     /**
@@ -108,10 +100,7 @@ export type ScreenListProps<
  * />
  * ```
  */
-export function ScreenList<
-  T = unknown,
-  As extends ElementType = typeof FlatList,
->({
+export function ScreenList<T = unknown, As extends ElementType = typeof FlatList>({
   as,
   data,
   renderItem,
@@ -136,10 +125,7 @@ export function ScreenList<
   // not on every render — `as` is arbitrary here (not a fixed 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]
-  );
+  const AnimatedComponent = useMemo(() => Animated.createAnimatedComponent(Component), [Component]);
 
   const {
     background,
@@ -164,16 +150,12 @@ export function ScreenList<
 
   const jsScrollHandler = useAnimatedScrollHandler(
     (event) => {
-      if (onScroll)
-        onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
+      if (onScroll) onScroll(event as unknown as NativeSyntheticEvent<NativeScrollEvent>);
     },
     [onScroll]
   );
 
-  const composedHandler = useComposedEventHandler([
-    scrollHandler,
-    jsScrollHandler,
-  ]);
+  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.
@@ -202,20 +184,13 @@ export function ScreenList<
 
   return (
     <AnimatedComponent
-      ref={
-        isDefaultFlatList
-          ? (scrollRef as unknown as AnimatedRef<never>)
-          : undefined
-      }
+      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,
-      ]}
+      contentInsetAdjustmentBehavior={hasHeader ? "never" : undefined}
+      contentContainerStyle={[styles.content(resolvedMargins, hasHeader, bottomInset), contentContainerStyle]}
       ListHeaderComponent={headerComponent}
       ListFooterComponent={footerComponent}
       ListEmptyComponent={placeholder ?? ListEmptyComponent}
@@ -227,7 +202,7 @@ export function ScreenList<
     />
   );
 }
-ScreenList.displayName = 'Screen.List';
+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
@@ -236,15 +211,8 @@ ScreenList.displayName = 'Screen.List';
 // 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
-    );
+  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

package/src/components/screen/ScreenScrollView.tsx

@@ -1,30 +1,23 @@
-import { Children, type ReactNode } from 'react';
-import {
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type ScrollViewProps,
-  View,
-} from 'react-native';
+import { Children, type ReactNode } from "react";
+import { type NativeScrollEvent, type NativeSyntheticEvent, type ScrollViewProps, View } from "react-native";
 
 import Animated, {
   type ScrollHandlerProcessed,
   useAnimatedScrollHandler,
   useComposedEventHandler,
-} from 'react-native-reanimated';
-import { StyleSheet } from 'react-native-unistyles';
-import { scheduleOnRN } from 'react-native-worklets';
+} from "react-native-reanimated";
+import { StyleSheet } from "react-native-unistyles";
+import { scheduleOnRN } from "react-native-worklets";
 
-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 } from './utils';
+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 } from "./utils";
 
-export interface ScreenScrollViewProps
-  extends Omit<ScrollViewProps, 'horizontal'>,
-    ScreenScrollableProps {
+export interface ScreenScrollViewProps extends Omit<ScrollViewProps, "horizontal">, ScreenScrollableProps {
   children?: ReactNode;
   /**
    * Reanimated scroll handler for custom scroll-driven animation, composed
@@ -144,7 +137,7 @@ export function ScreenScrollView({
       ref={scrollRef}
       style={[{ backgroundColor: background }, style]}
       horizontal={horizontal}
-      contentInsetAdjustmentBehavior={hasHeader ? 'never' : undefined}
+      contentInsetAdjustmentBehavior={hasHeader ? "never" : undefined}
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={16}
       contentContainerStyle={styles.scrollContent(hasHeader, resolvedMargins)}
@@ -156,12 +149,7 @@ export function ScreenScrollView({
       <View>
         <PortalHost name={SCREEN_HEADER_PORTAL_HOST} />
       </View>
-      <View
-        style={[
-          styles.content(horizontal, resolvedMargins),
-          contentContainerStyle,
-        ]}
-      >
+      <View style={[styles.content(horizontal, resolvedMargins), contentContainerStyle]}>
         {placeholder ?? children}
       </View>
       {/* Outside the padded content view so the horizontal margins do not
@@ -187,8 +175,7 @@ const styles = StyleSheet.create((theme, rt) => ({
       // 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) ? marginY : 0),
+        (hasHeader ? theme.layout.header.height + rt.insets.top : 0) + (hasYMargin(margins) ? marginY : 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) ? marginY : 0,
@@ -200,7 +187,7 @@ const styles = StyleSheet.create((theme, rt) => ({
     return {
       flexGrow: 1,
       paddingHorizontal: hasXMargin(margins) ? marginX : 0,
-      flexDirection: horizontal ? 'row' : 'column',
+      flexDirection: horizontal ? "row" : "column",
     };
   },
 }));

package/src/components/screen/index.ts

@@ -1,11 +1,11 @@
-export type { ScreenHeaderProps, ScreenProps } from './Screen';
-export { Screen } from './Screen';
-export type { ScreenContextValue } from './ScreenContext';
-export { useScreen } from './ScreenContext';
-export type { ScreenFlatListProps } from './ScreenFlatList';
-export { ScreenFlatList } from './ScreenFlatList';
-export type { ScreenListProps } from './ScreenList';
-export { ScreenList } from './ScreenList';
-export type { ScreenScrollViewProps } from './ScreenScrollView';
-export { ScreenScrollView } from './ScreenScrollView';
-export type { ScreenMargins, ScreenScrollableProps } from './types';
+export type { ScreenHeaderProps, ScreenProps } from "./Screen";
+export { Screen } from "./Screen";
+export type { ScreenContextValue } from "./ScreenContext";
+export { useScreen } from "./ScreenContext";
+export type { ScreenFlatListProps } from "./ScreenFlatList";
+export { ScreenFlatList } from "./ScreenFlatList";
+export type { ScreenListProps } from "./ScreenList";
+export { ScreenList } from "./ScreenList";
+export type { ScreenScrollViewProps } from "./ScreenScrollView";
+export { ScreenScrollView } from "./ScreenScrollView";
+export type { ScreenMargins, ScreenScrollableProps } from "./types";

package/src/components/screen/parts/BottomSafeArea.tsx

@@ -1,8 +1,8 @@
-import type { ComponentType } from 'react';
+import type { ComponentType } from "react";
 
 type SafeAreaViewProps = {
   edges: { readonly bottom: true };
-  insetType: 'all';
+  insetType: "all";
   style: { readonly flex: 0 };
 };
 
@@ -19,10 +19,9 @@ type SafeAreaViewProps = {
  * written against.
  */
 // eslint-disable-next-line @typescript-eslint/no-require-imports
-const { SafeAreaView } =
-  require('react-native-screens/src/components/safe-area') as {
-    SafeAreaView: ComponentType<SafeAreaViewProps>;
-  };
+const { SafeAreaView } = require("react-native-screens/src/components/safe-area") as {
+  SafeAreaView: ComponentType<SafeAreaViewProps>;
+};
 
 const BOTTOM_EDGE = { bottom: true } as const;
 const SPACER = { flex: 0 } as const;

package/src/components/screen/parts/ScreenPlaceholder.tsx

@@ -1,10 +1,10 @@
-import type { ReactElement, ReactNode } from 'react';
-import { View } from 'react-native';
+import type { ReactElement, ReactNode } from "react";
+import { View } from "react-native";
 
-import { StyleSheet } from 'react-native-unistyles';
+import { StyleSheet } from "react-native-unistyles";
 
-import { Spinner } from '../../spinner';
-import type { ScreenScrollableProps } from '../types';
+import { Spinner } from "../../spinner";
+import type { ScreenScrollableProps } from "../types";
 
 /**
  * Centres a loading/empty placeholder in whatever space the content leaves.
@@ -16,10 +16,7 @@ export function ScreenPlaceholder({ children }: { children: ReactNode }) {
 }
 
 interface PlaceholderInput
-  extends Pick<
-    ScreenScrollableProps,
-    'loading' | 'LoadingComponent' | 'EmptyComponent'
-  > {
+  extends Pick<ScreenScrollableProps, "loading" | "LoadingComponent" | "EmptyComponent"> {
   /** Whether the container has nothing to render (empty `data`, no children). */
   isEmpty: boolean;
 }
@@ -36,9 +33,7 @@ export function renderScreenPlaceholder({
   isEmpty,
 }: PlaceholderInput): ReactElement | null {
   if (loading) {
-    return (
-      <ScreenPlaceholder>{LoadingComponent ?? <Spinner />}</ScreenPlaceholder>
-    );
+    return <ScreenPlaceholder>{LoadingComponent ?? <Spinner />}</ScreenPlaceholder>;
   }
   if (isEmpty && EmptyComponent) {
     return <ScreenPlaceholder>{EmptyComponent}</ScreenPlaceholder>;
@@ -49,7 +44,7 @@ export function renderScreenPlaceholder({
 const styles = StyleSheet.create(() => ({
   placeholder: {
     flexGrow: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
+    alignItems: "center",
+    justifyContent: "center",
   },
 }));