fluent-styles 1.62.13 → 1.62.15

package/src/dropdown/index.tsx

@@ -81,6 +81,32 @@ interface DropdownBaseProps<TItem extends DropdownOptionItem>
   emptyText?: string;
   focusColor?: string;
   groupBy?: (item: TItem) => string;
+  /**
+   * Resting-surface + option-panel colour overrides — lets a consumer theme
+   * the dropdown (e.g. for dark mode) without the trigger's own focus/error
+   * border logic needing to change. A nested `colors` object (rather than
+   * a flat `backgroundColor` prop) avoids colliding with the `ViewStyle`
+   * props this interface already extends, which style the outer wrapper,
+   * not the trigger box.
+   */
+  colors?: StyledDropdownColors;
+}
+
+export interface StyledDropdownColors {
+  /** Trigger box resting background. @default '#fff' */
+  background?:      string;
+  /** Trigger box resting border (overridden by focus/error). @default gray[200] */
+  border?:          string;
+  /** Selected value text colour. @default gray[800] */
+  text?:            string;
+  /** Open option-panel background. @default '#fff' */
+  panelBackground?: string;
+  /** Open option-panel border. @default gray[200] */
+  panelBorder?:     string;
+  /** Option row label text colour. @default gray[800] */
+  panelText?:       string;
+  /** Dividers / section-header strip background inside the panel. @default gray[100] */
+  panelDivider?:    string;
 }
 
 export interface StyledDropdownProps<
