@storybook/react-native 10.4.0-canary-20260429093015 → 10.4.0

package/dist/index.js

@@ -1714,15 +1714,13 @@ var View3 = class {
           }
         );
       } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_safe_area_context.SafeAreaView, { style: { flex: 1 }, children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_native_safe_area_context.SafeAreaProvider, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native4.StatusBar, { hidden: true }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            import_react_native4.View,
+            WithSafeArea,
             {
-              style: { flex: 1 },
-              accessibilityLabel: story?.id,
-              testID: story?.id,
-              accessible: true,
+              id: story?.id ?? "",
+              safeAreaEnabled: !(story?.parameters?.noSafeArea ?? false),
               children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 StoryView_default,
                 {
@@ -1732,11 +1730,32 @@ var View3 = class {
               )
             }
           )
-        ] }) });
+        ] });
       }
     };
   };
 };
+var WithSafeArea = ({
+  children,
+  id,
+  safeAreaEnabled
+}) => {
+  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_react_native4.View,
+    {
+      style: {
+        flex: 1,
+        paddingTop: safeAreaEnabled ? insets.top : 0,
+        paddingBottom: safeAreaEnabled ? insets.bottom : 0
+      },
+      accessibilityLabel: id,
+      testID: id,
+      accessible: true,
+      children
+    }
+  );
+};
 
 // src/prepareStories.ts
 var import_preview_api2 = require("storybook/internal/preview-api");

package/dist/withStorybook.js

@@ -623,7 +623,7 @@ function enhanceMetroConfig(config, options = {}) {
     resolver: {
       ...config.resolver,
       resolveRequest: (context, moduleName, platform) => {
-        if (moduleName === "tty" || moduleName === "os") {
+        if (platform !== "web" && (moduleName === "tty" || moduleName === "os")) {
           return { type: "empty" };
         }
         const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
@@ -684,10 +684,7 @@ function resolveEntryPoint(projectRoot = process.cwd()) {
     const pkgJson = JSON.parse(fs.readFileSync(pkgJsonPath, "utf-8"));
     mainField = pkgJson.main;
     if (mainField === "expo-router/entry") {
-      const expoRouterEntry = resolveFileWithExtensions(
-        path2.resolve(projectRoot, "node_modules", "expo-router", "entry"),
-        ENTRY_EXTENSIONS
-      );
+      const expoRouterEntry = require.resolve("expo-router/entry");
       if (expoRouterEntry) {
         return expoRouterEntry;
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.4.0-canary-20260429093015",
+  "version": "10.4.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -45,10 +45,11 @@
   ],
   "dependencies": {
     "@storybook/mcp": "^0.6.1",
+    "react-native-safe-area-context": "^5",
     "@storybook/react": "^10.3.2",
-    "@storybook/react-native-theming": "10.4.0-canary-20260429093015",
-    "@storybook/react-native-ui": "10.4.0-canary-20260429093015",
-    "@storybook/react-native-ui-common": "10.4.0-canary-20260429093015",
+    "@storybook/react-native-theming": "^10.4.0",
+    "@storybook/react-native-ui": "^10.4.0",
+    "@storybook/react-native-ui-common": "^10.4.0",
     "@tmcp/adapter-valibot": "^0.1.4",
     "@tmcp/transport-http": "^0.8.5",
     "commander": "^14.0.2",
@@ -63,7 +64,7 @@
     "ws": "^8.20.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.4.3",
+    "@types/jest": "^29.5.13",
     "@types/react": "~19.2.14",
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^55.0.13",
@@ -83,7 +84,6 @@
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=2",
-    "react-native-safe-area-context": "*",
     "storybook": ">=10 || ^10"
   },
   "peerDependenciesMeta": {

package/readme.md

@@ -163,13 +163,13 @@ For projects using [Re.Pack](https://re-pack.dev/) (Rspack/Webpack) instead of M
 
 ## Expo router specific setup
 
-```bash
+```sh
 npm create storybook@latest
 ```
 
 choose recommended and then native
 
-```bash
+```sh
 npx expo@latest customize metro.config.js
 ```
 
@@ -226,7 +226,7 @@ import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
-  addons: [],
+  deviceAddons: [],
 };
 
 export default main;
@@ -307,7 +307,7 @@ Currently, the addons available are:
 - [`@storybook/addon-ondevice-notes`](https://storybook.js.org/addons/@storybook/addon-ondevice-notes): Add some Markdown to your stories to help document their usage
 - [`@storybook/addon-ondevice-backgrounds`](https://storybook.js.org/addons/@storybook/addon-ondevice-backgrounds): change the background of storybook to compare the look of your component against different backgrounds
 
-Install each one you want to use and add them to the `main.ts` addons list as follows:
+Install each one you want to use and add them to the `deviceAddons` list in `main.ts` as follows:
 
 ```ts
 // .rnstorybook/main.ts
@@ -315,7 +315,7 @@ import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   // ... rest of config
-  addons: [
+  deviceAddons: [
     '@storybook/addon-ondevice-notes',
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-backgrounds',
@@ -535,7 +535,7 @@ import type { StorybookConfig } from '@storybook/react-native';
 
 const main: StorybookConfig = {
   stories: ['../components/**/*.stories.?(ts|tsx|js|jsx)'],
-  addons: ['@storybook/addon-ondevice-controls'],
+  deviceAddons: ['@storybook/addon-ondevice-controls'],
   features: {
     ondeviceBackgrounds: true,
   },