@rocapine/react-native-onboarding-ui 1.24.0 → 1.25.1

package/dist/UI/Pages/ComposableScreen/types.js

@@ -19,6 +19,8 @@ const DatePickerElement_1 = require("./elements/DatePickerElement");
 const CarouselElement_1 = require("./elements/CarouselElement");
 const ZStackElement_1 = require("./elements/ZStackElement");
 const SafeAreaViewElement_1 = require("./elements/SafeAreaViewElement");
+const ScrollViewElement_1 = require("./elements/ScrollViewElement");
+const KeyboardAvoidingViewElement_1 = require("./elements/KeyboardAvoidingViewElement");
 var BaseBoxProps_1 = require("./elements/BaseBoxProps");
 Object.defineProperty(exports, "BaseBoxPropsSchema", { enumerable: true, get: function () { return BaseBoxProps_1.BaseBoxPropsSchema; } });
 exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
@@ -131,9 +133,57 @@ exports.UIElementSchema = zod_1.z.lazy(() => zod_1.z.union([
         props: SafeAreaViewElement_1.SafeAreaViewElementPropsSchema,
         children: zod_1.z.array(exports.UIElementSchema),
     }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        renderWhen: zod_1.z.union([react_native_onboarding_1.LeafConditionSchema, react_native_onboarding_1.ConditionGroupSchema]).optional(),
+        type: zod_1.z.literal("ScrollView"),
+        props: ScrollViewElement_1.ScrollViewElementPropsSchema,
+        children: zod_1.z.array(exports.UIElementSchema),
+    }),
+    zod_1.z.object({
+        id: zod_1.z.string(),
+        name: zod_1.z.string().optional(),
+        renderWhen: zod_1.z.union([react_native_onboarding_1.LeafConditionSchema, react_native_onboarding_1.ConditionGroupSchema]).optional(),
+        type: zod_1.z.literal("KeyboardAvoidingView"),
+        props: KeyboardAvoidingViewElement_1.KeyboardAvoidingViewElementPropsSchema,
+        children: zod_1.z.array(exports.UIElementSchema),
+    }),
 ]));