@@ -221,11 +247,12 @@ const OptionRow: React.FC<{
   multiSelect: boolean;
   size: DropdownSize;
   focusColor: string;
-}> = ({ item, selected, onPress, multiSelect, size, focusColor }) => {
+  textColor: string;
+}> = ({ item, selected, onPress, multiSelect, size, focusColor, textColor: baseTextColor }) => {
   const sz = SZ[size];
   const textColor = item.disabled
     ? theme.colors.gray[300]
-    : theme.colors.gray[800];
+    : baseTextColor;
 
   return (
     <StyledButton
@@ -309,6 +336,7 @@ interface ListPanelProps {
   allSelected?: boolean;
   onSelectAll?: () => void;
   onPanelLayout?: (height: number) => void;
+  colors: Required<StyledDropdownColors>;
 }
 
 type ListEntry = DropdownOptionItem | { _header: string };
@@ -333,6 +361,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
   allSelected,
   onSelectAll,
   onPanelLayout,
+  colors,
 }) => {
   const [query, setQuery] = useState("");
   const sz = SZ[size];
@@ -376,7 +405,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
             paddingHorizontal={sz.px}
             paddingTop={10}
             paddingBottom={4}
-            backgroundColor={theme.colors.gray[50]}
+            backgroundColor={colors.panelDivider}
           >
             <StyledText
               fontSize={11}
@@ -398,10 +427,11 @@ const ListPanel: React.FC<ListPanelProps> = ({
           multiSelect={multiSelect}
           size={size}
           focusColor={focusColor}
+          textColor={colors.panelText}
         />
       );
     },
-    [selectedKeys, onSelect, multiSelect, size, focusColor, sz.px],
+    [selectedKeys, onSelect, multiSelect, size, focusColor, sz.px, colors.panelDivider, colors.panelText],
   );
 
   const keyExtractor = useCallback(
@@ -427,10 +457,10 @@ const ListPanel: React.FC<ListPanelProps> = ({
           left={position.left}
           width={position.width}
           maxHeight={maxHeight}
-          backgroundColor={theme.colors.white}
+          backgroundColor={colors.panelBackground}
           borderRadius={10}
           borderWidth={1}
-          borderColor={theme.colors.gray[200]}
+          borderColor={colors.panelBorder}
           shadowColor={theme.colors.gray[900]}
           shadowOffset={{
             width: 0,
@@ -545,7 +575,7 @@ const ListPanel: React.FC<ListPanelProps> = ({
               renderItem={renderItem}
               ItemSeparatorComponent={() => (
                 <StyledDivider
-                  backgroundColor={theme.colors.gray[100]}
+                  backgroundColor={colors.panelDivider}
                   height={1}
                 />
               )}
@@ -634,6 +664,7 @@ const Trigger: React.FC<{
   hasError: boolean;
   focusColor: string;
   leftIcon?: React.ReactNode;
+  colors: Required<StyledDropdownColors>;
 }> = ({
   triggerRef,
   onPress,
@@ -648,24 +679,25 @@ const Trigger: React.FC<{
   hasError,
   focusColor,
   leftIcon,
+  colors,
 }) => {
   const sz = SZ[size];
   const opacity = disabled ? 0.5 : 1;
-  const textColor = isPlaceholder ? placeholderColor : theme.colors.gray[800];
+  const textColor = isPlaceholder ? placeholderColor : colors.text;
 
   // Border colour logic
   const borderColor = hasError
     ? theme.colors.red[500]
     : open
       ? focusColor
-      : theme.colors.gray[200];
+      : colors.border;
 
   // Variant-specific styles
   const variantStyle: ViewStyle = (() => {
     switch (variant) {
       case "filled":
         return {
-          backgroundColor: open ? theme.colors.white : theme.colors.gray[100],
+          backgroundColor: colors.background,
           borderWidth: 0,
           borderBottomWidth: open ? 2 : 0,
           borderBottomColor: borderColor,
@@ -686,7 +718,7 @@ const Trigger: React.FC<{
         };
       default: // outline
         return {
-          backgroundColor: theme.colors.white,
+          backgroundColor: colors.background,
           borderWidth: open ? 1.5 : 1,
           borderColor: borderColor,
           borderRadius: 8,
@@ -810,6 +842,7 @@ export const StyledDropdown = (
     emptyText = "No options found",
     focusColor = theme.colors.indigo?.[500] ?? "#6366f1",
     groupBy,
+    colors: colorsProp,
     ref,
     ...rest
   }: StyledDropdownProps & { ref?: React.Ref<any> },
@@ -819,6 +852,18 @@ export const StyledDropdown = (
     const { triggerRef, pos, measure, updatePanelHeight } =
       useMeasure(maxHeight);
 
+    // PATCHED: resolved once here so both the closed Trigger and the open
+    // ListPanel share one themed palette instead of each hard-coding white.
+    const RC: Required<StyledDropdownColors> = {
+      background:      colorsProp?.background      ?? theme.colors.white,
+      border:           colorsProp?.border           ?? theme.colors.gray[200],
+      text:             colorsProp?.text             ?? theme.colors.gray[800],
+      panelBackground:  colorsProp?.panelBackground  ?? theme.colors.white,
+      panelBorder:      colorsProp?.panelBorder      ?? theme.colors.gray[200],
+      panelText:        colorsProp?.panelText        ?? theme.colors.gray[800],
+      panelDivider:     colorsProp?.panelDivider      ?? theme.colors.gray[100],
+    };
+
     const selected = value ?? internalValue;
     const hasError = error || !!errorMessage;
     const selectedItem = useMemo(
@@ -885,6 +930,7 @@ export const StyledDropdown = (
           hasError={hasError}
           focusColor={focusColor}
           leftIcon={leftIcon}
+          colors={RC}
         />
         {open && (
           <ListPanel
@@ -897,6 +943,7 @@ export const StyledDropdown = (
             multiSelect={false}
             searchable={searchable}
             searchPlaceholder={searchPlaceholder}
+            colors={RC}
             clearable={clearable}
             onClear={handleClear}
             emptyText={emptyText}
@@ -943,6 +990,7 @@ export const StyledMultiSelectDropdown = (
     separator = ", ",
     maxDisplay = 3,
     selectAll = false,
+    colors: colorsProp,
     ref,
     ...rest
   }: StyledMultiSelectDropdownProps & { ref?: React.Ref<any> },
@@ -951,6 +999,17 @@ export const StyledMultiSelectDropdown = (
     const [internalKeys, setInternalKeys] = useState<string[]>(
       defaultValue ?? [],
     );
+
+    // PATCHED: see StyledDropdown above — same shared-palette rationale.
+    const RC: Required<StyledDropdownColors> = {
+      background:      colorsProp?.background      ?? theme.colors.white,
+      border:           colorsProp?.border           ?? theme.colors.gray[200],
+      text:             colorsProp?.text             ?? theme.colors.gray[800],
+      panelBackground:  colorsProp?.panelBackground  ?? theme.colors.white,
+      panelBorder:      colorsProp?.panelBorder      ?? theme.colors.gray[200],
+      panelText:        colorsProp?.panelText        ?? theme.colors.gray[800],
+      panelDivider:     colorsProp?.panelDivider      ?? theme.colors.gray[100],
+    };
     const { triggerRef, pos, measure, updatePanelHeight } = useMeasure(maxHeight);
 
     const selectedKeys = useMemo(
@@ -1042,9 +1101,11 @@ export const StyledMultiSelectDropdown = (
           hasError={hasError}
           focusColor={focusColor}
           leftIcon={leftIcon}
+          colors={RC}
         />
         {open && (
           <ListPanel
+            colors={RC}
             data={data}
             selectedKeys={selectedKeys}
             onSelect={handleSelect}

package/src/input/index.tsx

@@ -15,13 +15,10 @@ import {
   View,
 } from 'react-native'
 import type {
-  NativeSyntheticEvent,
-  TextInputFocusEventData,
   TextStyle,
   ViewStyle,
 } from 'react-native'
 
-import { styled }               from '../utiles/styled'
 import { theme }                from '../utiles/theme'
 import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants'
 import { StyledText }           from '../text'
@@ -129,41 +126,83 @@ export interface StyledTextInputProps
   // ── Pass-through style props (from original) ───────────────────────────
   fontSize?:          number
   fontWeight?:        TextStyle['fontWeight']
-  
+
+  // ── Theme override ──────────────────────────────────────────────────────
+  /**
+   * Resting-state surface colours. Lets a consumer theme this field (e.g.
+   * for dark mode) without fighting the focus/error border logic below —
+   * those stay computed internally and only fall back to `colors.border`
+   * when neither focused nor in an error state.
+   */
+  colors?:            StyledFieldColors
+
 }
 
-const TextInputBase = styled<CardComponentProps>(TextInput, {
-    base: {
-        borderColor: theme.colors.gray[200],
-        backgroundColor: theme.colors.gray[1],
-        flex : 1,
-        color: theme.colors.gray[800],
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-        fontSize: theme.fontSize.normal,
-        minHeight: 48,
-    },
-    variants: {
-        ...viewStyleVariants,
-        ...viewStyleStringVariants,
-
-        fontSize: (selected: string) => {
-            const size = selected || theme.fontSize.normal;
-            if (isNaN(Number(size))) {
-                // throw new Error('Invalid fontSize value');
-            }
-            return { fontSize: Number(size) };
-        },
+export interface StyledFieldColors {
+  /** Resting background of the input box. @default '#fff' (outline/filled) */
+  background?:  string
+  /** Resting border colour (overridden by focus/error). @default gray[200] */
+  border?:      string
+  /** Typed text colour. @default gray[800] */
+  text?:        string
+  /** Placeholder text colour. @default gray[300] */
+  placeholder?: string
+  /** Label text colour — `labelProps.color` still wins if also set. @default gray[700] */
+  label?:       string
+}
 
-        fontWeight: (selected: string) => {
-            const weight = selected || theme.fontWeight.normal;
-            if (isNaN(Number(weight))) {
-                // throw new Error('Invalid fontWeight value');
-            }
-            return { fontWeight: weight as any };
-        },
-    }
-});
+// ─── Flat style-prop resolution ────────────────────────────────────────────────
+// Replaces the generic `styled()` wrapper that used to sit around TextInput.
+// Preserves its behaviour exactly: any flat ViewStyle/TextStyle prop (e.g.
+// `opacity`, `padding`, `borderColor`) passed straight to StyledTextInput is
+// resolved into a real style on the inner TextInput and stripped out of the
+// props spread onto it — same variant maps `styled()` used, resolved locally
+// instead of through the shared HOC.
+const BASE_INPUT_STYLE: TextStyle = {
+    borderColor: theme.colors.gray[200],
+    // PATCHED: was theme.colors.gray[1] (white) — this style lands on the
+    // *inner* native TextInput, layered on top of the wrap View that
+    // `variantWrapStyle`/`FC.background` already colour. Nothing downstream
+    // ever overrode it, so every input rendered an opaque white rectangle
+    // regardless of the wrap's themed colour. Transparent lets the wrap's
+    // colour actually show through.
+    backgroundColor: 'transparent',
+    flex: 1,
+    color: theme.colors.gray[800],
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    fontSize: theme.fontSize.normal,
+    minHeight: 48,
+}
+
+const FLAT_STYLE_VARIANTS: Record<string, any> = {
+    ...viewStyleVariants,
+    ...viewStyleStringVariants,
+}
+
+const resolveFlatStyle = (
+    props: Record<string, any>,
+): { style: TextStyle; clean: Record<string, any> } => {
+    const style: TextStyle = { ...BASE_INPUT_STYLE }
+    const clean: Record<string, any> = { ...props }
+
+    Object.keys(FLAT_STYLE_VARIANTS).forEach((key) => {
+        if (!(key in clean)) return
+        const selected = clean[key]
+        delete clean[key]
+
+        const variant = FLAT_STYLE_VARIANTS[key]
+        if (typeof variant === 'function') {
+            const resolved = variant(selected, props)
+            if (resolved) Object.assign(style, resolved)
+        } else if (variant?.[selected]) {
+            const value = variant[selected]
+            Object.assign(style, typeof value === 'function' ? value(selected, props) : value)
+        }
+    })
+
+    return { style, clean }
+}
 
 export interface StyledTextInputHandle extends StyledTextInputProps {
   focus:      () => void
@@ -201,7 +240,9 @@ function variantWrapStyle(
   switch (variant) {
     case 'filled':
       return {
-        backgroundColor: focused ? '#fff' : bg,
+        // PATCHED: used to hard-jump to '#fff' on focus, which fought any
+        // themed `bg` (e.g. a dark surface would flash white on tap).
+        backgroundColor: bg,
         borderWidth:     focused ? 1.5 : 0,
         borderColor:     bc,
       }
@@ -218,8 +259,11 @@ function variantWrapStyle(
         borderWidth:     0,
       }
     default: // outline
+      // PATCHED: used to hard-code '#fff', ignoring the `bg` param entirely
+      // — the one line responsible for every "white input on a dark
+      // screen" bug. `bg` now carries the caller's themed surface colour.
       return {
-        backgroundColor: '#fff',
+        backgroundColor: bg,
         borderWidth:     focused ? 1.5 : 1,
         borderColor:     bc,
       }
@@ -368,6 +412,7 @@ export const StyledTextInput = (
     borderColor:      borderColorProp,
     focusColor        = theme.colors.indigo?.[500] ?? '#6366f1',
     floatLabel        = false,
+    colors:           colorsProp,
 
     // Styles
     containerStyle,
@@ -396,7 +441,7 @@ export const StyledTextInput = (
     onBlur:  onBlurProp,
     ref,
     ...rest
-  }: StyledTextInputProps & { ref?: React.Ref<React.ComponentRef<typeof TextInputBase>> },
+  }: StyledTextInputProps & { ref?: React.Ref<StyledTextInputHandle> },
 ) => {
     const [focused,     setFocused]     = useState(false)
     const [localValue,  setLocalValue]  = useState(defaultValue ?? '')
@@ -418,12 +463,12 @@ export const StyledTextInput = (
       onChangeText?.(text)
     }, [value, onChangeText])
 
-    const handleFocus = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleFocus = useCallback((e: Parameters<NonNullable<TextInputProps['onFocus']>>[0]) => {
       setFocused(true)
       onFocusProp?.(e)
     }, [onFocusProp])
 
-    const handleBlur = useCallback((e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+    const handleBlur = useCallback((e: Parameters<NonNullable<TextInputProps['onBlur']>>[0]) => {
       setFocused(false)
       onBlurProp?.(e)
     }, [onBlurProp])
@@ -432,8 +477,20 @@ export const StyledTextInput = (
     const hasError   = error || !!errorMessage
     const sz         = SIZE[size]
 
+    // PATCHED: `colors` lets a consumer theme the resting surface (e.g. for
+    // dark mode) without touching the focus/error logic below — those stay
+    // computed here and only fall back to `FC.border` when neither focused
+    // nor erroring, so a themed border never masks a validation error.
+    const FC = {
+      background:  colorsProp?.background  ?? (theme.colors.gray[50] ?? '#fafafa'),
+      border:       colorsProp?.border       ?? theme.colors.gray[200],
+      text:         colorsProp?.text         ?? theme.colors.gray[800],
+      placeholder:  colorsProp?.placeholder  ?? theme.colors.gray[300],
+      label:        colorsProp?.label        ?? theme.colors.gray[700],
+    }
+
     const resolvedBorderColor = borderColorProp
-      ?? (hasError ? theme.colors.red[500] : theme.colors.gray[200])
+      ?? (hasError ? theme.colors.red[500] : FC.border)
 
     const resolvedFocusColor = hasError
       ? theme.colors.red[500]
@@ -442,7 +499,7 @@ export const StyledTextInput = (
     const wrapStyle = variantWrapStyle(
       variant,
       resolvedBorderColor,
-      theme.colors.gray[50] ?? '#fafafa',
+      FC.background,
       focused,
       resolvedFocusColor,
     )
@@ -451,6 +508,11 @@ export const StyledTextInput = (
     const hasLeftAddon  = !!leftAddon
     const hasRightAddon = !!rightAddon
 
+    // Resolves any flat ViewStyle/TextStyle prop passed straight to
+    // StyledTextInput (e.g. `opacity`, `padding`) into a real style, and
+    // strips those keys out of what gets spread onto the native TextInput.
+    const { style: flatStyle, clean: cleanRest } = resolveFlatStyle(rest)
+
     // ── Right-side icons (priority: loading > clear > rightIcon) ─────────
     const resolvedRightNode = loading ? (
       <ActivityIndicator size="small" color={theme.colors.gray[400]} />
@@ -476,8 +538,8 @@ export const StyledTextInput = (
             <StyledText
               fontSize={theme.fontSize.small}
               fontWeight={theme.fontWeight.semiBold}
-              color={theme.colors.gray[700]}
-            
+              color={FC.label}
+
               marginBottom={6}
               {...labelProps}
             >
@@ -535,7 +597,7 @@ export const StyledTextInput = (
             ) : null}
 
             {/* Core TextInput */}
-            <TextInputBase
+            <TextInput
               ref={inputRef}
               value={value}
               defaultValue={defaultValue}
@@ -543,12 +605,13 @@ export const StyledTextInput = (
               onFocus={handleFocus}
               onBlur={handleBlur}
               placeholder={floatLabel ? undefined : placeholder}
-              placeholderTextColor={theme.colors.gray[300]}
+              placeholderTextColor={FC.placeholder}
               editable={editable && !loading}
               multiline={multiline}
               numberOfLines={numberOfLines}
               maxLength={maxLength}
               style={[
+                flatStyle,
                 S.input,
                 {
                   fontSize:    fontSizeProp ?? sz.fontSize,
@@ -557,12 +620,12 @@ export const StyledTextInput = (
                   paddingVertical:   sz.paddingV,
                   minHeight:         multiline ? sz.minHeight * 2 : sz.minHeight,
                   opacity:           editable && !loading ? 1 : 0.55,
-                  color:             theme.colors.gray[800],
+                  color:             FC.text,
                   textAlignVertical: multiline ? 'top' : 'center',
                 },
                 inputStyle,
               ]}
-              {...rest}
+              {...cleanRest}
             />
 
             {/* Right icon / clear / spinner */}

package/src/page/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { StyledSafeAreaView, StyledSafeAreaViewProps } from '../safeAreaView';
-import { StatusBar, StatusBarProps } from 'react-native';
+import { StatusBar, StatusBarProps, Platform, useColorScheme } from 'react-native';
 import { StyledHeader } from '../header';
 
 interface StyledPageProps extends StyledSafeAreaViewProps {
@@ -19,10 +19,43 @@ interface StyledPageType {
     displayName?: string;
 }
 
-const Page = ({ children, statusBarProps, showStatusBar = true, statusBarStyle = 'dark-content', statusBarBackgroundColor, hideStatusBarOnAndroid, hideStatusBarOnIOS, translucentStatusBar, ...props }: React.PropsWithChildren<StyledPageProps>) => {
+// statusBarStyle used to default to a hardcoded 'dark-content' regardless of
+// the active theme — any screen rendered in dark mode that forgot to pass
+// its own statusBarStyle got dark (near-invisible) status bar icons on a
+// dark background. Falls back to the OS color scheme via useColorScheme()
+// instead, the same signal a theme-aware caller would use for its own
+// explicit statusBarStyle.
+//
+// translucentStatusBar now also defaults to true on Android specifically
+// (via Platform.select): with edge-to-edge unavoidable from targetSdk 35+,
+// StatusBar's `backgroundColor` prop is deprecated and silently ignored on
+// Android there, so a non-translucent bar left the *native* window
+// background (white by default) showing behind the status bar instead of
+// the page's own backgroundColor. iOS's status bar is always an overlay, so
+// it's left unaffected (translucentStatusBar stays undefined there unless
+// the caller sets it).
+const Page = ({
+    children, statusBarProps, showStatusBar = true,
+    statusBarStyle, statusBarBackgroundColor,
+    hideStatusBarOnAndroid, hideStatusBarOnIOS,
+    translucentStatusBar,
+    ...props
+}: React.PropsWithChildren<StyledPageProps>) => {
+    const colorScheme = useColorScheme();
+    const resolvedStatusBarStyle = statusBarStyle ?? (colorScheme === 'dark' ? 'light-content' : 'dark-content');
+    const resolvedTranslucent = translucentStatusBar ?? Platform.select({ android: true, default: undefined });
+
     return (
         <StyledSafeAreaView {...props}>
-            {showStatusBar && <StatusBar hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS} barStyle={statusBarStyle} backgroundColor={statusBarBackgroundColor} translucent={translucentStatusBar} {...statusBarProps} />}
+            {showStatusBar && (
+                <StatusBar
+                    hidden={hideStatusBarOnAndroid || hideStatusBarOnIOS}
+                    barStyle={resolvedStatusBarStyle}
+                    backgroundColor={statusBarBackgroundColor}
+                    translucent={resolvedTranslucent}
+                    {...statusBarProps}
+                />
+            )}
             {children}
         </StyledSafeAreaView>
     )

package/src/pressable/index.tsx

@@ -2,16 +2,22 @@
 import { Pressable, PressableProps } from 'react-native';
 import { styled } from '../utiles/styled';
 import { ViewStyle } from '../utiles/viewStyleProps';
-import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
+import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 type StyledPressableProps = PressableProps & ViewStyle;
 
+// Same missing-viewStyleVariants gap as StyledSafeAreaView (see that file
+// for the full explanation): width/height/borderRadius/backgroundColor
+// passed to StyledPressable were silently dropped instead of styled —
+// e.g. an icon button built as <StyledPressable width={44} height={44}
+// borderRadius={22} backgroundColor={...}> rendered with none of that.
 const StyledPressable = styled<StyledPressableProps>(Pressable, {
     base: {
         position: 'relative',
     } as ViewStyle,
     variants: {
-        ...viewStyleStringVariants
+        ...viewStyleVariants,
+        ...viewStyleStringVariants,
     } as any
 });
 

package/src/safeAreaView/index.tsx

@@ -4,15 +4,25 @@ import {
 } from 'react-native-safe-area-context';
 import { styled } from '../utiles/styled';
 import { ViewStyleProps, ViewStyle } from '../utiles/viewStyleProps';
-import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
+import { viewStyleVariants, viewStyleStringVariants } from '../utiles/viewStyleVariants';
 
 type StyledSafeAreaViewProps = SafeAreaViewProps & ViewStyleProps;
 
+// This only spread viewStyleStringVariants, so backgroundColor/padding/
+// margin/width/height/borderRadius/etc — everything defined in
+// viewStyleVariants instead — were never registered as variants here. They
+// fell through as raw unhandled props on SafeAreaView instead of landing in
+// `style`, so e.g. <StyledPage backgroundColor="#111"> silently did nothing.
+// Stack already spreads both and works correctly, which is what exposed the
+// gap: on Android specifically, a screen that relied on StyledPage's
+// backgroundColor to paint the safe area showed the native window's default
+// white background through instead.
 const StyledSafeAreaView = styled<StyledSafeAreaViewProps>(SafeAreaView, {
     base: {
     flex: 1,
     } as ViewStyle,
     variants: {
+      ...viewStyleVariants,
       ...viewStyleStringVariants,
     }
 });

package/src/utiles/styled.tsx

@@ -17,7 +17,16 @@ const styled = <P extends object>(
     Component: ComponentType<P>,
     { base, variants }: StyledOptions = {}
 ) => {
-    const StyledComponent = (props: P & { ref?: React.Ref<any> }) => {
+    // `ref` used to be handled via a plain function reading it off props —
+    // that only works under React 19's "ref as prop" model. Consumers still
+    // on React 18 (the current baseline for RN/Expo) get a plain function
+    // component that can never receive a ref at all (React strips it before
+    // the function runs), so any ref attached to a styled() component —
+    // including this library's own internals, e.g. StyledDropdown's Trigger
+    // measuring its own on-screen position — silently no-ops with a
+    // "Function components cannot be given refs" warning. forwardRef is the
+    // version that works on both React 18 and 19.
+    const StyledComponent = React.forwardRef<any, P>((props, ref) => {
         const styles: Style = { ...(base || {}) };
         const options = props as Record<string, any>;
         const incomingStyle = options.style;
@@ -39,8 +48,8 @@ const styled = <P extends object>(
             });
         }
 
-       return <Component {...(cleanProps as P)} style={[styles, incomingStyle]} />;
-    };
+       return <Component {...(cleanProps as P)} ref={ref} style={[styles, incomingStyle]} />;
+    });
 
     StyledComponent.displayName = `Styled(${
         typeof Component === "string" ? Component : Component.displayName ?? Component.name ?? "Component"