@storybook/react-native-ui 10.2.3 → 10.2.4-canary-20260216224255

package/dist/index.d.ts

@@ -108,9 +108,10 @@ interface SidebarProps extends API_LoadedRefData {
 declare const Sidebar: React.NamedExoticComponent<SidebarProps>;
 
 declare const FullUI: SBUI;
-declare const Layout: ({ storyHash, story, children, }: {
+declare const Layout: ({ storyHash, story, storyBackgroundColor, children, }: {
     storyHash: API_IndexHash | undefined;
     story?: StoryContext<ReactRenderer, Args>;
+    storyBackgroundColor?: string;
     children: ReactNode | ReactNode[];
 }) => react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -1876,15 +1876,31 @@ var mobileMenuDrawerContentStyle = {
   paddingBottom: 4
 };
 var flex1 = { flex: 1 };
-var FullUI = ({ storage, theme, storyHash, story, children }) => {
+var FullUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_theming15.ThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_safe_area_context3.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_gesture_handler2.GestureHandlerRootView, { style: flex1, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_bottom_sheet4.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native_ui_common7.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native_ui_common7.LayoutProvider, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Layout, { storyHash, story, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      Layout,
+      {
+        storyHash,
+        story,
+        storyBackgroundColor,
+        children
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_portal.PortalHost, { name: "storybook-lite-ui-root" })
   ] }) }) }) }) }) });
 };
 var Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children
 }) => {
   const theme = (0, import_react_native_theming15.useTheme)();
@@ -1930,20 +1946,27 @@ var Layout = ({
     [desktopAddonsPanelOpen, theme.appBorderColor]
   );
   const containerStyle = (0, import_react_native_ui_common7.useStyle)(() => {
+    const backgroundColor = storyBackgroundColor || theme.background.content;
     if (isDesktop) {
       return {
         flex: 1,
         paddingTop: insets.top,
-        backgroundColor: theme.background.content,
+        backgroundColor,
         flexDirection: "row"
       };
     }
     return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-      backgroundColor: theme.background.content
+      backgroundColor
     };
-  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
+  }, [
+    storyBackgroundColor,
+    theme.background.content,
+    insets.top,
+    story?.parameters?.noSafeArea,
+    isDesktop
+  ]);
   const fullScreenButtonStyle = (0, import_react_native_ui_common7.useStyle)(
     () => ({
       position: "absolute",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "10.2.3",
+  "version": "10.2.4-canary-20260216224255",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -36,8 +36,8 @@
     "@gorhom/portal": "^1.0.14",
     "@nozbe/microfuzz": "^1.0.0",
     "@storybook/react": "^10.2.3",
-    "@storybook/react-native-theming": "^10.2.3",
-    "@storybook/react-native-ui-common": "^10.2.3",
+    "@storybook/react-native-theming": "10.2.4-canary-20260216224255",
+    "@storybook/react-native-ui-common": "10.2.4-canary-20260216224255",
     "polished": "^4.3.1"
   },
   "peerDependencies": {

package/src/Layout.tsx

@@ -60,7 +60,14 @@ const mobileMenuDrawerContentStyle = {
 
 const flex1 = { flex: 1 } satisfies ViewStyle;
 
-export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) => {
+export const FullUI: SBUI = ({
+  storage,
+  theme,
+  storyHash,
+  story,
+  storyBackgroundColor,
+  children,
+}) => {
   return (
     <ThemeProvider theme={theme}>
       <SafeAreaProvider>
@@ -68,7 +75,11 @@ export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) =>
           <BottomSheetModalProvider>
             <StorageProvider storage={storage}>
               <LayoutProvider>
-                <Layout storyHash={storyHash} story={story}>
+                <Layout
+                  storyHash={storyHash}
+                  story={story}
+                  storyBackgroundColor={storyBackgroundColor}
+                >
                   {children}
                 </Layout>
                 <PortalHost name="storybook-lite-ui-root" />
@@ -84,10 +95,12 @@ export const FullUI: SBUI = ({ storage, theme, storyHash, story, children }) =>
 export const Layout = ({
   storyHash,
   story,
+  storyBackgroundColor,
   children,
 }: {
   storyHash: API_IndexHash | undefined;
   story?: StoryContext<ReactRenderer, Args>;
+  storyBackgroundColor?: string;
   children: ReactNode | ReactNode[];
 }) => {
   const theme = useTheme();
@@ -141,11 +154,13 @@ export const Layout = ({
   );
 
   const containerStyle = useStyle(() => {
+    const backgroundColor = storyBackgroundColor || theme.background.content;
+
     if (isDesktop) {
       return {
         flex: 1,
         paddingTop: insets.top,
-        backgroundColor: theme.background.content,
+        backgroundColor,
         flexDirection: 'row',
       };
     }
@@ -153,9 +168,15 @@ export const Layout = ({
     return {
       flex: 1,
       paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
-      backgroundColor: theme.background.content,
+      backgroundColor,
     };
-  }, [theme.background.content, insets.top, story?.parameters?.noSafeArea, isDesktop]);
+  }, [
+    storyBackgroundColor,
+    theme.background.content,
+    insets.top,
+    story?.parameters?.noSafeArea,
+    isDesktop,
+  ]);
 
   const fullScreenButtonStyle = useStyle(
     () => ({