@storybook/react-native 10.2.3 → 10.3.0-canary-20260217005118

package/dist/index.js

@@ -999,7 +999,10 @@ var layoutStyles = {
   centered: { alignItems: "center", justifyContent: "center" },
   fullscreen: {}
 };
-var StoryView = ({ useWrapper = true }) => {
+var StoryView = ({
+  useWrapper = true,
+  storyBackgroundColor
+}) => {
   const context = useStoryContext();
   const id = context?.id;
   const theme3 = (0, import_react_native_theming.useTheme)();
@@ -1008,11 +1011,11 @@ var StoryView = ({ useWrapper = true }) => {
     const layoutStyle = layout ? layoutStyles[layout] : {};
     return {
       flex: 1,
-      backgroundColor: theme3.background?.content,
+      backgroundColor: storyBackgroundColor || theme3.background?.content,
       overflow: "hidden",
       ...layoutStyle
     };
-  }, [theme3.background?.content, context?.parameters?.layout]);
+  }, [theme3.background?.content, context?.parameters?.layout, storyBackgroundColor]);
   const onError = (0, import_react3.useCallback)(() => {
     console.log(`Error rendering story for ${context?.title} ${context?.name}`);
   }, [context?.title, context?.name]);
@@ -1048,6 +1051,23 @@ var STORYBOOK_STORY_ID_PARAM = "STORYBOOK_STORY_ID";
 
 // src/View.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+function resolveStoryBackgroundColor(story) {
+  const backgroundGlobal = story?.globals?.backgrounds?.value;
+  const bgParams = story?.parameters?.backgrounds;
+  const backgroundName = backgroundGlobal || bgParams?.default;
+  if (!backgroundName) return void 0;
+  if (bgParams?.options?.[backgroundName]?.value) {
+    return bgParams.options[backgroundName].value;
+  }
+  if (bgParams?.values) {
+    const match = bgParams.values.find(
+      (bg) => bg.name === backgroundName
+    );
+    if (match) return match.value;
+  }
+  if (backgroundName.startsWith("#")) return backgroundName;
+  return void 0;
+}
 var View3 = class {
   _storyIndex;
   _setStory = () => {
@@ -1310,6 +1330,7 @@ var View3 = class {
           }
         );
       }
+      const storyBackgroundColor = resolveStoryBackgroundColor(story);
       if (onDeviceUI) {
         if (CustomUIComponent) {
           return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1320,7 +1341,14 @@ var View3 = class {
               setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
               storage,
               theme: appliedTheme,
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper })
+              storyBackgroundColor,
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                StoryView_default,
+                {
+                  useWrapper: storyViewWrapper,
+                  storyBackgroundColor
+                }
+              )
             }
           );
         }
@@ -1332,11 +1360,12 @@ var View3 = class {
             storyHash,
             story,
             setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
-            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper })
+            storyBackgroundColor,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper, storyBackgroundColor })
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, { useWrapper: storyViewWrapper, storyBackgroundColor });
       }
     };
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.2.3",
+  "version": "10.3.0-canary-20260217005118",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -43,9 +43,9 @@
   ],
   "dependencies": {
     "@storybook/react": "^10.2.3",
-    "@storybook/react-native-theming": "^10.2.3",
-    "@storybook/react-native-ui": "^10.2.3",
-    "@storybook/react-native-ui-common": "^10.2.3",
+    "@storybook/react-native-theming": "10.3.0-canary-20260217005118",
+    "@storybook/react-native-ui": "10.3.0-canary-20260217005118",
+    "@storybook/react-native-ui-common": "10.3.0-canary-20260217005118",
     "commander": "^14.0.2",
     "dedent": "^1.7.0",
     "deepmerge": "^4.3.1",