@compsych/mobile-ui 1.0.10 → 1.0.13

package/src/components/PromotionCard/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import {
   Image,
@@ -13,7 +13,7 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 import Svg, { Circle as SvgCircle } from 'react-native-svg';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 import { BodyText } from '../BodyText';
 import { HeaderText } from '../HeaderText';
 
@@ -45,8 +45,6 @@ export interface PromotionCardProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim } = sys;
-
 type VariantTokens = {
   cardBg: string;
   chipBg: string;
@@ -59,154 +57,6 @@ type VariantTokens = {
   progressColor: string;
 };
 
-const TOKENS: Record<
-  PromotionCardVariant,
-  Record<PromotionCardUsage, VariantTokens>
-> = {
-  filled: {
-    neutral: {
-      cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-      chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-      chipTextColor: cr.surface.surface.sysOnSurface,
-      titleColor: '#0f0f0f',
-      descColor: cr.surface.surface.sysOnSurfaceVariant,
-      descOpacity: 1,
-      buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-      buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-      progressColor: cr.accent.primary.sysPrimary,
-    },
-    informative: {
-      cardBg: cr.custom.info.sysOnInfoContainer,
-      chipBg: cr.custom.info.sysInfoContainer,
-      chipTextColor: cr.custom.info.sysOnInfoContainer,
-      titleColor: cr.custom.info.sysOnInfo,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.custom.info.sysOnInfo,
-      buttonIconColor: cr.custom.info.sysOnInfoContainer,
-      progressColor: cr.custom.info.sysOnInfo,
-    },
-    positive: {
-      cardBg: cr.custom.success.sysOnSuccessContainer,
-      chipBg: cr.custom.success.sysSuccessContainer,
-      chipTextColor: cr.custom.success.sysOnSuccessContainer,
-      titleColor: cr.custom.success.sysOnSuccess,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.custom.success.sysOnSuccess,
-      buttonIconColor: cr.custom.success.sysOnSuccessContainer,
-      progressColor: cr.custom.success.sysOnSuccess,
-    },
-    danger: {
-      cardBg: cr.error.sysOnErrorContainer,
-      chipBg: cr.error.sysErrorContainer,
-      chipTextColor: cr.error.sysOnErrorContainer,
-      titleColor: cr.error.sysOnError,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.error.sysOnError,
-      buttonIconColor: cr.error.sysOnErrorContainer,
-      progressColor: cr.error.sysOnError,
-    },
-    warning: {
-      cardBg: cr.custom.warning.sysOnWarningContainer,
-      chipBg: cr.custom.warning.sysWarningContainer,
-      chipTextColor: cr.custom.warning.sysOnWarningContainer,
-      titleColor: cr.custom.warning.sysOnWarning,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.custom.warning.sysOnWarning,
-      buttonIconColor: cr.custom.warning.sysOnWarningContainer,
-      progressColor: cr.custom.warning.sysOnWarning,
-    },
-    image: {
-      cardBg: 'transparent',
-      chipBg: 'rgba(255,255,255,0.2)',
-      chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-      titleColor: cr.accent.primary.sysOnPrimary,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-      buttonIconColor: cr.surface.surface.sysOnSurface,
-      progressColor: cr.accent.primary.sysOnPrimary,
-    },
-  },
-  tonal: {
-    neutral: {
-      cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-      chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
-      chipTextColor: cr.surface.surface.sysOnSurface,
-      titleColor: '#0f0f0f',
-      descColor: cr.surface.surface.sysOnSurfaceVariant,
-      descOpacity: 1,
-      buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
-      buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
-      progressColor: cr.accent.primary.sysPrimary,
-    },
-    informative: {
-      cardBg: cr.custom.info.sysInfoContainer,
-      chipBg: cr.custom.info.sysOnInfo,
-      chipTextColor: cr.custom.info.sysOnInfoContainer,
-      titleColor: cr.custom.info.sysOnInfoContainer,
-      descColor: cr.custom.info.sysOnInfoContainer,
-      descOpacity: 0.64,
-      buttonBg: cr.custom.info.sysInfo,
-      buttonIconColor: cr.custom.info.sysOnInfo,
-      progressColor: cr.custom.info.sysInfo,
-    },
-    positive: {
-      cardBg: cr.custom.success.sysSuccessContainer,
-      chipBg: cr.custom.success.sysOnSuccess,
-      chipTextColor: cr.custom.success.sysOnSuccessContainer,
-      titleColor: cr.custom.success.sysOnSuccessContainer,
-      descColor: cr.custom.success.sysOnSuccessContainer,
-      descOpacity: 0.64,
-      buttonBg: cr.custom.success.sysSuccess,
-      buttonIconColor: cr.custom.success.sysOnSuccess,
-      progressColor: cr.custom.success.sysSuccess,
-    },
-    danger: {
-      cardBg: cr.error.sysErrorContainer,
-      chipBg: cr.error.sysOnError,
-      chipTextColor: cr.error.sysOnErrorContainer,
-      titleColor: cr.error.sysOnErrorContainer,
-      descColor: cr.error.sysOnErrorContainer,
-      descOpacity: 0.64,
-      buttonBg: cr.error.sysError,
-      buttonIconColor: cr.error.sysOnError,
-      progressColor: cr.error.sysError,
-    },
-    warning: {
-      cardBg: cr.custom.warning.sysWarningContainer,
-      chipBg: cr.custom.warning.sysOnWarning,
-      chipTextColor: cr.custom.warning.sysOnWarningContainer,
-      titleColor: cr.custom.warning.sysOnWarningContainer,
-      descColor: cr.custom.warning.sysOnWarningContainer,
-      descOpacity: 0.64,
-      buttonBg: cr.custom.warning.sysWarning,
-      buttonIconColor: cr.custom.warning.sysOnWarning,
-      progressColor: cr.custom.warning.sysWarning,
-    },
-    image: {
-      cardBg: 'transparent',
-      chipBg: 'rgba(255,255,255,0.2)',
-      chipTextColor: cr.surface.inverse.sysInverseOnSurface,
-      titleColor: cr.accent.primary.sysOnPrimary,
-      descColor: cr.transparent.neutral.sysWhite80,
-      descOpacity: 1,
-      buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
-      buttonIconColor: cr.surface.surface.sysOnSurface,
-      progressColor: cr.accent.primary.sysOnPrimary,
-    },
-  },
-};
-
-// lg tokens: neutral uses filled, others use tonal
-function getLgTokens(usage: PromotionCardUsage): VariantTokens {
-  if (usage === 'neutral') return TOKENS.filled.neutral;
-  return TOKENS.tonal[usage];
-}
-
 const MD_HEIGHT = 197;
 const LG_HEIGHT = 363;
 const MD_BUTTON = 32;
@@ -238,8 +88,161 @@ export function PromotionCard({
   accessibilityLabel,
   style,
 }: PromotionCardProps) {
+  const { colorRoles: cr, dimensions: dim } = useTheme();
+
+  const tokens = useMemo(
+    (): Record<
+      PromotionCardVariant,
+      Record<PromotionCardUsage, VariantTokens>
+    > => ({
+      filled: {
+        neutral: {
+          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+          chipTextColor: cr.surface.surface.sysOnSurface,
+          titleColor: '#0f0f0f',
+          descColor: cr.surface.surface.sysOnSurfaceVariant,
+          descOpacity: 1,
+          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+          progressColor: cr.accent.primary.sysPrimary,
+        },
+        informative: {
+          cardBg: cr.custom.info.sysOnInfoContainer,
+          chipBg: cr.custom.info.sysInfoContainer,
+          chipTextColor: cr.custom.info.sysOnInfoContainer,
+          titleColor: cr.custom.info.sysOnInfo,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.custom.info.sysOnInfo,
+          buttonIconColor: cr.custom.info.sysOnInfoContainer,
+          progressColor: cr.custom.info.sysOnInfo,
+        },
+        positive: {
+          cardBg: cr.custom.success.sysOnSuccessContainer,
+          chipBg: cr.custom.success.sysSuccessContainer,
+          chipTextColor: cr.custom.success.sysOnSuccessContainer,
+          titleColor: cr.custom.success.sysOnSuccess,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.custom.success.sysOnSuccess,
+          buttonIconColor: cr.custom.success.sysOnSuccessContainer,
+          progressColor: cr.custom.success.sysOnSuccess,
+        },
+        danger: {
+          cardBg: cr.error.sysOnErrorContainer,
+          chipBg: cr.error.sysErrorContainer,
+          chipTextColor: cr.error.sysOnErrorContainer,
+          titleColor: cr.error.sysOnError,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.error.sysOnError,
+          buttonIconColor: cr.error.sysOnErrorContainer,
+          progressColor: cr.error.sysOnError,
+        },
+        warning: {
+          cardBg: cr.custom.warning.sysOnWarningContainer,
+          chipBg: cr.custom.warning.sysWarningContainer,
+          chipTextColor: cr.custom.warning.sysOnWarningContainer,
+          titleColor: cr.custom.warning.sysOnWarning,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.custom.warning.sysOnWarning,
+          buttonIconColor: cr.custom.warning.sysOnWarningContainer,
+          progressColor: cr.custom.warning.sysOnWarning,
+        },
+        image: {
+          cardBg: 'transparent',
+          chipBg: 'rgba(255,255,255,0.2)',
+          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
+          titleColor: cr.accent.primary.sysOnPrimary,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          buttonIconColor: cr.surface.surface.sysOnSurface,
+          progressColor: cr.accent.primary.sysOnPrimary,
+        },
+      },
+      tonal: {
+        neutral: {
+          cardBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          chipBg: cr.surface.surfaceContainer.sysSurfaceContainerHighest,
+          chipTextColor: cr.surface.surface.sysOnSurface,
+          titleColor: '#0f0f0f',
+          descColor: cr.surface.surface.sysOnSurfaceVariant,
+          descOpacity: 1,
+          buttonBg: cr.addOn.primaryFixed.sysPrimaryFixedDim,
+          buttonIconColor: cr.addOn.primaryFixed.sysOnPrimaryFixed,
+          progressColor: cr.accent.primary.sysPrimary,
+        },
+        informative: {
+          cardBg: cr.custom.info.sysInfoContainer,
+          chipBg: cr.custom.info.sysOnInfo,
+          chipTextColor: cr.custom.info.sysOnInfoContainer,
+          titleColor: cr.custom.info.sysOnInfoContainer,
+          descColor: cr.custom.info.sysOnInfoContainer,
+          descOpacity: 0.64,
+          buttonBg: cr.custom.info.sysInfo,
+          buttonIconColor: cr.custom.info.sysOnInfo,
+          progressColor: cr.custom.info.sysInfo,
+        },
+        positive: {
+          cardBg: cr.custom.success.sysSuccessContainer,
+          chipBg: cr.custom.success.sysOnSuccess,
+          chipTextColor: cr.custom.success.sysOnSuccessContainer,
+          titleColor: cr.custom.success.sysOnSuccessContainer,
+          descColor: cr.custom.success.sysOnSuccessContainer,
+          descOpacity: 0.64,
+          buttonBg: cr.custom.success.sysSuccess,
+          buttonIconColor: cr.custom.success.sysOnSuccess,
+          progressColor: cr.custom.success.sysSuccess,
+        },
+        danger: {
+          cardBg: cr.error.sysErrorContainer,
+          chipBg: cr.error.sysOnError,
+          chipTextColor: cr.error.sysOnErrorContainer,
+          titleColor: cr.error.sysOnErrorContainer,
+          descColor: cr.error.sysOnErrorContainer,
+          descOpacity: 0.64,
+          buttonBg: cr.error.sysError,
+          buttonIconColor: cr.error.sysOnError,
+          progressColor: cr.error.sysError,
+        },
+        warning: {
+          cardBg: cr.custom.warning.sysWarningContainer,
+          chipBg: cr.custom.warning.sysOnWarning,
+          chipTextColor: cr.custom.warning.sysOnWarningContainer,
+          titleColor: cr.custom.warning.sysOnWarningContainer,
+          descColor: cr.custom.warning.sysOnWarningContainer,
+          descOpacity: 0.64,
+          buttonBg: cr.custom.warning.sysWarning,
+          buttonIconColor: cr.custom.warning.sysOnWarning,
+          progressColor: cr.custom.warning.sysWarning,
+        },
+        image: {
+          cardBg: 'transparent',
+          chipBg: 'rgba(255,255,255,0.2)',
+          chipTextColor: cr.surface.inverse.sysInverseOnSurface,
+          titleColor: cr.accent.primary.sysOnPrimary,
+          descColor: cr.transparent.neutral.sysWhite80,
+          descOpacity: 1,
+          buttonBg: cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          buttonIconColor: cr.surface.surface.sysOnSurface,
+          progressColor: cr.accent.primary.sysOnPrimary,
+        },
+      },
+    }),
+    [cr],
+  );
+
+  // lg tokens: neutral uses filled, others use tonal
+  function getLgTokens(u: PromotionCardUsage): VariantTokens {
+    if (u === 'neutral') return tokens.filled.neutral;
+    return tokens.tonal[u];
+  }
+
   const isLg = size === 'lg';
-  const t = isLg ? getLgTokens(usage) : TOKENS[variant][usage];
+  const t = isLg ? getLgTokens(usage) : tokens[variant][usage];
   const isImage = usage === 'image';
   const p = Math.max(0, Math.min(1, progress));
 
@@ -250,7 +253,21 @@ export function PromotionCard({
 
   const containerStyle = [
     styles.card,
-    isLg ? styles.cardLg : styles.cardMd,
+    isLg
+      ? {
+          height: LG_HEIGHT,
+          borderRadius: dim.borderRadius.sysRadiusXl,
+          padding: dim.spacing.padding.sysPadding32,
+          flexDirection: 'column' as const,
+          gap: dim.spacing.padding.sysPadding24,
+        }
+      : {
+          height: MD_HEIGHT,
+          borderRadius: dim.borderRadius.sysRadiusLg,
+          paddingHorizontal: dim.spacing.padding.sysPadding16,
+          paddingVertical: dim.spacing.padding.sysPadding16,
+          justifyContent: 'space-between' as const,
+        },
     { backgroundColor: t.cardBg, opacity: disabled ? 0.48 : 1 },
     style,
   ];
@@ -291,12 +308,48 @@ export function PromotionCard({
       {chipLabel && (
         <View
           style={[
-            isLg ? styles.chipLg : styles.chipMd,
+            isLg
+              ? {
+                  flexDirection: 'row' as const,
+                  alignItems: 'center' as const,
+                  alignSelf: 'flex-start' as const,
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  paddingHorizontal: dim.spacing.padding.sysPadding16,
+                  paddingVertical: dim.spacing.padding.sysPadding4,
+                  gap: dim.spacing.padding.sysPadding8,
+                  height: 32,
+                }
+              : {
+                  flexDirection: 'row' as const,
+                  alignItems: 'center' as const,
+                  alignSelf: 'flex-start' as const,
+                  borderRadius: dim.borderRadius.sysRadiusFull,
+                  paddingHorizontal: dim.spacing.padding.sysPadding12,
+                  paddingVertical: dim.spacing.padding.sysPadding4,
+                  gap: dim.spacing.padding.sysPadding4,
+                  height: 24,
+                },
             { backgroundColor: t.chipBg },
           ]}
         >
           {chipIcon && (
-            <View style={isLg ? styles.chipIconWrapLg : styles.chipIconWrapMd}>
+            <View
+              style={
+                isLg
+                  ? {
+                      width: 20,
+                      height: 20,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }
+                  : {
+                      width: 16,
+                      height: 16,
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    }
+              }
+            >
               {chipIcon}
             </View>
           )}
@@ -307,7 +360,13 @@ export function PromotionCard({
       )}
 
       {/* Content (title + description) */}
-      <View style={isLg ? styles.contentLg : styles.contentMd}>
+      <View
+        style={
+          isLg
+            ? { gap: dim.spacing.padding.sysPadding8, flex: 1 }
+            : { gap: dim.spacing.padding.sysPadding4, maxWidth: '78%' }
+        }
+      >
         {title &&
           (isLg ? (
             <HeaderText variant="titleLarge" color={t.titleColor}>
@@ -349,6 +408,7 @@ export function PromotionCard({
             {
               width: buttonSize,
               height: buttonSize,
+              borderRadius: dim.borderRadius.sysRadiusFull,
               backgroundColor: t.buttonBg,
             },
           ]}
@@ -448,65 +508,10 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     alignSelf: 'stretch',
   },
-  cardMd: {
-    height: MD_HEIGHT,
-    borderRadius: sys.dimensions.borderRadius.sysRadiusLg,
-    paddingHorizontal: sys.dimensions.spacing.padding.sysPadding16,
-    paddingVertical: sys.dimensions.spacing.padding.sysPadding16,
-    justifyContent: 'space-between',
-  },
-  cardLg: {
-    height: LG_HEIGHT,
-    borderRadius: sys.dimensions.borderRadius.sysRadiusXl,
-    padding: sys.dimensions.spacing.padding.sysPadding32,
-    flexDirection: 'column',
-    gap: sys.dimensions.spacing.padding.sysPadding24,
-  },
-  chipMd: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    borderRadius: sys.dimensions.borderRadius.sysRadiusFull,
-    paddingHorizontal: sys.dimensions.spacing.padding.sysPadding12,
-    paddingVertical: sys.dimensions.spacing.padding.sysPadding4,
-    gap: sys.dimensions.spacing.padding.sysPadding4,
-    height: 24,
-  },
-  chipLg: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    borderRadius: sys.dimensions.borderRadius.sysRadiusFull,
-    paddingHorizontal: sys.dimensions.spacing.padding.sysPadding16,
-    paddingVertical: sys.dimensions.spacing.padding.sysPadding4,
-    gap: sys.dimensions.spacing.padding.sysPadding8,
-    height: 32,
-  },
-  chipIconWrapMd: {
-    width: 16,
-    height: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  chipIconWrapLg: {
-    width: 20,
-    height: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  contentMd: {
-    gap: sys.dimensions.spacing.padding.sysPadding4,
-    maxWidth: '78%',
-  },
-  contentLg: {
-    gap: sys.dimensions.spacing.padding.sysPadding8,
-    flex: 1,
-  },
   buttonWrap: {
     position: 'absolute',
   },
   button: {
-    borderRadius: sys.dimensions.borderRadius.sysRadiusFull,
     alignItems: 'center',
     justifyContent: 'center',
     overflow: 'hidden',

package/src/components/RadioButton/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import {
   Pressable,
@@ -9,7 +9,7 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { sys } from '../../tokens';
+import { useTheme } from '../../theme';
 
 export type RadioButtonSize = 'sm' | 'md';
 
@@ -25,28 +25,6 @@ export interface RadioButtonProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const { colorRoles: cr, dimensions: dim, typeScale: ts } = sys;
-
-const SIZE_TOKENS = {
-  sm: {
-    // Container (overall hit area)
-    hitArea: 36,
-    // Visible circle
-    circle: 20,
-    // Inner dot when selected
-    dot: 8,
-    fontSize: ts.bodySmall.sysFontSize,
-    lineHeight: ts.bodySmall.sysLineHeight,
-  },
-  md: {
-    hitArea: 40,
-    circle: 24,
-    dot: 10,
-    fontSize: ts.bodyMedium.sysFontSize,
-    lineHeight: ts.bodyMedium.sysLineHeight,
-  },
-};
-
 export function RadioButton({
   checked: checkedProp,
   defaultChecked = false,
@@ -58,6 +36,7 @@ export function RadioButton({
   invalid = false,
   style,
 }: RadioButtonProps) {
+  const { colorRoles: cr, dimensions: dim, typeScale: ts } = useTheme();
   const [internalChecked, setInternalChecked] =
     useState<boolean>(defaultChecked);
   const isControlled = checkedProp !== undefined;
@@ -65,7 +44,30 @@ export function RadioButton({
     ? (checkedProp as boolean)
     : internalChecked;
 
-  const s = SIZE_TOKENS[size];
+  const sizeTokens = useMemo(
+    () => ({
+      sm: {
+        // Container (overall hit area)
+        hitArea: 36,
+        // Visible circle
+        circle: 20,
+        // Inner dot when selected
+        dot: 8,
+        fontSize: ts.bodySmall.sysFontSize,
+        lineHeight: ts.bodySmall.sysLineHeight,
+      },
+      md: {
+        hitArea: 40,
+        circle: 24,
+        dot: 10,
+        fontSize: ts.bodyMedium.sysFontSize,
+        lineHeight: ts.bodyMedium.sysLineHeight,
+      },
+    }),
+    [ts],
+  );
+
+  const s = sizeTokens[size];
 
   function handlePress() {
     if (disabled) return;

package/src/components/ScreenContainer/ScreenContainer.test.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { createRef } from 'react';
 
-import { Text } from 'react-native';
+import { ScrollView, Text } from 'react-native';
 
 import { render } from '@testing-library/react-native';
 
@@ -26,4 +26,14 @@ describe('ScreenContainer', () => {
     expect(getByText('First')).toBeTruthy();
     expect(getByText('Second')).toBeTruthy();
   });
+
+  it('forwards ref to the underlying ScrollView', () => {
+    const ref = createRef<ScrollView>();
+    render(
+      <ScreenContainer ref={ref}>
+        <Text>content</Text>
+      </ScreenContainer>,
+    );
+    expect(ref.current).not.toBeNull();
+  });
 });

package/src/components/ScreenContainer/index.tsx

@@ -2,27 +2,37 @@ import React from 'react';
 
 import { ScrollView, type ScrollViewProps } from 'react-native';
 
-import { sys } from '../../tokens';
-
-const { dimensions: dim, colorRoles: cr } = sys;
+import { useTheme } from '../../theme';
 
 export interface ScreenContainerProps extends ScrollViewProps {
   children?: React.ReactNode;
 }
 
-export function ScreenContainer({
-  children,
-  style,
-  contentContainerStyle,
-  ...rest
-}: ScreenContainerProps) {
+/**
+ * Scrollable screen wrapper that applies the default surface background and
+ * standard padding. The ref is forwarded to the underlying ScrollView so
+ * callers can imperatively scroll, measure, or attach scroll listeners.
+ *
+ * @example
+ * const scrollRef = useRef<ScrollView>(null);
+ * <ScreenContainer ref={scrollRef}>...</ScreenContainer>
+ */
+export const ScreenContainer = React.forwardRef<
+  ScrollView,
+  ScreenContainerProps
+>(function ScreenContainer(
+  { children, style, contentContainerStyle, ...rest },
+  ref,
+) {
+  const { dimensions: dim, colorRoles: cr } = useTheme();
+
   return (
     <ScrollView
+      ref={ref}
       style={[
         {
           flex: 1,
-          backgroundColor:
-            cr.surface.surfaceContainer.sysSurfaceContainerLowest,
+          backgroundColor: cr.surface.surface.sysSurface,
         },
         style,
       ]}
@@ -38,4 +48,4 @@ export function ScreenContainer({
       {children}
     </ScrollView>
   );
-}
+});