-exports.ComposableScreenStepPayloadSchema = zod_1.z.object({
+// See packages/onboarding for the canonical comment; mirror nesting guard here because
+// the UI re-parses the step with `ComposableScreenStepTypeSchema.parse(step)` in Renderer.tsx.
+const collectNestedKeyboardAvoidingViews = (nodes, insideKav, out) => {
+    for (const node of nodes) {
+        if (node.type === "KeyboardAvoidingView") {
+            if (insideKav)
+                out.push(node.id);
+            collectNestedKeyboardAvoidingViews(node.children, true, out);
+            continue;
+        }
+        if (node.type === "YStack" ||
+            node.type === "XStack" ||
+            node.type === "ZStack" ||
+            node.type === "SafeAreaView" ||
+            node.type === "ScrollView" ||
+            node.type === "Carousel") {
+            collectNestedKeyboardAvoidingViews(node.children, insideKav, out);
+        }
+    }
+};
+exports.ComposableScreenStepPayloadSchema = zod_1.z
+    .object({
     elements: zod_1.z.array(exports.UIElementSchema),
+})
+    .superRefine((payload, ctx) => {
+    const offenders = [];
+    collectNestedKeyboardAvoidingViews(payload.elements, false, offenders);
+    for (const id of offenders) {
+        ctx.addIssue({
+            code: zod_1.z.ZodIssueCode.custom,
+            path: ["elements"],
+            message: `KeyboardAvoidingView (id="${id}") cannot be nested inside another KeyboardAvoidingView.`,
+        });
+    }
 });
 exports.ComposableScreenStepTypeSchema = zod_1.z.object({
     id: zod_1.z.string(),

package/dist/UI/Pages/ComposableScreen/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/UI/Pages/ComposableScreen/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocapine/react-native-onboarding-ui",
-  "version": "1.24.0",
+  "version": "1.25.1",
   "description": "UI components and renderers for Rocapine Onboarding Studio - Built on top of the headless SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/UI/Pages/ComposableScreen/Renderer.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo } from "react";
-import { ScrollView, StyleSheet } from "react-native";
+import { KeyboardAvoidingView, Platform, StyleSheet, View } from "react-native";
 import { OnboardingProgressContext as HeadlessProgressContext } from "@rocapine/react-native-onboarding";
 import { ComposableScreenStepType, ComposableScreenStepTypeSchema, UIElement } from "./types";
 import { withErrorBoundary } from "../../ErrorBoundary";
@@ -59,21 +59,21 @@ const ComposableScreenRendererBase = ({ step, onContinue }: ContentProps) => {
       theme={theme}
       disableTopPadding
     >
-      <ScrollView
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-        alwaysBounceVertical={false}
-        keyboardShouldPersistTaps="handled"
+      <KeyboardAvoidingView
+        style={styles.flex}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
       >
-        {elements.map((element) => renderElement(element, ctx))}
-      </ScrollView>
+        <View style={styles.flex}>
+          {elements.map((element) => renderElement(element, ctx))}
+        </View>
+      </KeyboardAvoidingView>
     </OnboardingTemplate>
   );
 };
 
 const styles = StyleSheet.create({
-  scrollContent: {
-    flexGrow: 1,
+  flex: {
+    flex: 1,
   },
 });
 

package/src/UI/Pages/ComposableScreen/elements/BaseBoxProps.ts

@@ -60,6 +60,7 @@ export type BaseBoxProps = {
   flex?: number;
   flexShrink?: number;
   flexGrow?: number;
+  aspectRatio?: number;
   alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline";
   opacity?: number;
   backgroundColor?: string;
@@ -91,6 +92,7 @@ export const BaseBoxPropsSchema = z.object({
   flex: z.number().min(0).optional(),
   flexShrink: z.number().min(0).optional(),
   flexGrow: z.number().min(0).optional(),
+  aspectRatio: z.number().positive().optional(),
   alignSelf: z.enum(["auto", "flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
   opacity: z.number().min(0).max(1).optional(),
   backgroundColor: z.string().optional(),

package/src/UI/Pages/ComposableScreen/elements/ButtonElement.tsx

@@ -12,7 +12,7 @@ import {
 } from "@rocapine/react-native-onboarding";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext, dim, resolveInheritedFontFamily } from "./shared";
+import { RenderContext, buildShadowStyle, dim, resolveInheritedFontFamily } from "./shared";
 import { GradientBox } from "./GradientBox";
 import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
 import { evaluateSetVariableExpression } from "./expression";
@@ -141,14 +141,6 @@ type Props = {
   ctx: RenderContext;
 };
 
-const buildShadowStyle = (p: Pick<BaseBoxProps, "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "elevation">) => ({
-  shadowColor: p.shadowColor,
-  shadowOffset: p.shadowOffset,
-  shadowOpacity: p.shadowOpacity,
-  shadowRadius: p.shadowRadius,
-  elevation: p.elevation,
-});
-
 export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElement => {
   const { theme, onContinue, customActions, variables, setVariable } = ctx;
   const flatVariables = useMemo(
@@ -338,9 +330,8 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
             style={{
               flex: 1,
               padding: eff.padding,
-              paddingVertical: eff.paddingVertical ?? 14,
-              paddingHorizontal: eff.paddingHorizontal ?? 24,
-              alignItems: "center",
+              paddingVertical: eff.paddingVertical ?? (eff.padding != null ? undefined : 14),
+              paddingHorizontal: eff.paddingHorizontal ?? (eff.padding != null ? undefined : 24),
               justifyContent: "center",
             }}
           >
@@ -375,9 +366,8 @@ export const ButtonElementComponent = ({ element, ctx }: Props): React.ReactElem
         disabled={isDisabled}
         style={{
           padding: eff.padding,
-          paddingVertical: eff.paddingVertical ?? 14,
-          paddingHorizontal: eff.paddingHorizontal ?? 24,
-          alignItems: "center",
+          paddingVertical: eff.paddingVertical ?? (eff.padding != null ? undefined : 14),
+          paddingHorizontal: eff.paddingHorizontal ?? (eff.padding != null ? undefined : 24),
           justifyContent: "center",
           borderRadius,
         }}

package/src/UI/Pages/ComposableScreen/elements/ImageElement.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { z } from "zod";
-import { Image } from "react-native";
+import { Image, View } from "react-native";
 import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
 import { UIElement } from "../types";
-import { RenderContext, dim } from "./shared";
+import { RenderContext, buildShadowStyle, dim } from "./shared";
 import { GradientBox } from "./GradientBox";
 
 export type ImageElementProps = BaseBoxProps & {
@@ -26,45 +26,58 @@ type Props = {
 };
 
 export const ImageElementComponent = ({ element }: Props): React.ReactElement => {
-  const hasExplicitHeight = element.props.height !== undefined;
-
   const p = element.props;
+  const hasShadow = p.shadowColor != null || p.elevation != null;
+  // iOS clips shadows when overflow:hidden, so a shadow-bearing Image needs a
+  // wrapper View carrying the shadow (no overflow clip) and the Image inside
+  // with the rounded clip.
+  const shadowStyle = hasShadow ? buildShadowStyle(p) : null;
 
-  if (p.backgroundGradient) {
-    return (
-      <GradientBox
-        gradient={p.backgroundGradient}
+  if (p.backgroundGradient || hasShadow) {
+    const wrapperStyle = {
+      flex: p.flex,
+      flexShrink: p.flexShrink,
+      flexGrow: p.flexGrow,
+      alignSelf: p.alignSelf,
+      aspectRatio: p.aspectRatio,
+      width: dim(p.width),
+      height: dim(p.height),
+      minWidth: p.minWidth,
+      maxWidth: p.maxWidth,
+      minHeight: p.minHeight,
+      maxHeight: p.maxHeight,
+      borderRadius: p.borderRadius,
+      borderWidth: p.borderWidth,
+      borderColor: p.borderColor,
+      opacity: p.opacity,
+      margin: p.margin,
+      marginHorizontal: p.marginHorizontal,
+      marginVertical: p.marginVertical,
+      padding: p.padding,
+      paddingHorizontal: p.paddingHorizontal,
+      paddingVertical: p.paddingVertical,
+      ...(shadowStyle ?? {}),
+    };
+    const innerImage = (
+      <Image
+        source={{ uri: p.url }}
+        resizeMode={p.resizeMode}
         style={{
-          flex: p.flex,
-          flexShrink: p.flexShrink,
-          flexGrow: p.flexGrow,
-          alignSelf: p.alignSelf,
-          width: dim(p.width),
-          height: dim(p.height),
-          minWidth: p.minWidth,
-          maxWidth: p.maxWidth,
-          minHeight: p.minHeight,
-          maxHeight: p.maxHeight,
-          overflow: (p.overflow ?? "hidden") as any,
+          width: "100%",
+          height: "100%",
           borderRadius: p.borderRadius,
-          borderWidth: p.borderWidth,
-          borderColor: p.borderColor,
-          opacity: p.opacity,
-          margin: p.margin,
-          marginHorizontal: p.marginHorizontal,
-          marginVertical: p.marginVertical,
-          padding: p.padding,
-          paddingHorizontal: p.paddingHorizontal,
-          paddingVertical: p.paddingVertical,
+          overflow: (p.overflow ?? "hidden") as any,
         }}
-      >
-        <Image
-          source={{ uri: p.url }}
-          resizeMode={p.resizeMode}
-          style={{ width: "100%", height: "100%" }}
-        />
-      </GradientBox>
+      />
     );
+    if (p.backgroundGradient) {
+      return (
+        <GradientBox gradient={p.backgroundGradient} style={wrapperStyle as any}>
+          {innerImage}
+        </GradientBox>
+      );
+    }
+    return <View style={wrapperStyle as any}>{innerImage}</View>;
   }
 
   return (
@@ -76,6 +89,7 @@ export const ImageElementComponent = ({ element }: Props): React.ReactElement =>
         flexShrink: p.flexShrink,
         flexGrow: p.flexGrow,
         alignSelf: p.alignSelf,
+        aspectRatio: p.aspectRatio,
         width: dim(p.width),
         height: dim(p.height),
         minWidth: p.minWidth,

package/src/UI/Pages/ComposableScreen/elements/KeyboardAvoidingViewElement.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import { KeyboardAvoidingView, Platform } from "react-native";
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { GradientBox } from "./GradientBox";
+import { UIElement } from "../types";
+import { RenderContext, dim } from "./shared";
+
+export type KeyboardAvoidingBehavior = "padding" | "height" | "position";
+
+export type KeyboardAvoidingViewElementProps = BaseBoxProps & {
+  behavior?: KeyboardAvoidingBehavior;
+  keyboardVerticalOffset?: number;
+  enabled?: boolean;
+};
+
+export const KeyboardAvoidingViewElementPropsSchema = BaseBoxPropsSchema.extend({
+  behavior: z.enum(["padding", "height", "position"]).optional(),
+  keyboardVerticalOffset: z.number().optional(),
+  enabled: z.boolean().optional(),
+});
+
+type KAVUIElement = Extract<UIElement, { type: "KeyboardAvoidingView" }>;
+
+type Props = {
+  element: KAVUIElement;
+  ctx: RenderContext;
+};
+
+const defaultBehavior = (): KeyboardAvoidingBehavior => (Platform.OS === "ios" ? "padding" : "height");
+
+export const KeyboardAvoidingViewElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const p = element.props;
+  const hasGradient = !!p.backgroundGradient;
+
+  const containerStyle = {
+    flex: p.flex,
+    flexShrink: p.flexShrink,
+    flexGrow: p.flexGrow,
+    alignSelf: p.alignSelf,
+    width: dim(p.width),
+    height: dim(p.height),
+    minWidth: p.minWidth,
+    maxWidth: p.maxWidth,
+    minHeight: p.minHeight,
+    maxHeight: p.maxHeight,
+    margin: p.margin,
+    marginHorizontal: p.marginHorizontal,
+    marginVertical: p.marginVertical,
+    padding: p.padding,
+    paddingHorizontal: p.paddingHorizontal,
+    paddingVertical: p.paddingVertical,
+    backgroundColor: hasGradient ? undefined : p.backgroundColor,
+    borderWidth: p.borderWidth,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
+    overflow: hasGradient ? ("hidden" as const) : p.overflow,
+    opacity: p.opacity,
+  };
+
+  const kav = (
+    <KeyboardAvoidingView
+      behavior={p.behavior ?? defaultBehavior()}
+      keyboardVerticalOffset={p.keyboardVerticalOffset ?? 0}
+      enabled={p.enabled ?? true}
+      style={hasGradient ? { flex: 1 } : containerStyle}
+    >
+      {ctx.renderChildren(element.children, "YStack")}
+    </KeyboardAvoidingView>
+  );
+
+  if (hasGradient) {
+    return (
+      <GradientBox gradient={p.backgroundGradient} style={containerStyle}>
+        {kav}
+      </GradientBox>
+    );
+  }
+
+  return kav;
+};

package/src/UI/Pages/ComposableScreen/elements/RiveElement.tsx

@@ -57,13 +57,25 @@ type Props = {
 export const RiveElementRenderer = ({ element, ctx }: Props): React.ReactElement => {
   const { theme } = ctx;
   const p = element.props;
+  // rive-react-native doesn't report artboard intrinsic to JS, so a Rive view
+  // with no height/flex/aspectRatio reports its native artboard pixel size as
+  // intrinsic — which fills the screen. Fall back to aspectRatio:1 (square)
+  // so width:100% bounds the box deterministically when the author hasn't
+  // sized it.
+  const hasExplicitSize =
+    p.height != null ||
+    p.flex != null ||
+    p.aspectRatio != null ||
+    p.minHeight != null ||
+    p.maxHeight != null;
   const wrapperStyle = {
     flex: p.flex,
     flexShrink: p.flexShrink,
     flexGrow: p.flexGrow,
+    aspectRatio: p.aspectRatio ?? (hasExplicitSize ? undefined : 1),
     alignSelf: p.alignSelf,
     width: dim(p.width) ?? ("100%" as `${number}%`),
-    height: dim(p.height ?? 200),
+    height: dim(p.height),
     minWidth: p.minWidth,
     maxWidth: p.maxWidth,
     minHeight: p.minHeight,

package/src/UI/Pages/ComposableScreen/elements/ScrollViewElement.tsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { ScrollView } from "react-native";
+import { z } from "zod";
+import { BaseBoxProps, BaseBoxPropsSchema } from "./BaseBoxProps";
+import { GradientBox } from "./GradientBox";
+import { UIElement } from "../types";
+import { RenderContext, dim } from "./shared";
+
+export type ScrollViewContentInset = {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+};
+
+export type ScrollViewElementProps = BaseBoxProps & {
+  horizontal?: boolean;
+  bounces?: boolean;
+  showsVerticalScrollIndicator?: boolean;
+  showsHorizontalScrollIndicator?: boolean;
+  alwaysBounceVertical?: boolean;
+  alwaysBounceHorizontal?: boolean;
+  contentInset?: ScrollViewContentInset;
+  contentContainerPadding?: number;
+  keyboardShouldPersistTaps?: "always" | "never" | "handled";
+};
+
+const ContentInsetSchema = z.object({
+  top: z.number().optional(),
+  right: z.number().optional(),
+  bottom: z.number().optional(),
+  left: z.number().optional(),
+});
+
+export const ScrollViewElementPropsSchema = BaseBoxPropsSchema.extend({
+  horizontal: z.boolean().optional(),
+  bounces: z.boolean().optional(),
+  showsVerticalScrollIndicator: z.boolean().optional(),
+  showsHorizontalScrollIndicator: z.boolean().optional(),
+  alwaysBounceVertical: z.boolean().optional(),
+  alwaysBounceHorizontal: z.boolean().optional(),
+  contentInset: ContentInsetSchema.optional(),
+  contentContainerPadding: z.number().min(0).optional(),
+  keyboardShouldPersistTaps: z.enum(["always", "never", "handled"]).optional(),
+});
+
+type ScrollViewUIElement = Extract<UIElement, { type: "ScrollView" }>;
+
+type Props = {
+  element: ScrollViewUIElement;
+  ctx: RenderContext;
+};
+
+export const ScrollViewElementComponent = ({ element, ctx }: Props): React.ReactElement => {
+  const p = element.props;
+  const hasGradient = !!p.backgroundGradient;
+  const horizontal = p.horizontal === true;
+
+  const containerStyle = {
+    flex: p.flex,
+    flexShrink: p.flexShrink,
+    flexGrow: p.flexGrow,
+    alignSelf: p.alignSelf,
+    width: dim(p.width),
+    height: dim(p.height),
+    minWidth: p.minWidth,
+    maxWidth: p.maxWidth,
+    minHeight: p.minHeight,
+    maxHeight: p.maxHeight,
+    margin: p.margin,
+    marginHorizontal: p.marginHorizontal,
+    marginVertical: p.marginVertical,
+    padding: p.padding,
+    paddingHorizontal: p.paddingHorizontal,
+    paddingVertical: p.paddingVertical,
+    backgroundColor: hasGradient ? undefined : p.backgroundColor,
+    borderWidth: p.borderWidth,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
+    overflow: hasGradient ? ("hidden" as const) : p.overflow,
+    opacity: p.opacity,
+  };
+
+  const contentContainerStyle = {
+    flexGrow: 1,
+    padding: p.contentContainerPadding,
+  };
+
+  const scroll = (
+    <ScrollView
+      horizontal={horizontal}
+      bounces={p.bounces}
+      showsVerticalScrollIndicator={p.showsVerticalScrollIndicator}
+      showsHorizontalScrollIndicator={p.showsHorizontalScrollIndicator}
+      alwaysBounceVertical={p.alwaysBounceVertical}
+      alwaysBounceHorizontal={p.alwaysBounceHorizontal}
+      contentInset={p.contentInset}
+      keyboardShouldPersistTaps={p.keyboardShouldPersistTaps ?? "handled"}
+      style={hasGradient ? { flex: 1 } : containerStyle}
+      contentContainerStyle={contentContainerStyle}
+    >
+      {ctx.renderChildren(element.children, horizontal ? "XStack" : "YStack")}
+    </ScrollView>
+  );
+
+  if (hasGradient) {
+    return (
+      <GradientBox gradient={p.backgroundGradient} style={containerStyle}>
+        {scroll}
+      </GradientBox>
+    );
+  }
+
+  return scroll;
+};

package/src/UI/Pages/ComposableScreen/elements/collectDefaults.ts

@@ -67,6 +67,8 @@ export function collectElementDefaults(
       case "XStack":
       case "ZStack":
       case "SafeAreaView":
+      case "ScrollView":
+      case "KeyboardAvoidingView":
         el.children.forEach(visit);
         break;
     }

package/src/UI/Pages/ComposableScreen/elements/renderElement.tsx

@@ -17,6 +17,8 @@ import { DatePickerElementComponent } from "./DatePickerElement";
 import { CarouselElementComponent } from "./CarouselElement";
 import { ZStackElementComponent } from "./ZStackElement";
 import { SafeAreaViewElementComponent } from "./SafeAreaViewElement";
+import { ScrollViewElementComponent } from "./ScrollViewElement";
+import { KeyboardAvoidingViewElementComponent } from "./KeyboardAvoidingViewElement";
 
 export const renderElement = (
   element: UIElement,
@@ -90,5 +92,13 @@ export const renderElement = (
     return <SafeAreaViewElementComponent key={element.id} element={element} ctx={ctx} />;
   }
 
+  if (element.type === "ScrollView") {
+    return <ScrollViewElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
+  if (element.type === "KeyboardAvoidingView") {
+    return <KeyboardAvoidingViewElementComponent key={element.id} element={element} ctx={ctx} />;
+  }
+
   return null;
 };

package/src/UI/Pages/ComposableScreen/elements/shared.ts

@@ -3,6 +3,7 @@ import { CustomActions } from "@rocapine/react-native-onboarding";
 import { UIElement } from "../types";
 import { Theme } from "../../../Theme/types";
 import { ComposableVariableEntry } from "../../../Provider/OnboardingProgressProvider";
+import type { BaseBoxProps } from "./BaseBoxProps";
 
 export type RenderContext = {
   theme: Theme;
@@ -20,6 +21,25 @@ export const interpolate = (template: string, variables: Record<string, Composab
 export const dim = (v: number | string | undefined): import("react-native").DimensionValue | undefined =>
   v as import("react-native").DimensionValue | undefined;
 
+// Build a RN shadow style with sensible iOS defaults. iOS defaults
+// `shadowOpacity` to 0 and `shadowRadius` to 0, so an author setting only
+// `shadowColor` would see no shadow. Fill in 1 / 4 when those are unset.
+// Android shadows go through `elevation` independently.
+export type ShadowStyleInput = Pick<
+  BaseBoxProps,
+  "shadowColor" | "shadowOffset" | "shadowOpacity" | "shadowRadius" | "elevation"
+>;
+export const buildShadowStyle = (p: ShadowStyleInput) => {
+  const hasShadow = p.shadowColor != null;
+  return {
+    shadowColor: p.shadowColor,
+    shadowOffset: p.shadowOffset,
+    shadowOpacity: p.shadowOpacity ?? (hasShadow ? 1 : undefined),
+    shadowRadius: p.shadowRadius ?? (hasShadow ? 4 : undefined),
+    elevation: p.elevation,
+  };
+};
+
 // Resolve element fontFamily against theme `typography.defaultFontFamily`.
 // Returns the theme default when element omits fontFamily or sets it to "inherit".
 export const resolveInheritedFontFamily = (