[pull] next from storybookjs:next

examples/expo-example/.rnstorybook/index.tsx

@@ -29,6 +29,14 @@ const StorybookUIRoot = view.getStorybookUI({
       } ,
     },
   }, */
+  // CustomUIComponent: ({ children, setStory, story, storyHash }) => {
+  //   return (
+  //     <SafeAreaView style={{ flex: 1 }}>
+  //       <Text>Custom UI</Text>
+  //       {children}
+  //     </SafeAreaView>
+  //   );
+  // },
 });
 
 const StorybookUI = () => {

examples/expo-example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expo-example",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "private": true,
   "main": "index.js",
   "scripts": {
@@ -29,17 +29,17 @@
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-community/datetimepicker": "8.3.0",
     "@react-native-community/slider": "4.5.6",
-    "@storybook/addon-links": "9.0.0-beta.9",
-    "@storybook/addon-ondevice-actions": "^9.0.0-beta.9",
-    "@storybook/addon-ondevice-backgrounds": "^9.0.0-beta.9",
-    "@storybook/addon-ondevice-controls": "^9.0.0-beta.9",
-    "@storybook/addon-ondevice-notes": "^9.0.0-beta.9",
+    "@storybook/addon-links": "9.0.0-beta.10",
+    "@storybook/addon-ondevice-actions": "^9.0.0-beta.10",
+    "@storybook/addon-ondevice-backgrounds": "^9.0.0-beta.10",
+    "@storybook/addon-ondevice-controls": "^9.0.0-beta.10",
+    "@storybook/addon-ondevice-notes": "^9.0.0-beta.10",
     "@storybook/addon-react-native-server": "0.0.6",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-beta.9",
-    "@storybook/react-native": "^9.0.0-beta.9",
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
-    "@storybook/react-native-web-vite": "9.0.0-beta.9",
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native": "^9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
+    "@storybook/react-native-web-vite": "9.0.0-beta.10",
     "expo": "~53.0.5",
     "react": "19.0.0",
     "react-dom": "19.0.0",
@@ -49,7 +49,7 @@
     "react-native-safe-area-context": "5.4.0",
     "react-native-svg": "15.11.2",
     "react-native-web": "^0.20.0",
-    "storybook": "9.0.0-beta.9",
+    "storybook": "9.0.0-beta.10",
     "storybook-addon-deep-controls": "^0.9.2",
     "ws": "^8.18.0"
   },

lerna.json

@@ -1,5 +1,5 @@
 {
   "npmClient": "yarn",
   "registry": "https://registry.npmjs.org",
-  "version": "9.0.0-beta.9"
+  "version": "9.0.0-beta.10"
 }

packages/ondevice-actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -32,15 +32,15 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.0.0-beta.9"
+    "@storybook/react-native-theming": "^9.0.0-beta.10"
   },
   "devDependencies": {
     "typescript": "~5.8.3"
   },
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-controls",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "Display storybook controls on your device.",
   "keywords": [
     "addon",
@@ -30,8 +30,8 @@
     "copyimages": "cross-env-shell cp -r src/components/color-picker/resources dist/components/color-picker/resources"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
-    "@storybook/react-native-ui": "^9.0.0-beta.9",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
+    "@storybook/react-native-ui": "^9.0.0-beta.10",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
     "react-native-modal-datetime-picker": "^18.0.0",
@@ -47,7 +47,7 @@
     "@react-native-community/slider": "*",
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

packages/ondevice-notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -29,7 +29,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
     "react-native-markdown-display": "^7.0.2"
   },
   "devDependencies": {
@@ -38,7 +38,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "publishConfig": {
     "access": "public"

packages/react-native-theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-theming",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "A wrapper library around emotion 11 to provide theming support for react-native storybook",
   "keywords": [
     "react",

packages/react-native-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-ui",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "ui components for react native storybook",
   "keywords": [
     "react",
@@ -58,8 +58,8 @@
     "typescript": "~5.8.3"
   },
   "dependencies": {
-    "@storybook/react": "9.0.0-beta.9",
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
     "fuse.js": "^7.0.0",
     "memoizerific": "^1.11.3",
     "polished": "^4.3.1",
@@ -73,7 +73,7 @@
     "react-native-reanimated": ">=3",
     "react-native-safe-area-context": "*",
     "react-native-svg": ">=14",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "engines": {
     "node": ">=18.0.0"

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-beta.10",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,9 +48,9 @@
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-beta.9",
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
-    "@storybook/react-native-ui": "^9.0.0-beta.9",
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.10",
+    "@storybook/react-native-ui": "^9.0.0-beta.10",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -71,7 +71,7 @@
     "react": "19.0.0",
     "react-native": "0.79.2",
     "react-test-renderer": "^19.1.0",
-    "storybook": "9.0.0-beta.9",
+    "storybook": "9.0.0-beta.10",
     "tsup": "^7.2.0",
     "typescript": "~5.8.3"
   },
@@ -81,7 +81,7 @@
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-beta.10"
   },
   "engines": {
     "node": ">=8.0.0"

packages/react-native/src/View.tsx

@@ -4,7 +4,7 @@ import { SET_CURRENT_STORY, CHANNEL_CREATED } from 'storybook/internal/core-even
 import { addons as managerAddons } from 'storybook/internal/manager-api';
 import { PreviewWithSelection, addons as previewAddons } from 'storybook/internal/preview-api';
 import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from 'storybook/internal/types';
-import { StoryContext, toId } from '@storybook/csf';
+import { Args, StoryContext, toId } from '@storybook/csf';
 import type { ReactRenderer } from '@storybook/react';
 import { Theme, ThemeProvider, darkTheme, theme } from '@storybook/react-native-theming';
 import {
@@ -15,7 +15,7 @@ import {
 } from '@storybook/react-native-ui';
 import dedent from 'dedent';
 import deepmerge from 'deepmerge';
-import { useEffect, useMemo, useReducer, useState } from 'react';
+import { ReactElement, useEffect, useMemo, useReducer, useState } from 'react';
 import {
   ActivityIndicator,
   Linking,
@@ -73,6 +73,12 @@ export type Params = {
   shouldPersistSelection?: boolean;
   theme: ThemePartial;
   storage?: Storage;
+  CustomUIComponent?: (props: {
+    story: StoryContext<ReactRenderer, Args>;
+    storyHash: API_IndexHash;
+    setStory: (storyId: string) => void;
+    children: ReactElement;
+  }) => ReactElement;
 };
 
 export class View {
@@ -174,6 +180,7 @@ export class View {
       onDeviceUI = true,
       enableWebsockets = false,
       storage,
+      CustomUIComponent,
     } = params;
 
     this._storage = storage;
@@ -376,6 +383,18 @@ export class View {
             </SafeAreaProvider>
           </ThemeProvider>
         );
+      } else if (CustomUIComponent) {
+        return (
+          <CustomUIComponent
+            story={story}
+            storyHash={storyHash}
+            setStory={(newStoryId) =>
+              self._channel.emit(SET_CURRENT_STORY, { storyId: newStoryId })
+            }
+          >
+            <StoryView />
+          </CustomUIComponent>
+        );
       } else {
         return <StoryView />;
       }