From b98cfa8a2be0a192317654067178d2c918f69106 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Mon, 15 Dec 2025 00:02:04 +0000
Subject: [PATCH 01/20] feat: csf factories

---
 examples/expo-example/.rnstorybook/main.ts    |  8 +++----
 .../expo-example/.rnstorybook/preview.tsx     | 11 +++++----
 .../ControlExample/ControlExample.stories.tsx | 10 ++++----
 packages/react-native/package.json            |  3 ++-
 packages/react-native/src/index.ts            | 24 +++++++------------
 packages/react-native/src/node/index.ts       |  5 ++++
 packages/react-native/src/polyfill.ts         |  2 +-
 packages/react-native/src/types/config.ts     | 10 ++++++++
 packages/react-native/tsup.config.ts          | 15 ++++++++++--
 9 files changed, 53 insertions(+), 35 deletions(-)
 create mode 100644 packages/react-native/src/node/index.ts
 create mode 100644 packages/react-native/src/types/config.ts

diff --git a/examples/expo-example/.rnstorybook/main.ts b/examples/expo-example/.rnstorybook/main.ts
index 0ee12e40c1..00213cec45 100644
--- a/examples/expo-example/.rnstorybook/main.ts
+++ b/examples/expo-example/.rnstorybook/main.ts
@@ -1,6 +1,6 @@
-import type { StorybookConfig } from '@storybook/react-native';
+import { defineMain } from '@storybook/react-native/node';
 
-const main: StorybookConfig = {
+export default defineMain({
   stories: [
     '../components/**/*.stories.?(ts|tsx|js|jsx)',
     '../other_components/**/*.stories.?(ts|tsx|js|jsx)',
@@ -23,6 +23,4 @@ const main: StorybookConfig = {
   },
 
   framework: '@storybook/react-native',
-};
-
-export default main;
+});
diff --git a/examples/expo-example/.rnstorybook/preview.tsx b/examples/expo-example/.rnstorybook/preview.tsx
index 2b47d26205..565a8f5d97 100644
--- a/examples/expo-example/.rnstorybook/preview.tsx
+++ b/examples/expo-example/.rnstorybook/preview.tsx
@@ -1,9 +1,11 @@
 import { Appearance } from 'react-native';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
-import type { Preview } from '@storybook/react-native';
+import { definePreview } from '@storybook/react-native';
 
-const preview: Preview = {
+export default definePreview({
+  addons: [],
   decorators: [withBackgrounds],
+
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
@@ -26,6 +28,7 @@ const preview: Preview = {
     storybookUIVisibility: 'visible', // visible, hidden
     backgrounds: {
       default: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain',
+      // @ts-expect-error - backgrounds not compatible yet
       values: [
         { name: 'plain', value: 'white' },
         { name: 'dark', value: '#333' },
@@ -33,6 +36,4 @@ const preview: Preview = {
       ],
     },
   },
-};
-
-export default preview;
+});
diff --git a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
index 65070ba30b..f42259743c 100644
--- a/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
+++ b/examples/expo-example/components/ControlExamples/ControlExample/ControlExample.stories.tsx
@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react-native';
 import { ControlExample } from './ControlExample';
+import preview from '../../../.rnstorybook/preview';
 
-const meta = {
+const meta = preview.meta({
   component: ControlExample,
   args: {
     name: 'Storyteller',
@@ -74,10 +74,8 @@ const meta = {
       control: { type: 'nonexistent_type' },
     },
   },
-} satisfies Meta<typeof ControlExample>;
+});
 
 export default meta;
 
-type ControlExampleStory = StoryObj<typeof meta>;
-
-export const Example: ControlExampleStory = {};
+export const Example = meta.story({});
diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index 360fb53ca0..7d2ce252d0 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -27,7 +27,8 @@
     "./preview": "./dist/preview.js",
     "./scripts/generate": "./scripts/generate.js",
     "./preset": "./preset.js",
-    "./stub": "./dist/stub.js"
+    "./stub": "./dist/stub.js",
+    "./node": "./dist/node/index.js"
   },
   "files": [
     "bin/**/*",
diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts
index 060405276e..c2355e17c2 100644
--- a/packages/react-native/src/index.ts
+++ b/packages/react-native/src/index.ts
@@ -1,26 +1,20 @@
-import type { StorybookConfig as StorybookConfigBase } from 'storybook/internal/types';
-import type { ReactNativeOptions } from './Start';
 export { darkTheme, theme, type Theme } from '@storybook/react-native-theming';
 
-export { start, prepareStories, getProjectAnnotations, updateView } from './Start';
-export type { View, Storage, InitialSelection, ThemePartial, Params } from './View';
+export { getProjectAnnotations, prepareStories, start, updateView } from './Start';
+export type { InitialSelection, Params, Storage, ThemePartial, View } from './View';
 
-export interface StorybookConfig {
-  stories: StorybookConfigBase['stories'];
-  addons: Array<string | { name: string; options?: Record<string, any> }>;
-  // TODO move this to params
-  reactNative?: ReactNativeOptions;
-  framework?: '@storybook/react-native';
-}
+export type { StorybookConfig } from './types/config';
 
 export type {
-  Meta,
-  StoryFn,
-  StoryObj,
   Args,
   ArgTypes,
-  Preview,
   Decorator,
   Loader,
+  Meta,
   Parameters,
+  Preview,
+  StoryFn,
+  StoryObj,
 } from '@storybook/react';
+
+export { __definePreview as definePreview } from '@storybook/react';
diff --git a/packages/react-native/src/node/index.ts b/packages/react-native/src/node/index.ts
new file mode 100644
index 0000000000..5b3a88448e
--- /dev/null
+++ b/packages/react-native/src/node/index.ts
@@ -0,0 +1,5 @@
+import type { StorybookConfig } from '../types/config';
+
+export function defineMain(config: StorybookConfig) {
+  return config;
+}
diff --git a/packages/react-native/src/polyfill.ts b/packages/react-native/src/polyfill.ts
index 3ff2b34c8f..c8009b09db 100644
--- a/packages/react-native/src/polyfill.ts
+++ b/packages/react-native/src/polyfill.ts
@@ -1,4 +1,4 @@
-import { Platform } from 'react-native-web';
+import { Platform } from 'react-native';
 
 if (Platform.OS !== 'web') {
   // We polyfill URLSearchParams for React Native since URLSearchParams.get is not implemented yet is used in storybook
diff --git a/packages/react-native/src/types/config.ts b/packages/react-native/src/types/config.ts
new file mode 100644
index 0000000000..39e5a12ce6
--- /dev/null
+++ b/packages/react-native/src/types/config.ts
@@ -0,0 +1,10 @@
+import type { Preset, StorybookConfig as StorybookConfigBase } from 'storybook/internal/types';
+import type { ReactNativeOptions } from '../Start';
+
+export interface StorybookConfig {
+  stories: StorybookConfigBase['stories'];
+  addons: Preset[];
+  // TODO remove this
+  reactNative?: ReactNativeOptions;
+  framework?: '@storybook/react-native';
+}
diff --git a/packages/react-native/tsup.config.ts b/packages/react-native/tsup.config.ts
index 7905abae9f..1dff66c6b0 100644
--- a/packages/react-native/tsup.config.ts
+++ b/packages/react-native/tsup.config.ts
@@ -2,12 +2,23 @@ import { defineConfig } from 'tsup';
 
 export default defineConfig((options) => {
   return {
-    entry: ['src/index.ts', 'src/preview.ts', 'src/metro/withStorybook.ts', 'src/stub.tsx'],
+    entry: [
+      'src/index.ts',
+      'src/preview.ts',
+      'src/metro/withStorybook.ts',
+      'src/stub.tsx',
+      'src/node/index.ts',
+    ],
     // minify: !options.watch,
     clean: !options.watch,
     dts: !options.watch
       ? {
-          entry: ['src/index.ts', 'src/preview.ts', 'src/metro/withStorybook.ts'],
+          entry: [
+            'src/index.ts',
+            'src/preview.ts',
+            'src/metro/withStorybook.ts',
+            'src/node/index.ts',
+          ],
           resolve: true,
         }
       : false,

From 9387241b31177d5aa5b1fb96fc576281e1f9b9ac Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 14:50:23 +0000
Subject: [PATCH 02/20] remove comment

---
 packages/react-native/src/types/config.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-native/src/types/config.ts b/packages/react-native/src/types/config.ts
index b4617831af..f4633f7913 100644
--- a/packages/react-native/src/types/config.ts
+++ b/packages/react-native/src/types/config.ts
@@ -9,7 +9,6 @@ export interface Features {
 export interface StorybookConfig {
   stories: StorybookConfigBase['stories'];
   addons: Preset[];
-  // TODO move this to params
   reactNative?: ReactNativeOptions;
   features?: Features;
   framework?: '@storybook/react-native';

From a2177ced714268467d127c681410ca5eced7fef3 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 15:15:15 +0000
Subject: [PATCH 03/20] feat: add factories examples and tests

---
 .../Actions.factories.stories.tsx             |  33 ++++++
 .../ActionExample/Actions.factories.test.tsx  |  18 +++
 .../BackgroundCsf.factories.stories.tsx       |  32 +++++
 .../BackgroundCsf.factories.test.tsx          |   9 ++
 .../Boolean/Boolean.factories.stories.tsx     |  16 +++
 .../Boolean/Boolean.factories.test.tsx        |  14 +++
 .../Color/Color.factories.stories.tsx         |  20 ++++
 .../Color/Color.factories.test.tsx            |   8 ++
 .../Date/Date.factories.stories.tsx           |  14 +++
 .../Date/Date.factories.test.tsx              |  10 ++
 .../Number/Number.factories.stories.tsx       |  30 +++++
 .../Number/Number.factories.test.tsx          |  14 +++
 .../Object/Object.factories.stories.tsx       |  17 +++
 .../Object/Object.factories.test.tsx          |  10 ++
 .../Radio/Radio.factories.stories.tsx         |  23 ++++
 .../Radio/Radio.factories.test.tsx            |   8 ++
 .../SelectWithNumber.factories.stories.tsx    |  14 +++
 .../Select/Select.factories.stories.tsx       |  75 ++++++++++++
 .../Select/Select.factories.test.tsx          |  21 ++++
 .../Text/Text.factories.stories.tsx           |  11 ++
 .../Text/Text.factories.test.tsx              |   8 ++
 .../WebCompatibility.factories.stories.tsx    |  75 ++++++++++++
 .../DeepControls.factories.stories.tsx        |  67 +++++++++++
 .../HiddenControls.factories.stories.tsx      |  34 ++++++
 .../TextInput.factories.stories.tsx           |  17 +++
 .../InputExample/TextInput.factories.test.tsx |   8 ++
 .../InteractionExample.factories.stories.tsx  | 109 ++++++++++++++++++
 .../LoginForm/LoginForm.factories.stories.tsx |  53 +++++++++
 .../TextInput/TextInput.factories.stories.tsx |  76 ++++++++++++
 .../NotesExample.factories.stories.tsx        |  96 +++++++++++++++
 .../StoryName/StoryName.factories.stories.tsx |  35 ++++++
 31 files changed, 975 insertions(+)
 create mode 100644 examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ActionExample/Actions.factories.test.tsx
 create mode 100644 examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.stories.tsx
 create mode 100644 examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Color/Color.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Color/Color.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Date/Date.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Date/Date.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Number/Number.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Number/Number.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Object/Object.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Object/Object.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Radio/Radio.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Radio/Radio.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Select/Select.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Select/Select.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Text/Text.factories.stories.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/Text/Text.factories.test.tsx
 create mode 100644 examples/expo-example/components/ControlExamples/WebCompatibility/WebCompatibility.factories.stories.tsx
 create mode 100644 examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
 create mode 100644 examples/expo-example/components/HiddenControls/HiddenControls.factories.stories.tsx
 create mode 100644 examples/expo-example/components/InputExample/TextInput.factories.stories.tsx
 create mode 100644 examples/expo-example/components/InputExample/TextInput.factories.test.tsx
 create mode 100644 examples/expo-example/components/InteractionExample/InteractionExample.factories.stories.tsx
 create mode 100644 examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.factories.stories.tsx
 create mode 100644 examples/expo-example/components/LoginDocsExample/TextInput/TextInput.factories.stories.tsx
 create mode 100644 examples/expo-example/components/NotesExample/NotesExample.factories.stories.tsx
 create mode 100644 examples/expo-example/components/StoryName/StoryName.factories.stories.tsx

diff --git a/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx b/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
new file mode 100644
index 0000000000..c6a0e8b769
--- /dev/null
+++ b/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
@@ -0,0 +1,33 @@
+import { ActionButton } from './Actions';
+import { action } from 'storybook/actions';
+// import { fn } from 'storybook/test';
+import preview from '../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: ActionButton,
+  parameters: {
+    notes: `
+# Button
+
+This is a button component.
+You use it like this:
+
+\`\`\`tsx
+<Button
+      text="Press me!"
+      onPress={() => console.log('pressed')}
+/>
+\`\`\`
+`,
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    text: 'Press me!',
+    onPress: action('onPress'),
+    // onPress: fn(),
+  },
+});
diff --git a/examples/expo-example/components/ActionExample/Actions.factories.test.tsx b/examples/expo-example/components/ActionExample/Actions.factories.test.tsx
new file mode 100644
index 0000000000..edfdcb4144
--- /dev/null
+++ b/examples/expo-example/components/ActionExample/Actions.factories.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen, userEvent } from '@testing-library/react-native';
+import { Basic } from './Actions.factories.stories';
+
+test('action story renders and onpress works', async () => {
+  jest.useFakeTimers();
+
+  const onPress = jest.fn();
+
+  await render(<Basic.Component onPress={onPress} />);
+
+  const user = userEvent.setup({});
+
+  const actionButton = screen.getByText('Press me!');
+
+  await user.press(actionButton);
+
+  expect(onPress).toHaveBeenCalled();
+});
diff --git a/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.stories.tsx b/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.stories.tsx
new file mode 100644
index 0000000000..9a536ea816
--- /dev/null
+++ b/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.stories.tsx
@@ -0,0 +1,32 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, StyleSheet } from 'react-native';
+
+const Background = () => (
+  <Text style={styles.text}>Change background color via Addons -&gt; Background</Text>
+);
+
+const styles = StyleSheet.create({
+  text: { color: 'black' },
+});
+
+const meta = preview.meta({
+  component: Background,
+  parameters: {
+    backgrounds: {
+      options: {
+        warm: { name: 'Warm', value: 'hotpink' },
+        cool: { name: 'Cool', value: 'deepskyblue' },
+        white: { name: 'White', value: 'white' },
+        black: { name: 'Black', value: 'black' },
+      },
+    },
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  globals: {
+    backgrounds: { value: 'warm' },
+  },
+});
diff --git a/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.test.tsx b/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.test.tsx
new file mode 100644
index 0000000000..91703d6d68
--- /dev/null
+++ b/examples/expo-example/components/BackgroundExample/BackgroundCsf.factories.test.tsx
@@ -0,0 +1,9 @@
+import { Basic } from './BackgroundCsf.factories.stories';
+
+test('Background colour defaults to hotpink', () => {
+  const backgroundName = Basic.composed.globals?.backgrounds?.value;
+  const backgroundOptions = Basic.composed.parameters?.backgrounds?.options;
+
+  expect(backgroundName).toBe('warm');
+  expect(backgroundOptions?.[backgroundName]?.value).toBe('hotpink');
+});
diff --git a/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.stories.tsx
new file mode 100644
index 0000000000..a0201df012
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.stories.tsx
@@ -0,0 +1,16 @@
+import { Switch } from './Boolean';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: Switch,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    on: false,
+  },
+});
+
+export const On = meta.story({ args: { on: true } });
diff --git a/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.test.tsx b/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.test.tsx
new file mode 100644
index 0000000000..8a2cd980a4
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Boolean/Boolean.factories.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic, On } from './Boolean.factories.stories';
+
+test('boolean story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByText('off');
+});
+
+test('boolean story renders on', async () => {
+  await render(<On.Component />);
+
+  screen.getByText('on');
+});
diff --git a/examples/expo-example/components/ControlExamples/Color/Color.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Color/Color.factories.stories.tsx
new file mode 100644
index 0000000000..e10ebbfb68
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Color/Color.factories.stories.tsx
@@ -0,0 +1,20 @@
+import { Color } from './Color';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  parameters: { notes: '- test' },
+  argTypes: {
+    color: {
+      control: { type: 'color' },
+    },
+  },
+  component: Color,
+});
+
+export default meta;
+
+export const ColorExample = meta.story({
+  args: {
+    color: '#a819b9',
+  },
+});
diff --git a/examples/expo-example/components/ControlExamples/Color/Color.factories.test.tsx b/examples/expo-example/components/ControlExamples/Color/Color.factories.test.tsx
new file mode 100644
index 0000000000..4c41f4c87d
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Color/Color.factories.test.tsx
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react-native';
+import { ColorExample } from './Color.factories.stories';
+
+test('color story renders', async () => {
+  await render(<ColorExample.Component />);
+
+  expect(screen.getByTestId('color-story-container')).toHaveStyle({ backgroundColor: '#a819b9' });
+});
diff --git a/examples/expo-example/components/ControlExamples/Date/Date.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Date/Date.factories.stories.tsx
new file mode 100644
index 0000000000..c3b019cad3
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Date/Date.factories.stories.tsx
@@ -0,0 +1,14 @@
+import { DateString } from './Date';
+import preview from '../../../.rnstorybook/preview';
+
+const date = new Date(1983, 1, 25);
+
+const meta = preview.meta({
+  component: DateString,
+  args: { date: date },
+  argTypes: { date: { control: { type: 'date' } } },
+});
+
+export default meta;
+
+export const Basic = meta.story({});
diff --git a/examples/expo-example/components/ControlExamples/Date/Date.factories.test.tsx b/examples/expo-example/components/ControlExamples/Date/Date.factories.test.tsx
new file mode 100644
index 0000000000..a86abf22dc
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Date/Date.factories.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic } from './Date.factories.stories';
+
+test('date story renders', async () => {
+  await render(<Basic.Component />);
+
+  const date = new Date(1983, 1, 25);
+
+  screen.getByText(date.toString());
+});
diff --git a/examples/expo-example/components/ControlExamples/Number/Number.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Number/Number.factories.stories.tsx
new file mode 100644
index 0000000000..21a64105fd
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Number/Number.factories.stories.tsx
@@ -0,0 +1,30 @@
+import { Multiply } from './Number';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: Multiply,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    first: 5,
+    second: 3,
+  },
+});
+
+export const Range = meta.story({
+  args: {
+    first: 6,
+    second: 7,
+  },
+  argTypes: {
+    first: {
+      step: 3,
+      min: 1,
+      max: 42,
+      range: true,
+    },
+  },
+});
diff --git a/examples/expo-example/components/ControlExamples/Number/Number.factories.test.tsx b/examples/expo-example/components/ControlExamples/Number/Number.factories.test.tsx
new file mode 100644
index 0000000000..bd0f0778da
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Number/Number.factories.test.tsx
@@ -0,0 +1,14 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic, Range } from './Number.factories.stories';
+
+test('basic story renders', async () => {
+  await render(<Basic.Component />);
+
+  await screen.findByText(/5 x 3 = 15/);
+});
+
+test('range story renders', async () => {
+  await render(<Range.Component />);
+
+  await screen.findByText(/6 x 7 = 42/);
+});
diff --git a/examples/expo-example/components/ControlExamples/Object/Object.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Object/Object.factories.stories.tsx
new file mode 100644
index 0000000000..c28edfc3dc
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Object/Object.factories.stories.tsx
@@ -0,0 +1,17 @@
+import { Movie } from './Object';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: Movie,
+  args: {
+    filmInfo: {
+      releaseYear: 1982,
+      title: 'Blade Runner',
+      genre: 'Sci Fi',
+    },
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({});
diff --git a/examples/expo-example/components/ControlExamples/Object/Object.factories.test.tsx b/examples/expo-example/components/ControlExamples/Object/Object.factories.test.tsx
new file mode 100644
index 0000000000..fed88670cf
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Object/Object.factories.test.tsx
@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic } from './Object.factories.stories';
+
+test('object story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByText('title: Blade Runner');
+  screen.getByText('genre: Sci Fi');
+  screen.getByText('release year: 1982');
+});
diff --git a/examples/expo-example/components/ControlExamples/Radio/Radio.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Radio/Radio.factories.stories.tsx
new file mode 100644
index 0000000000..4f0e3fbeac
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Radio/Radio.factories.stories.tsx
@@ -0,0 +1,23 @@
+import { Radio } from './Radio';
+import preview from '../../../.rnstorybook/preview';
+
+const radio_stations = ['104.8MHz', '909 kHz', '90FM'];
+
+const meta = preview.meta({
+  component: Radio,
+
+  argTypes: {
+    selection: {
+      options: radio_stations,
+      control: { type: 'radio' },
+    },
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    selection: radio_stations[0],
+  },
+});
diff --git a/examples/expo-example/components/ControlExamples/Radio/Radio.factories.test.tsx b/examples/expo-example/components/ControlExamples/Radio/Radio.factories.test.tsx
new file mode 100644
index 0000000000..3b520fa4b1
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Radio/Radio.factories.test.tsx
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic } from './Radio.factories.stories';
+
+test('radio story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByText('104.8MHz');
+});
diff --git a/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.factories.stories.tsx
new file mode 100644
index 0000000000..f29395a352
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Reproductions/SelectWithNumber.factories.stories.tsx
@@ -0,0 +1,14 @@
+import { MyButton } from './SelectWithNumber';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: MyButton,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    number: undefined,
+  },
+});
diff --git a/examples/expo-example/components/ControlExamples/Select/Select.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Select/Select.factories.stories.tsx
new file mode 100644
index 0000000000..2ac0634144
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Select/Select.factories.stories.tsx
@@ -0,0 +1,75 @@
+import { SelectExample } from './Select';
+import preview from '../../../.rnstorybook/preview';
+
+const arrows = {
+  ArrowUp: '\u2B06',
+  ArrowDown: '\u2B07',
+  ArrowLeft: '\u2B05\uFE0F',
+  ArrowRight: '\u27A1\uFE0F',
+};
+
+const meta = preview.meta({
+  component: SelectExample,
+  argTypes: {
+    arrow: {
+      options: Object.values(arrows),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  parameters: {
+    notes: 'Select from mulitple options!',
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    arrow: arrows.ArrowLeft,
+  },
+});
+
+export const WithLabels = meta.story({
+  args: {
+    arrow: arrows.ArrowUp,
+  },
+
+  argTypes: {
+    arrow: {
+      options: Object.values(arrows),
+      control: {
+        type: 'select',
+        labels: {
+          [arrows.ArrowUp]: 'Up',
+          [arrows.ArrowDown]: 'Down',
+          [arrows.ArrowLeft]: 'Left',
+          [arrows.ArrowRight]: 'Right',
+        },
+      },
+    },
+  },
+});
+
+export const WithMapping = meta.story({
+  args: {
+    arrow: 'ArrowRight',
+  },
+
+  argTypes: {
+    arrow: {
+      options: Object.keys(arrows),
+      mapping: arrows,
+      control: {
+        type: 'select',
+        labels: {
+          ArrowUp: 'Up',
+          ArrowDown: 'Down',
+          ArrowLeft: 'Left',
+          ArrowRight: 'Right',
+        },
+      },
+    },
+  },
+});
diff --git a/examples/expo-example/components/ControlExamples/Select/Select.factories.test.tsx b/examples/expo-example/components/ControlExamples/Select/Select.factories.test.tsx
new file mode 100644
index 0000000000..aa5c8aef62
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Select/Select.factories.test.tsx
@@ -0,0 +1,21 @@
+import { screen, render } from '@testing-library/react-native';
+import { Basic, WithLabels, WithMapping } from './Select.factories.stories';
+
+test('select story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByText('Selected: ⬅️');
+});
+
+test('select with labels story renders', async () => {
+  await render(<WithLabels.Component />);
+
+  screen.getByText('Selected: ⬆');
+});
+
+// TODO: Fix this test
+test.skip('select with mapping story renders', async () => {
+  await render(<WithMapping.Component />);
+
+  await screen.findByText('Selected: ➡️');
+});
diff --git a/examples/expo-example/components/ControlExamples/Text/Text.factories.stories.tsx b/examples/expo-example/components/ControlExamples/Text/Text.factories.stories.tsx
new file mode 100644
index 0000000000..e82ca3c625
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Text/Text.factories.stories.tsx
@@ -0,0 +1,11 @@
+import { Heading } from './Text';
+import preview from '../../../.rnstorybook/preview';
+
+const meta = preview.meta({
+  component: Heading,
+  args: { text: 'Hello world!' },
+});
+
+export default meta;
+
+export const Basic = meta.story({});
diff --git a/examples/expo-example/components/ControlExamples/Text/Text.factories.test.tsx b/examples/expo-example/components/ControlExamples/Text/Text.factories.test.tsx
new file mode 100644
index 0000000000..951583972e
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/Text/Text.factories.test.tsx
@@ -0,0 +1,8 @@
+import { screen, render } from '@testing-library/react-native';
+import { Basic } from './Text.factories.stories';
+
+test('text story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByText('Hello world!');
+});
diff --git a/examples/expo-example/components/ControlExamples/WebCompatibility/WebCompatibility.factories.stories.tsx b/examples/expo-example/components/ControlExamples/WebCompatibility/WebCompatibility.factories.stories.tsx
new file mode 100644
index 0000000000..4a598d7793
--- /dev/null
+++ b/examples/expo-example/components/ControlExamples/WebCompatibility/WebCompatibility.factories.stories.tsx
@@ -0,0 +1,75 @@
+import preview from '../../../.rnstorybook/preview';
+import { Text, ScrollView, Appearance } from 'react-native';
+
+const ComponentExample = (props: any) => {
+  return (
+    <ScrollView>
+      <Text style={{ color: Appearance.getColorScheme() === 'dark' ? 'white' : 'black' }}>
+        {JSON.stringify(props, null, 2)}
+      </Text>
+    </ScrollView>
+  );
+};
+
+const meta = preview.meta({
+  component: ComponentExample,
+  argTypes: {
+    boolean: { control: 'boolean' },
+    color: { control: 'color' },
+    colorWithPresets: {
+      control: {
+        type: 'color',
+        presetColors: ['#ff0', 'pink', { color: '#00f', title: 'mystery' }],
+      },
+    },
+    colorStartOpen: { control: { type: 'color', startOpen: true } },
+    date: { control: 'date' },
+    file: { control: { type: 'file', accept: '.png' }, name: 'Image Urls' },
+    number: { control: 'number' },
+    object: { control: 'object' },
+    radio: { control: { type: 'radio', options: ['a', 'b', 'c'] } },
+    radioWithLabels: {
+      control: { type: 'radio', options: ['a', 'b', 'c'], labels: ['alpha', 'beta', 'gamma'] },
+    },
+    inlineRadio: { control: { type: 'inline-radio', options: ['a', 'b', 'c'] } },
+    select: { control: 'select', options: ['a', 'b', 'c', 'double  space'] },
+    multiSelect: { control: { type: 'multi-select' }, options: ['a', 'b', 'c', 'double  space'] },
+    range: { control: 'range' },
+    rangeCustom: { control: { type: 'range', min: 0, max: 1000, step: 100 } },
+    text: { control: 'text' },
+  },
+});
+
+export default meta;
+
+export const Undefined = meta.story({
+  args: {},
+});
+
+const DEFAULT_NESTED_OBJECT = {
+  text: 'Hello world',
+  boolean: true,
+  array: ['One', 'Two', 'Three'],
+  object: { a: 1, b: 2, c: 3 },
+};
+
+export const Defined = meta.story({
+  args: {
+    boolean: true,
+    color: '#ff0',
+    colorWithPresets: 'pink',
+    colorStartOpen: 'orange',
+    date: new Date(2010, 1, 1),
+    file: ['https://storybook.js.org/images/placeholders/350x150.png'],
+    number: 10,
+    object: DEFAULT_NESTED_OBJECT,
+    radio: 'a',
+    radioWithLabels: 'b',
+    inlineRadio: 'c',
+    select: 'b',
+    multiSelect: ['a'],
+    range: 15,
+    rangeCustom: 10,
+    text: 'hello',
+  },
+});
diff --git a/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx b/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
new file mode 100644
index 0000000000..3301ebf145
--- /dev/null
+++ b/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
@@ -0,0 +1,67 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const DeepControls = ({
+  objectArg,
+}: {
+  objectArg: {
+    string: string;
+    number: number;
+    boolean: boolean;
+    enumString: string;
+    nested: { number: number; boolean: boolean };
+  };
+}) => {
+  return (
+    <View style={{ gap: 10 }}>
+      <Text>Testing story with deep controls (storybook-addon-deep-controls)</Text>
+      <Text>{JSON.stringify(objectArg, null, 2)}</Text>
+    </View>
+  );
+};
+
+const meta = preview.meta({
+  component: DeepControls,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  args: {
+    objectArg: {
+      string: 'foo',
+      number: 42,
+      boolean: true,
+      enumString: 'value2',
+      nested: {
+        number: 222,
+        boolean: false,
+      },
+    },
+  },
+  argTypes: {
+    // @ts-expect-error
+    'objectArg.enumString': {
+      control: 'radio',
+      options: ['value1', 'value2', 'value3'],
+    },
+    'objectArg.boolean': {
+      control: 'boolean',
+    },
+    'objectArg.number': {
+      control: 'number',
+    },
+    'objectArg.string': {
+      control: 'text',
+    },
+    'objectArg.nested.boolean': {
+      control: 'boolean',
+    },
+    'objectArg.nested.number': {
+      control: 'number',
+    },
+  },
+});
diff --git a/examples/expo-example/components/HiddenControls/HiddenControls.factories.stories.tsx b/examples/expo-example/components/HiddenControls/HiddenControls.factories.stories.tsx
new file mode 100644
index 0000000000..2af2b092f0
--- /dev/null
+++ b/examples/expo-example/components/HiddenControls/HiddenControls.factories.stories.tsx
@@ -0,0 +1,34 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+type HiddenControlsProps = {
+  value: number;
+  padding: number;
+  advanced: boolean;
+};
+const HiddenControls = ({ value, padding }: HiddenControlsProps) => {
+  return (
+    <View style={{ padding, gap: 10 }}>
+      <Text>
+        This is a story that allows you to hide controls based on other args. By default, you should
+        be able to modify the value but not the padding of this component
+      </Text>
+      <Text>Your current chosen value is: {value}</Text>
+    </View>
+  );
+};
+
+const meta = preview.meta({
+  component: HiddenControls,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  argTypes: {
+    value: { control: 'number' },
+    advanced: { control: 'boolean' },
+    padding: { control: 'number', if: { arg: 'advanced' } },
+  },
+  args: { padding: 10, value: 42, advanced: false },
+});
diff --git a/examples/expo-example/components/InputExample/TextInput.factories.stories.tsx b/examples/expo-example/components/InputExample/TextInput.factories.stories.tsx
new file mode 100644
index 0000000000..bdf69cce6f
--- /dev/null
+++ b/examples/expo-example/components/InputExample/TextInput.factories.stories.tsx
@@ -0,0 +1,17 @@
+import preview from '../../.rnstorybook/preview';
+import { Input } from './TextInput';
+
+const meta = preview.meta({
+  component: Input,
+  parameters: {
+    notes: 'Use this example to test the software keyboard related issues.',
+  },
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {
+    placeholder: 'Type something',
+  },
+});
diff --git a/examples/expo-example/components/InputExample/TextInput.factories.test.tsx b/examples/expo-example/components/InputExample/TextInput.factories.test.tsx
new file mode 100644
index 0000000000..59dcd2d771
--- /dev/null
+++ b/examples/expo-example/components/InputExample/TextInput.factories.test.tsx
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react-native';
+import { Basic } from './TextInput.factories.stories';
+
+test('text input story renders', async () => {
+  await render(<Basic.Component />);
+
+  screen.getByPlaceholderText('Type something');
+});
diff --git a/examples/expo-example/components/InteractionExample/InteractionExample.factories.stories.tsx b/examples/expo-example/components/InteractionExample/InteractionExample.factories.stories.tsx
new file mode 100644
index 0000000000..a629c6f875
--- /dev/null
+++ b/examples/expo-example/components/InteractionExample/InteractionExample.factories.stories.tsx
@@ -0,0 +1,109 @@
+import preview from '../../.rnstorybook/preview';
+import { useReducer } from 'react';
+import { View, ScrollView, Text, TextInput, TouchableOpacity } from 'react-native';
+
+const Placeholder = () => <View />;
+
+const meta = preview.meta({
+  component: Placeholder,
+  parameters: {
+    notes: `
+Use these example to test that tapping the story view will dismiss the keyboard,
+but won't interfere with scrolling or other touch interactions.
+`,
+  },
+});
+
+export default meta;
+
+function ExampleItem({ children }) {
+  return (
+    <View
+      style={{
+        flex: 1,
+        borderRadius: 8,
+        backgroundColor: '#dee2e3',
+        marginBottom: 8,
+        height: 44,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text style={{ color: '#001a23' }}>{children}</Text>
+    </View>
+  );
+}
+
+function ExampleInput() {
+  return (
+    <TextInput
+      style={{
+        borderWidth: 1.25,
+        borderColor: '#a3c1e0',
+        marginBottom: 8,
+        borderRadius: 8,
+        height: 40,
+        paddingHorizontal: 8,
+      }}
+      placeholder="Type something"
+    />
+  );
+}
+
+export const Static = meta.story({
+  render: () => (
+    <>
+      <ExampleInput />
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text>
+          Opening the keyboard and then tapping somewhere in a story view will dismiss the keyboard.
+        </Text>
+      </View>
+    </>
+  ),
+});
+
+export const Touchable = meta.story({
+  render: function InteractionRender() {
+    const [count, increment] = useReducer((state) => state + 1, 0);
+
+    return (
+      <>
+        <ExampleInput />
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+          <Text>Pressed {count} time(s)</Text>
+          <TouchableOpacity
+            style={{
+              borderWidth: 1,
+              borderRadius: 8,
+              padding: 8,
+              marginVertical: 16,
+              borderColor: '#b2cbe6',
+              backgroundColor: '#dcebf9',
+            }}
+            onPress={() => increment()}
+          >
+            <Text>This button can be tapped without the story view interfering.</Text>
+          </TouchableOpacity>
+        </View>
+      </>
+    );
+  },
+});
+
+export const Scrolling = meta.story({
+  render: () => (
+    <>
+      <ExampleInput />
+      <ScrollView>
+        <ExampleItem>This can scroll when the keyboard is closed.</ExampleItem>
+        <ExampleItem>And also when the keyboard is open.</ExampleItem>
+        {Array(25)
+          .fill(true)
+          .map((_ignored, idx) => (
+            <ExampleItem key={idx}>Item #{idx}</ExampleItem>
+          ))}
+      </ScrollView>
+    </>
+  ),
+});
diff --git a/examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.factories.stories.tsx b/examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.factories.stories.tsx
new file mode 100644
index 0000000000..97708d3b38
--- /dev/null
+++ b/examples/expo-example/components/LoginDocsExample/LoginForm/LoginForm.factories.stories.tsx
@@ -0,0 +1,53 @@
+import preview from '../../../.rnstorybook/preview';
+import { fn } from 'storybook/test';
+import { LoginForm } from './LoginForm';
+
+const meta = preview.meta({
+  component: LoginForm,
+  args: {
+    onSubmit: fn(),
+    emailLabel: 'Email Address',
+    emailPlaceholder: 'Enter your email',
+    passwordLabel: 'Password',
+    passwordPlaceholder: 'Enter your password',
+    submitButtonTitle: 'Sign In',
+  },
+});
+
+export default meta;
+
+export const Default = meta.story({});
+
+export const WithErrors = meta.story({
+  args: {
+    emailError: 'Please enter a valid email',
+    passwordError: 'Password must be at least 8 characters',
+  },
+});
+
+export const Loading = meta.story({
+  args: {
+    loading: true,
+  },
+});
+
+export const EmailErrorOnly = meta.story({
+  args: {
+    emailError: 'This email is already registered',
+  },
+});
+
+export const PasswordErrorOnly = meta.story({
+  args: {
+    passwordError: 'Password is incorrect',
+  },
+});
+
+export const LongErrors = meta.story({
+  args: {
+    emailError:
+      'The email address you entered is not valid. Please check the format and try again.',
+    passwordError:
+      'Your password must be at least 8 characters long and contain both letters and numbers for security.',
+  },
+});
diff --git a/examples/expo-example/components/LoginDocsExample/TextInput/TextInput.factories.stories.tsx b/examples/expo-example/components/LoginDocsExample/TextInput/TextInput.factories.stories.tsx
new file mode 100644
index 0000000000..447cd90cd2
--- /dev/null
+++ b/examples/expo-example/components/LoginDocsExample/TextInput/TextInput.factories.stories.tsx
@@ -0,0 +1,76 @@
+import preview from '../../../.rnstorybook/preview';
+import { TextInput } from './TextInput';
+
+const meta = preview.meta({
+  component: TextInput,
+  args: {
+    placeholder: 'Enter text...',
+  },
+});
+
+export default meta;
+
+export const Default = meta.story({});
+
+export const WithLabel = meta.story({
+  args: {
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+  },
+});
+
+export const Password = meta.story({
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    secureTextEntry: true,
+  },
+});
+
+export const WithError = meta.story({
+  args: {
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+    value: 'invalid-email',
+    error: 'Please enter a valid email address',
+  },
+});
+
+export const Filled = meta.story({
+  args: {
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+    value: 'user@example.com',
+  },
+});
+
+export const Playground = meta.story({
+  args: {
+    label: 'Email Address',
+    placeholder: 'Enter your email',
+    value: '',
+    error: '',
+  },
+});
+
+export const LongLabel = meta.story({
+  args: {
+    label: 'This is a very long label that might wrap to multiple lines and affect layout',
+    placeholder: 'Enter text',
+  },
+});
+
+export const LongErrorMessage = meta.story({
+  args: {
+    label: 'Email',
+    error:
+      'This is a very long error message that explains in detail what went wrong and how to fix it',
+  },
+});
+
+export const EmptyState = meta.story({
+  args: {
+    label: '',
+    placeholder: '',
+  },
+});
diff --git a/examples/expo-example/components/NotesExample/NotesExample.factories.stories.tsx b/examples/expo-example/components/NotesExample/NotesExample.factories.stories.tsx
new file mode 100644
index 0000000000..3e92798934
--- /dev/null
+++ b/examples/expo-example/components/NotesExample/NotesExample.factories.stories.tsx
@@ -0,0 +1,96 @@
+import preview from '../../.rnstorybook/preview';
+import { View, StyleSheet, Text } from 'react-native';
+
+function NotesContent() {
+  return (
+    <View
+      style={{
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 16,
+      }}
+    >
+      <Text>This story exercises the notes addon, see the addons panel.</Text>
+    </View>
+  );
+}
+
+const meta = preview.meta({
+  parameters: {
+    notes: `
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+This is a paragraph that can span multiple lines. It should be line-wrapped
+but not contain any paragraph breaks.
+
+Unless a paragraph break is explicitly used.
+
+Inline content can be **strong**, _emphasized_, ~~struck out~~, \`code\`, or a [hyperlink](http://example.com).
+
+---
+
+- Unordered lists are not numbered
+
+- And can be nested
+
+    + As deeply as desired
+
+- And then resume afterwards
+
+---
+
+1. Ordered lists are numbered
+
+2. And can be nested too
+
+   1. Also as deeply as desired
+
+3. And then resume afterwards
+
+---
+
+\`\`\`tsx
+Code fences are blocks of monospace text
+
+  where leading whitespace is preserved,
+
+    and **inline** markup is not supported.
+\`\`\`
+
+---
+
+    Code blocks are blocks of monospace text
+
+      where leading whitespace is preserved,
+
+        and **inline** markup is not supported.
+
+---
+
+> Block quotes are blocks of normal text
+> where **inline** markup is possible and
+>
+>> can be nested too.
+>
+> - Block content is even possible!
+`,
+  },
+});
+
+export default meta;
+
+export const NotesExample = meta.story({
+  render: () => <NotesContent />,
+  parameters: { noSafeArea: false },
+});
diff --git a/examples/expo-example/components/StoryName/StoryName.factories.stories.tsx b/examples/expo-example/components/StoryName/StoryName.factories.stories.tsx
new file mode 100644
index 0000000000..381363e250
--- /dev/null
+++ b/examples/expo-example/components/StoryName/StoryName.factories.stories.tsx
@@ -0,0 +1,35 @@
+import preview from '../../.rnstorybook/preview';
+import { Text } from 'react-native';
+
+const StoryName = ({ name }: { name: string }) => <Text>{name}</Text>;
+
+const meta = preview.meta({
+  component: StoryName,
+});
+
+export default meta;
+
+export const WithStoryName = meta.story({
+  name: 'story name here',
+  args: { name: 'story name here' },
+});
+
+export const WithName = meta.story({
+  name: 'name here',
+  args: { name: 'name here' },
+});
+
+export const WithNoName = meta.story({
+  args: { name: 'no name here' },
+});
+
+export const CSF2Example = meta.story({
+  render: (args) => <StoryName {...args} />,
+  args: { name: 'csf2 with no name' },
+});
+
+export const CSF2ExampleWithName = meta.story({
+  name: 'csf2 with name',
+  render: (args) => <StoryName {...args} />,
+  args: { name: 'csf2 with name' },
+});

From 644d7a5e66ef1fef490cb89c9c9606e292c3266a Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 15:17:12 +0000
Subject: [PATCH 04/20] fix: jest config

---
 examples/expo-example/jest.config.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/expo-example/jest.config.js b/examples/expo-example/jest.config.js
index a2bc49b76b..2ac49c9f54 100644
--- a/examples/expo-example/jest.config.js
+++ b/examples/expo-example/jest.config.js
@@ -9,12 +9,12 @@ const config = {
 
   transform: {
     // Use sucrase for storybook ESM files (much faster than babel for simple ESM→CJS)
-    'node_modules/(storybook|@storybook/react)/.+\\.[jt]sx?$':
+    'node_modules/(storybook|@storybook/react|@storybook/icons)/.+\\.[jt]sx?$':
       '<rootDir>/jest-sucrase-transformer.js',
   },
 
   transformIgnorePatterns: [
-    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|jest-expo|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook|@storybook/react|uuid|@react-native/.*)',
+    'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|jest-expo|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@sentry/react-native|native-base|react-native-svg|storybook|@storybook/react|@storybook/icons|uuid|@react-native/.*)',
   ],
 };
 

From 37221b3c5d5b44a6f34b76b24997c39402555e88 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 17:57:11 +0000
Subject: [PATCH 05/20] fix: test fn mock resolves different file for different
 pacakges

---
 CLAUDE.md                                     | 84 +++++++------------
 .../Actions.factories.stories.tsx             |  6 +-
 .../ActionExample/Actions.stories.tsx         |  8 +-
 .../react-native/src/metro/withStorybook.ts   | 24 ++++++
 4 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index ee8cb8e3d3..1b37209b03 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -24,74 +24,54 @@ pnpm test:ci    # Run tests in CI mode
 pnpm lint       # Run ESLint across the codebase
 pnpm format:check   # Check Prettier formatting
 pnpm format:fix     # Auto-fix Prettier formatting
-
-# Documentation (from docs/ directory)
-cd docs
-pnpm start      # Start development server
-pnpm build      # Build documentation
-pnpm serve      # Serve built documentation
 ```
 
-## Architecture Overview
+## On-Device Testing Tools
 
-**pnpm workspaces monorepo** managed by Lerna containing React Native Storybook packages.
+### agent-device (iOS/Android Simulator Control)
 
-### Packages
+Use `agent-device` to interact with iOS/Android simulators for testing the Storybook app:
 
-**Apps**
+```bash
+agent-device open host.exp.Exponent --relaunch  # Relaunch Expo Go
+agent-device snapshot -c                         # Take accessibility snapshot (shows @refs)
+agent-device click @e14                          # Click element by ref from snapshot
+agent-device find "Press me" click               # Find text and click it
+```
 
-- examples/expo-example - Expo example app showcasing Storybook
-- docs - Documentation site for Storybook React Native
+After relaunching, you need to press the app in Expo Go to open it (e.g. click the "Expo Example" entry).
 
-**Core:**
+### rn-logs (React Native Log Streaming)
 
-- `@storybook/react-native` - Main package providing Storybook functionality
-- `@storybook/react-native-ui` - Full UI components for on-device Storybook
-- `@storybook/react-native-ui-lite` - Lightweight UI components
-- `@storybook/react-native-ui-common` - Shared UI components
-- `@storybook/react-native-theming` - Theming utilities
+Use `rn-logs` to stream console output from the running app:
 
-**On-Device Addons:**
+```bash
+rn-logs apps                              # List running apps
+rn-logs logs --app "host.exp.Exponent"    # Stream logs from Expo Go
+```
 
-- `@storybook/addon-ondevice-actions` - Log component interactions
-- `@storybook/addon-ondevice-backgrounds` - Change story backgrounds
-- `@storybook/addon-ondevice-controls` - Dynamically edit component props
-- `@storybook/addon-ondevice-notes` - Add markdown documentation to stories
+Pipe through `grep` to filter: `rn-logs logs --app "host.exp.Exponent" 2>&1 | grep "KEYWORD"`
 
-### Build System & Metro Configuration
+## Architecture Overview
 
-- Uses **tsup** for TypeScript compilation (ES2022, CommonJS output)
-- Each package has its own `tsup.config.ts`
-- `pnpm prepare` in a package builds it
+**pnpm workspaces monorepo** managed by Lerna containing React Native Storybook packages.
 
-The `withStorybook` Metro wrapper (for Metro-based projects):
+### Key Concepts
 
-- Enables `unstable_allowRequireContext` for dynamic story imports
-- Automatically generates `storybook.requires.ts` file
-- Optional WebSocket server for remote control
-- Can be conditionally enabled/disabled via `enabled` option
-- Supports `liteMode` for reduced bundle size
+1. **CSF (Component Story Format)** - Standard story syntax
+2. **On-device UI** - Native UI that runs directly on mobile devices
+3. **Story requires generation** - Automatic generation of story imports via Metro (`storybook.requires.ts`)
+4. **Portable stories** - Reuse stories in unit tests via `universal-test-renderer`
+5. **fn() actions bridge** - `setupFnActionsBridge` in `storybook.requires.ts` bridges `fn()` mocks from `storybook/test` to the on-device actions panel. Must be called from user-land code (not package code) due to module identity — `storybook/test` uses a module-scoped listener Set.
 
-The `StorybookPlugin` (for Re.Pack/Rspack/Webpack projects):
+### Build System
 
-- Alternative to `withStorybook` for non-Metro bundlers
-- Imported from `@storybook/react-native/repack/withStorybook`
-- Requires `enablePackageExports: true` in rspack resolve options
-- Uses `DefinePlugin` for build-time `STORYBOOK_ENABLED` constant
-- No `require.context` configuration needed (rspack handles it natively)
-- Same options as `withStorybook` (enabled, configPath, useJs, docTools, liteMode, websockets)
+- Uses **tsup** for TypeScript compilation (ES2022, CommonJS output)
+- Each package has its own `tsup.config.ts`
+- `pnpm prepare` in a package builds it (or `pnpm -F @storybook/react-native prepare`)
 
 ### Testing
 
-- Uses **jest** with `jest-expo` preset
-- `universal-test-renderer` for portable story testing
-- Story generation tested with Node's native test runner
-
-### Key Concepts
-
-1. **CSF (Component Story Format)** - Standard story syntax
-2. **On-device UI** - Native UI that runs directly on mobile devices
-3. **Story requires generation** - Automatic generation of story imports via Metro
-4. **Portable stories** - Reuse stories in unit tests
-5. **WebSocket support** - Remote control stories from external devices
-6. **Lite mode** - Alternative UI without heavy dependencies (reanimated, etc.)
+- Uses **jest** with `jest-expo` preset for example app tests
+- Story generation snapshots tested with Node's native test runner (`tests/scripts/`)
+- Update Node test runner snapshots: `cd tests && node --test-update-snapshots --test scripts/generate.test.ts scripts/docgen.test.ts`
diff --git a/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx b/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
index c6a0e8b769..8f303a4dd2 100644
--- a/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
+++ b/examples/expo-example/components/ActionExample/Actions.factories.stories.tsx
@@ -1,6 +1,5 @@
 import { ActionButton } from './Actions';
-import { action } from 'storybook/actions';
-// import { fn } from 'storybook/test';
+import { fn } from 'storybook/test';
 import preview from '../../.rnstorybook/preview';
 
 const meta = preview.meta({
@@ -27,7 +26,6 @@ export default meta;
 export const Basic = meta.story({
   args: {
     text: 'Press me!',
-    onPress: action('onPress'),
-    // onPress: fn(),
+    onPress: fn(),
   },
 });
diff --git a/examples/expo-example/components/ActionExample/Actions.stories.tsx b/examples/expo-example/components/ActionExample/Actions.stories.tsx
index 9933e415d5..cfd6a582d1 100644
--- a/examples/expo-example/components/ActionExample/Actions.stories.tsx
+++ b/examples/expo-example/components/ActionExample/Actions.stories.tsx
@@ -11,10 +11,10 @@ const meta = {
 This is a button component.
 You use it like this:
 
-\`\`\`tsx    
-<Button 
-      text="Press me!" 
-      onPress={() => console.log('pressed')} 
+\`\`\`tsx
+<Button
+      text="Press me!"
+      onPress={() => console.log('pressed')}
 />
 \`\`\`
 `,
diff --git a/packages/react-native/src/metro/withStorybook.ts b/packages/react-native/src/metro/withStorybook.ts
index ca800a689b..f0225d211d 100644
--- a/packages/react-native/src/metro/withStorybook.ts
+++ b/packages/react-native/src/metro/withStorybook.ts
@@ -242,6 +242,8 @@ export function withStorybook(
     });
   }
 
+  let storybookTestPath: string | undefined;
+
   return {
     ...config,
     transformer: {
@@ -268,6 +270,28 @@ export function withStorybook(
             }
           : context;
 
+        // Pin storybook/test to a single resolved copy so that all modules
+        // share the same listeners Set (needed for fn() → actions bridge).
+        // Without this, different copies in node_modules each get their own
+        // module-scoped listeners, and onMockCall registered in one copy
+        // never sees fn() calls from another.
+        if (moduleName === 'storybook/test') {
+          if (!storybookTestPath) {
+            const resolved = resolveFunction(
+              {
+                ...context,
+                unstable_enablePackageExports: true,
+                unstable_conditionNames: ['import'],
+              },
+              'storybook/test',
+              platform
+            );
+            storybookTestPath = resolved.filePath;
+          }
+
+          return { filePath: storybookTestPath, type: 'sourceFile' };
+        }
+
         const resolveResult = resolveFunction(theContext, moduleName, platform);
 
         // Workaround for template files with invalid imports

From cfc816a305544e91f4d12bb931fdd8543a58b62d Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 18:35:00 +0000
Subject: [PATCH 06/20] fix: action issues

---
 packages/react-native/src/Start.tsx              |  6 ------
 packages/react-native/src/View.tsx               |  1 -
 packages/react-native/src/metro/channelServer.ts |  7 ++++++-
 packages/react-native/src/polyfill.ts            |  5 +++++
 packages/react-native/src/preview.ts             | 11 +++++++++++
 5 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index c186b5a308..37e0232efa 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -1,5 +1,4 @@
 import './polyfill';
-import { Platform } from 'react-native';
 import { addons as managerAddons } from 'storybook/manager-api';
 import {
   composeConfigs,
@@ -29,11 +28,6 @@ globalThis.FEATURES = {
   backgrounds: false,
 };
 
-// Note this is a workaround for setImmediate not being defined
-if (Platform.OS === 'web' && typeof globalThis.setImmediate === 'undefined') {
-  require('setimmediate');
-}
-
 export const getProjectAnnotations = (view: View, annotations: any[]) => async () =>
   composeConfigs<ReactRenderer>([
     {
diff --git a/packages/react-native/src/View.tsx b/packages/react-native/src/View.tsx
index 1840ed1995..a540562e72 100644
--- a/packages/react-native/src/View.tsx
+++ b/packages/react-native/src/View.tsx
@@ -208,7 +208,6 @@ export class View {
           console.log(`WebsocketTransport error ${JSON.stringify(e)}`);
         },
       }),
-      async: true,
     });
 
     return channel;
diff --git a/packages/react-native/src/metro/channelServer.ts b/packages/react-native/src/metro/channelServer.ts
index efb590de7e..2d5f4f85d0 100644
--- a/packages/react-native/src/metro/channelServer.ts
+++ b/packages/react-native/src/metro/channelServer.ts
@@ -148,8 +148,13 @@ export function createChannelServer({
       ws.on('message', function message(data: Data) {
         try {
           const json = JSON.parse(data.toString());
+          const msg = JSON.stringify(json);
 
-          wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
+          wss.clients.forEach((wsClient) => {
+            if (wsClient !== ws && wsClient.readyState === WebSocket.OPEN) {
+              wsClient.send(msg);
+            }
+          });
         } catch (error) {
           console.error(error);
         }
diff --git a/packages/react-native/src/polyfill.ts b/packages/react-native/src/polyfill.ts
index c8009b09db..b269bfb8ae 100644
--- a/packages/react-native/src/polyfill.ts
+++ b/packages/react-native/src/polyfill.ts
@@ -14,3 +14,8 @@ if (Platform.OS !== 'web') {
     setupURLPolyfill();
   }
 }
+
+// Note this is a workaround for setImmediate not being defined
+if (Platform.OS === 'web' && typeof globalThis.setImmediate === 'undefined') {
+  require('setimmediate');
+}
diff --git a/packages/react-native/src/preview.ts b/packages/react-native/src/preview.ts
index de1b270add..633cd81822 100644
--- a/packages/react-native/src/preview.ts
+++ b/packages/react-native/src/preview.ts
@@ -1,9 +1,20 @@
+import { Platform } from 'react-native';
 import {
   parameters as reactParameters,
   argTypesEnhancers,
 } from '@storybook/react/entry-preview-docs';
 import { type Preview } from '@storybook/react';
 
+// Workaround for Reanimated globals not being available on web.
+// Without these, the actions panel crashes with:
+// "ProgressTransitionRegister is not available on non-native platform"
+if (Platform.OS === 'web') {
+  // @ts-ignore
+  globalThis.ProgressTransitionRegister = {};
+  // @ts-ignore
+  globalThis.UpdatePropsManager = {};
+}
+
 const preview: Preview = {
   argTypesEnhancers,
   parameters: {

From d0bca32b66b1902055f02d7870d1895983126bb2 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 21:31:47 +0000
Subject: [PATCH 07/20] fix: resolve duplicate storybook instances and improve
 action event handling

Add storybook as devDependency to all workspace packages so pnpm hoists
a single copy, fixing duplicate action events caused by two separate
module instances each registering their own listener.

Sanitize RN synthetic events in action payloads only on the WebSocket
channel where async transport causes event pool recycling. Remove the
unnecessary patch from the local sync channel.

Remove early-return guards from addon panels so hooks are called
unconditionally, fixing React rules-of-hooks violations.
---
 packages/ondevice-actions/package.json        |   1 +
 packages/ondevice-backgrounds/package.json    |   1 +
 .../src/BackgroundPanel.tsx                   |   4 -
 packages/ondevice-controls/package.json       |   1 +
 packages/ondevice-controls/src/Panel.tsx      |   3 -
 packages/ondevice-notes/package.json          |   1 +
 .../ondevice-notes/src/components/Notes.tsx   |   2 +-
 packages/react-native-ui-common/package.json  |   1 +
 packages/react-native-ui-lite/package.json    |   1 +
 .../src/MobileAddonsPanel.tsx                 |  54 +++++----
 packages/react-native-ui/package.json         |   1 +
 .../react-native-ui/src/MobileAddonsPanel.tsx |  54 +++++----
 packages/react-native/src/Start.tsx           |  21 +++-
 packages/react-native/src/View.tsx            |   3 +
 .../src/backgrounds/BackgroundPanel.tsx       |  11 +-
 .../react-native/src/metro/withStorybook.ts   |  24 ----
 .../react-native/src/patchChannelForRN.ts     |  81 +++++++++++++
 pnpm-lock.yaml                                | 112 +++++-------------
 18 files changed, 206 insertions(+), 170 deletions(-)
 create mode 100644 packages/react-native/src/patchChannelForRN.ts

diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
index 5e4fbe8cc3..5ffa7d97e8 100644
--- a/packages/ondevice-actions/package.json
+++ b/packages/ondevice-actions/package.json
@@ -31,6 +31,7 @@
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
+    "storybook": "10.3.0-alpha.12",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
diff --git a/packages/ondevice-backgrounds/package.json b/packages/ondevice-backgrounds/package.json
index 6db23f5da8..84e1aa939e 100644
--- a/packages/ondevice-backgrounds/package.json
+++ b/packages/ondevice-backgrounds/package.json
@@ -36,6 +36,7 @@
     "@storybook/react-native-theming": "^10.3.0-next.2"
   },
   "devDependencies": {
+    "storybook": "10.3.0-alpha.12",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
diff --git a/packages/ondevice-backgrounds/src/BackgroundPanel.tsx b/packages/ondevice-backgrounds/src/BackgroundPanel.tsx
index 90f5b4969e..72cd31e4e1 100644
--- a/packages/ondevice-backgrounds/src/BackgroundPanel.tsx
+++ b/packages/ondevice-backgrounds/src/BackgroundPanel.tsx
@@ -66,10 +66,6 @@ interface BackgroundPanelProps {
 }
 
 const BackgroundPanel = ({ active, api, channel }: BackgroundPanelProps) => {
-  if (!active) {
-    return null;
-  }
-
   const store = api.store();
   const storyId = store.getSelection().storyId;
   const story = store.fromId(storyId);
diff --git a/packages/ondevice-controls/package.json b/packages/ondevice-controls/package.json
index 3a81eb8b9c..a267af09c5 100644
--- a/packages/ondevice-controls/package.json
+++ b/packages/ondevice-controls/package.json
@@ -41,6 +41,7 @@
   "devDependencies": {
     "@gorhom/bottom-sheet": "*",
     "cross-env": "^10.1.0",
+    "storybook": "10.3.0-alpha.12",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
diff --git a/packages/ondevice-controls/src/Panel.tsx b/packages/ondevice-controls/src/Panel.tsx
index 797d253aa5..f3934bba05 100644
--- a/packages/ondevice-controls/src/Panel.tsx
+++ b/packages/ondevice-controls/src/Panel.tsx
@@ -1,9 +1,6 @@
 import React from 'react';
 
 export const AddonPanel = ({ active, children }) => {
-  if (!active) {
-    return null;
-  }
   return <>{children}</>;
 };
 
diff --git a/packages/ondevice-notes/package.json b/packages/ondevice-notes/package.json
index eadb702f85..6a6282f779 100644
--- a/packages/ondevice-notes/package.json
+++ b/packages/ondevice-notes/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "react-native-markdown-display": "^7.0.2",
+    "storybook": "10.3.0-alpha.12",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
   },
diff --git a/packages/ondevice-notes/src/components/Notes.tsx b/packages/ondevice-notes/src/components/Notes.tsx
index 377e6a23ce..f88485da15 100644
--- a/packages/ondevice-notes/src/components/Notes.tsx
+++ b/packages/ondevice-notes/src/components/Notes.tsx
@@ -73,7 +73,7 @@ export const Notes = ({ active, api }: NotesProps) => {
     [theme.color.defaultText, theme.background.app]
   );
 
-  if (!active || !story) {
+  if (!story) {
     return null;
   }
 
diff --git a/packages/react-native-ui-common/package.json b/packages/react-native-ui-common/package.json
index 6ffa090aeb..cd748e5dce 100644
--- a/packages/react-native-ui-common/package.json
+++ b/packages/react-native-ui-common/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
+    "storybook": "10.3.0-alpha.12",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
   },
diff --git a/packages/react-native-ui-lite/package.json b/packages/react-native-ui-lite/package.json
index 83462eeba3..d000f73814 100644
--- a/packages/react-native-ui-lite/package.json
+++ b/packages/react-native-ui-lite/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
+    "storybook": "10.3.0-alpha.12",
     "ts-dedent": "^2.2.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
diff --git a/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx b/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx
index 61c8d55a06..f1fa12215d 100644
--- a/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx
+++ b/packages/react-native-ui-lite/src/MobileAddonsPanel.tsx
@@ -14,7 +14,11 @@ import {
   ViewStyle,
 } from 'react-native';
 import { addons } from 'storybook/manager-api';
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import {
+  Addon_TypesEnum,
+  type Addon_BaseType,
+  type Addon_Collection,
+} from 'storybook/internal/types';
 import { CloseIcon } from './icon/iconDataUris';
 import useAnimatedValue from './useAnimatedValue';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -214,32 +218,18 @@ const centeredStyle = {
   justifyContent: 'center',
 } satisfies StyleProp<ViewStyle>;
 
+const hiddenStyle = {
+  display: 'none',
+} satisfies StyleProp<ViewStyle>;
+
 const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
-  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+  const panels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
   const insets = useSafeAreaInsets();
   const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
 
-  const panel = useMemo(() => {
-    if (!storyId) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No Story Selected</Text>
-        </View>
-      );
-    }
-
-    if (Object.keys(panels).length === 0) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No addons loaded.</Text>
-        </View>
-      );
-    }
-
-    return panels[addonSelected].render({ active: true });
-  }, [addonSelected, panels, storyId]);
+  const panelEntries = useMemo(() => Object.entries(panels), [panels]);
 
   const scrollContentContainerStyle = useStyle(
     () => ({
@@ -265,7 +255,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
                 key={id}
                 active={id === addonSelected}
                 onPress={() => setAddonSelected(id)}
-                text={resolvedTitle}
+                text={String(resolvedTitle)}
               />
             );
           })}
@@ -285,12 +275,30 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
         // keyboardShouldPersistTaps="handled"
         contentContainerStyle={scrollContentContainerStyle}
       >
-        {panel}
+        {!storyId ? (
+          <View style={centeredStyle}>
+            <Text>No Story Selected</Text>
+          </View>
+        ) : panelEntries.length === 0 ? (
+          <View style={centeredStyle}>
+            <Text>No addons loaded.</Text>
+          </View>
+        ) : (
+          panelEntries.map(([id, p]) => (
+            <View key={id} style={id === addonSelected ? undefined : hiddenStyle}>
+              <PanelRenderer panel={p} />
+            </View>
+          ))
+        )}
       </ScrollView>
     </View>
   );
 };
 
+const PanelRenderer = ({ panel }: { panel: Addon_BaseType }) => {
+  return panel.render({ active: true });
+};
+
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (
     <TabButton
diff --git a/packages/react-native-ui/package.json b/packages/react-native-ui/package.json
index 92e13a87ed..0a98a50787 100644
--- a/packages/react-native-ui/package.json
+++ b/packages/react-native-ui/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.14",
+    "storybook": "10.3.0-alpha.12",
     "tsup": "^8.5.0",
     "typescript": "~5.9.3"
   },
diff --git a/packages/react-native-ui/src/MobileAddonsPanel.tsx b/packages/react-native-ui/src/MobileAddonsPanel.tsx
index 3c70942a6a..6a845170b4 100644
--- a/packages/react-native-ui/src/MobileAddonsPanel.tsx
+++ b/packages/react-native-ui/src/MobileAddonsPanel.tsx
@@ -1,7 +1,11 @@
 import { BottomSheetModal } from '@gorhom/bottom-sheet';
 import { addons } from 'storybook/manager-api';
 import { styled, useTheme } from '@storybook/react-native-theming';
-import { Addon_TypesEnum } from 'storybook/internal/types';
+import {
+  Addon_TypesEnum,
+  type Addon_BaseType,
+  type Addon_Collection,
+} from 'storybook/internal/types';
 import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Platform, StyleProp, Text, View, ViewStyle, useWindowDimensions } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
@@ -138,10 +142,14 @@ const centeredStyle = {
   justifyContent: 'center',
 } satisfies StyleProp<ViewStyle>;
 
+const hiddenStyle = {
+  display: 'none',
+} satisfies StyleProp<ViewStyle>;
+
 const hitSlop = { top: 10, right: 10, bottom: 10, left: 10 };
 
 export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId?: string }) => {
-  const panels = addons.getElements(Addon_TypesEnum.PANEL);
+  const panels: Addon_Collection<Addon_BaseType> = addons.getElements(Addon_TypesEnum.PANEL);
 
   const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0]);
 
@@ -153,25 +161,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
     };
   });
 
-  const panel = useMemo(() => {
-    if (!storyId) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No Story Selected</Text>
-        </View>
-      );
-    }
-
-    if (Object.keys(panels).length === 0) {
-      return (
-        <View style={centeredStyle}>
-          <Text>No addons loaded.</Text>
-        </View>
-      );
-    }
-
-    return panels[addonSelected].render({ active: true });
-  }, [addonSelected, panels, storyId]);
+  const panelEntries = useMemo(() => Object.entries(panels), [panels]);
 
   return (
     <View style={addonsTabsContainerStyle}>
@@ -189,7 +179,7 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
                 key={id}
                 active={id === addonSelected}
                 onPress={() => setAddonSelected(id)}
-                text={resolvedTitle}
+                text={String(resolvedTitle)}
               />
             );
           })}
@@ -207,12 +197,30 @@ export const AddonsTabs = ({ onClose, storyId }: { onClose?: () => void; storyId
         // keyboardShouldPersistTaps="handled"
         contentContainerStyle={scrollContentContainerStyle}
       >
-        {panel}
+        {!storyId ? (
+          <View style={centeredStyle}>
+            <Text>No Story Selected</Text>
+          </View>
+        ) : panelEntries.length === 0 ? (
+          <View style={centeredStyle}>
+            <Text>No addons loaded.</Text>
+          </View>
+        ) : (
+          panelEntries.map(([id, p]) => (
+            <View key={id} style={id === addonSelected ? undefined : hiddenStyle}>
+              <PanelRenderer panel={p} />
+            </View>
+          ))
+        )}
       </ScrollView>
     </View>
   );
 };
 
+const PanelRenderer = ({ panel }: { panel: Addon_BaseType }) => {
+  return panel.render({ active: true });
+};
+
 const Tab = ({ active, onPress, text }: { active: boolean; onPress: () => void; text: string }) => {
   return (
     <TabButton active={active} onPress={onPress}>
diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index 37e0232efa..b9f876b8c0 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -28,6 +28,23 @@ globalThis.FEATURES = {
   backgrounds: false,
 };
 
+/**
+ * If an annotation module's default export is a Preview object (from definePreview),
+ * extract the user's plain config so composeConfigs can merge parameters properly.
+ * definePreview wraps config in an opaque object that composeConfigs can't read.
+ */
+function resolveAnnotations(annotations: any[]): any[] {
+  return annotations.map((mod) => {
+    const defaultExport = mod?.default ?? mod;
+    if (defaultExport?._tag === 'Preview' && defaultExport.input) {
+      // Extract user config fields, excluding addons (which definePreview handles internally)
+      const { addons: _addons, ...userConfig } = defaultExport.input;
+      return { default: userConfig };
+    }
+    return mod;
+  });
+}
+
 export const getProjectAnnotations = (view: View, annotations: any[]) => async () =>
   composeConfigs<ReactRenderer>([
     {
@@ -46,7 +63,7 @@ export const getProjectAnnotations = (view: View, annotations: any[]) => async (
         return <Component {...args} />;
       },
     },
-    ...annotations,
+    ...resolveAnnotations(annotations),
   ]);
 
 export function start({
@@ -127,7 +144,7 @@ export function start({
           return <Component {...args} />;
         },
       },
-      ...annotations,
+      ...resolveAnnotations(annotations),
     ]);
 
   const preview = new PreviewWithSelection<ReactRenderer>(
diff --git a/packages/react-native/src/View.tsx b/packages/react-native/src/View.tsx
index a540562e72..7e068ff502 100644
--- a/packages/react-native/src/View.tsx
+++ b/packages/react-native/src/View.tsx
@@ -8,6 +8,7 @@ import { addons as managerAddons } from 'storybook/manager-api';
 import { PreviewWithSelection, addons as previewAddons } from 'storybook/internal/preview-api';
 import type { API_IndexHash, PreparedStory, StoryId, StoryIndex } from 'storybook/internal/types';
 import dedent from 'dedent';
+import { patchChannelForRN } from './patchChannelForRN';
 import deepmerge from 'deepmerge';
 import { useEffect, useMemo, useReducer, useState } from 'react';
 import {
@@ -202,6 +203,7 @@ export class View {
     const url = `${websocketType}://${host}${port}/${query}`;
 
     const channel = new Channel({
+      async: true,
       transport: new WebsocketTransport({
         url,
         onError: (e) => {
@@ -209,6 +211,7 @@ export class View {
         },
       }),
     });
+    patchChannelForRN(channel);
 
     return channel;
   };
diff --git a/packages/react-native/src/backgrounds/BackgroundPanel.tsx b/packages/react-native/src/backgrounds/BackgroundPanel.tsx
index c1bf904809..ee12f7c36b 100644
--- a/packages/react-native/src/backgrounds/BackgroundPanel.tsx
+++ b/packages/react-native/src/backgrounds/BackgroundPanel.tsx
@@ -82,8 +82,8 @@ interface BackgroundOptions {
 
 const BackgroundPanel = ({ active, api, channel }: BackgroundPanelProps) => {
   const store = api.store();
-  const storyId = store.getSelection().storyId;
-  const story = store.fromId(storyId);
+  const storyId = store.getSelection()?.storyId;
+  const story = storyId ? store.fromId(storyId) : null;
 
   // storyGlobals comes from PreparedStory spread in getStoryContext
   const isLocked = !!story?.storyGlobals?.[PARAM_KEY];
@@ -95,13 +95,8 @@ const BackgroundPanel = ({ active, api, channel }: BackgroundPanelProps) => {
     [channel]
   );
 
-  if (!active) {
-    return null;
-  }
-
-  const bgParams = story.parameters[PARAM_KEY];
+  const bgParams = story?.parameters?.[PARAM_KEY];
   const options: BackgroundOptions | undefined = bgParams?.options;
-
   if (options && Object.keys(options).length > 0) {
     return (
       <View style={{ padding: 10 }}>
diff --git a/packages/react-native/src/metro/withStorybook.ts b/packages/react-native/src/metro/withStorybook.ts
index f0225d211d..ca800a689b 100644
--- a/packages/react-native/src/metro/withStorybook.ts
+++ b/packages/react-native/src/metro/withStorybook.ts
@@ -242,8 +242,6 @@ export function withStorybook(
     });
   }
 
-  let storybookTestPath: string | undefined;
-
   return {
     ...config,
     transformer: {
@@ -270,28 +268,6 @@ export function withStorybook(
             }
           : context;
 
-        // Pin storybook/test to a single resolved copy so that all modules
-        // share the same listeners Set (needed for fn() → actions bridge).
-        // Without this, different copies in node_modules each get their own
-        // module-scoped listeners, and onMockCall registered in one copy
-        // never sees fn() calls from another.
-        if (moduleName === 'storybook/test') {
-          if (!storybookTestPath) {
-            const resolved = resolveFunction(
-              {
-                ...context,
-                unstable_enablePackageExports: true,
-                unstable_conditionNames: ['import'],
-              },
-              'storybook/test',
-              platform
-            );
-            storybookTestPath = resolved.filePath;
-          }
-
-          return { filePath: storybookTestPath, type: 'sourceFile' };
-        }
-
         const resolveResult = resolveFunction(theContext, moduleName, platform);
 
         // Workaround for template files with invalid imports
diff --git a/packages/react-native/src/patchChannelForRN.ts b/packages/react-native/src/patchChannelForRN.ts
new file mode 100644
index 0000000000..c3ff7e5017
--- /dev/null
+++ b/packages/react-native/src/patchChannelForRN.ts
@@ -0,0 +1,81 @@
+import type { Channel } from 'storybook/internal/channels';
+
+/**
+ * React Native still pools synthetic events (unlike React DOM 17+).
+ * Storybook's serializeArg only recognises web SyntheticBaseEvent, so RN
+ * events pass through raw. When anything reads their properties after the
+ * current call-stack (render, transport stringify), the event has already
+ * been returned to the pool and every getter throws the "reused for
+ * performance reasons" warning.
+ *
+ * Instead of calling persist() (which keeps the event alive and retains
+ * references to native views), we snapshot the event into a plain object.
+ * This is safe for later access, serialization, and deep-equality checks.
+ */
+function snapshotValue(value: unknown, depth = 0): unknown {
+  if (depth > 3) return '[...]';
+  if (value === null || value === undefined) return value;
+  if (typeof value === 'function') return undefined;
+  if (typeof value !== 'object') return value;
+
+  if (Array.isArray(value)) {
+    return value.map((item) => snapshotValue(item, depth + 1));
+  }
+
+  const result: Record<string, unknown> = {};
+  for (const key of Object.keys(value)) {
+    try {
+      result[key] = snapshotValue((value as Record<string, unknown>)[key], depth + 1);
+    } catch {
+      result[key] = '[Error]';
+    }
+  }
+  return result;
+}
+
+function isSyntheticEvent(value: unknown): boolean {
+  return (
+    value !== null &&
+    typeof value === 'object' &&
+    typeof (value as any).persist === 'function' &&
+    'nativeEvent' in (value as any)
+  );
+}
+
+function sanitizeActionArgs(value: unknown): unknown {
+  if (isSyntheticEvent(value)) {
+    return snapshotValue(value);
+  }
+  if (Array.isArray(value)) {
+    return value.map(sanitizeActionArgs);
+  }
+  return value;
+}
+
+/**
+ * Patch a Channel so that action-event payloads have their RN synthetic
+ * events replaced with plain-object snapshots synchronously, before React
+ * recycles them back into the event pool.
+ */
+export function patchChannelForRN(channel: Channel): void {
+  /**
+   * Limit WebSocket serialization depth to avoid circular reference errors
+   * when action args contain React fiber nodes or other deep object graphs.
+   * The default maxDepth of 15 is too deep and causes blocking + crashes.
+   */
+  globalThis.CHANNEL_OPTIONS = {
+    maxDepth: 5,
+  };
+
+  const originalEmit = channel.emit.bind(channel);
+
+  channel.emit = (eventName: string, ...args: any[]) => {
+    if (eventName === 'storybook/actions/action-event') {
+      const actionDisplay = args[0];
+      if (actionDisplay?.data?.args != null) {
+        actionDisplay.data.args = sanitizeActionArgs(actionDisplay.data.args);
+      }
+    }
+    return originalEmit(eventName, ...args);
+  };
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 43a8f961da..155ed6f3ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -237,10 +237,10 @@ importers:
       react-native:
         specifier: '*'
         version: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -256,10 +256,10 @@ importers:
       react-native:
         specifier: '*'
         version: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -293,9 +293,6 @@ importers:
       react-native-modal-datetime-picker:
         specifier: ^18.0.0
         version: 18.0.0(@react-native-community/datetimepicker@8.6.0(expo@55.0.2)(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0))(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       tinycolor2:
         specifier: ^1.6.0
         version: 1.6.0
@@ -306,6 +303,9 @@ importers:
       cross-env:
         specifier: ^10.1.0
         version: 10.1.0
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       typescript:
         specifier: ~5.9.3
         version: 5.9.3
@@ -314,7 +314,7 @@ importers:
     dependencies:
       '@storybook/react':
         specifier: ^10
-        version: 10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
+        version: 10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
       '@storybook/react-native-theming':
         specifier: ^10.3.0-next.2
         version: link:../react-native-theming
@@ -324,13 +324,13 @@ importers:
       react-native:
         specifier: '*'
         version: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
       react-native-markdown-display:
         specifier: ^7.0.2
         version: 7.0.2(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       tsup:
         specifier: ^8.5.0
         version: 8.5.1(@swc/core@1.15.13)(jiti@1.21.7)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
@@ -479,7 +479,7 @@ importers:
         version: 1.0.0
       '@storybook/react':
         specifier: 10.3.0-alpha.12
-        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
+        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
       '@storybook/react-native-theming':
         specifier: ^10.3.0-next.2
         version: link:../react-native-theming
@@ -507,13 +507,13 @@ importers:
       react-native-svg:
         specifier: '>=14'
         version: 15.15.3(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
       '@types/react':
         specifier: ~19.2.14
         version: 19.2.14
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       tsup:
         specifier: ^8.5.0
         version: 8.5.1(@swc/core@1.15.13)(jiti@1.21.7)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
@@ -528,7 +528,7 @@ importers:
         version: 1.0.0
       '@storybook/react':
         specifier: 10.3.0-alpha.12
-        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
+        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
       '@storybook/react-native-theming':
         specifier: ^10.3.0-next.2
         version: link:../react-native-theming
@@ -544,9 +544,6 @@ importers:
       react-native:
         specifier: '>=0.57.0'
         version: 0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       ts-dedent:
         specifier: ^2.2.0
         version: 2.2.0
@@ -554,6 +551,9 @@ importers:
       '@types/react':
         specifier: ~19.2.14
         version: 19.2.14
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       tsup:
         specifier: ^8.5.0
         version: 8.5.1(@swc/core@1.15.13)(jiti@1.21.7)(postcss@8.5.6)(typescript@5.9.3)(yaml@2.8.2)
@@ -574,7 +574,7 @@ importers:
         version: 1.0.0
       '@storybook/react':
         specifier: 10.3.0-alpha.12
-        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
+        version: 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)
       '@storybook/react-native-theming':
         specifier: ^10.3.0-next.2
         version: link:../react-native-theming
@@ -593,13 +593,13 @@ importers:
       react-native-safe-area-context:
         specifier: ^5
         version: 5.7.0(react-native@0.83.2(@babel/core@7.29.0)(@types/react@19.2.14)(react@19.2.0))(react@19.2.0)
-      storybook:
-        specifier: '>=10 || ^10'
-        version: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     devDependencies:
       '@types/react':
         specifier: ~19.2.14
         version: 19.2.14
+      storybook:
+        specifier: 10.3.0-alpha.12
+        version: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       ts-dedent:
         specifier: ^2.2.0
         version: 2.2.0
@@ -9494,15 +9494,6 @@ packages:
     peerDependencies:
       storybook: '>= 7.0.0 < 8.5.0 || >= 9.0.0 < 10.0.0'
 
-  storybook@10.2.13:
-    resolution: {integrity: sha512-heMfJjOfbHvL+wlCAwFZlSxcakyJ5yQDam6e9k2RRArB1veJhRnsjO6lO1hOXjJYrqxfHA/ldIugbBVlCDqfvQ==}
-    hasBin: true
-    peerDependencies:
-      prettier: ^2 || ^3
-    peerDependenciesMeta:
-      prettier:
-        optional: true
-
   storybook@10.3.0-alpha.12:
     resolution: {integrity: sha512-DX/AtoRxT44bpQKmLHywLIS7MVV3IE2Iep60Ylk8ciUFhVKhhYP3E6xF4Vn+3HUK1eTkDuEl1EnYyVKUVgboTw==}
     hasBin: true
@@ -14484,17 +14475,11 @@ snapshots:
       - '@tmcp/auth'
       - typescript
 
-  '@storybook/react-dom-shim@10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))':
+  '@storybook/react-dom-shim@10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))':
     dependencies:
       react: 19.2.0
       react-dom: 19.2.0(react@19.2.0)
-      storybook: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-
-  '@storybook/react-dom-shim@10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))':
-    dependencies:
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-      storybook: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      storybook: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
 
   '@storybook/react-dom-shim@10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))':
     dependencies:
@@ -14544,28 +14529,14 @@ snapshots:
       - typescript
       - webpack
 
-  '@storybook/react@10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)':
+  '@storybook/react@10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))
+      '@storybook/react-dom-shim': 10.2.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))
       react: 19.2.0
       react-docgen: 8.0.2
       react-dom: 19.2.0(react@19.2.0)
-      storybook: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
-  '@storybook/react@10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(typescript@5.9.3)':
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 10.3.0-alpha.12(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0))
-      react: 19.2.0
-      react-docgen: 8.0.2
-      react-docgen-typescript: 2.2.2(typescript@5.9.3)
-      react-dom: 19.2.0(react@19.2.0)
-      storybook: 10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      storybook: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
     optionalDependencies:
       typescript: 5.9.3
     transitivePeerDependencies:
@@ -22162,29 +22133,6 @@ snapshots:
     dependencies:
       storybook: 10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
 
-  storybook@10.2.13(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
-    dependencies:
-      '@storybook/global': 5.0.0
-      '@storybook/icons': 2.0.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@testing-library/jest-dom': 6.9.1
-      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
-      '@vitest/expect': 3.2.4
-      '@vitest/spy': 3.2.4
-      esbuild: 0.27.3
-      open: 10.2.0
-      recast: 0.23.11
-      semver: 7.7.4
-      use-sync-external-store: 1.6.0(react@19.2.0)
-      ws: 8.19.0
-    optionalDependencies:
-      prettier: 3.8.1
-    transitivePeerDependencies:
-      - '@testing-library/dom'
-      - bufferutil
-      - react
-      - react-dom
-      - utf-8-validate
-
   storybook@10.3.0-alpha.12(@testing-library/dom@10.4.1)(prettier@3.8.1)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       '@storybook/global': 5.0.0

From 2a8f78f7258bb29c3bb25ee88f3695292ee6002d Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 21:53:39 +0000
Subject: [PATCH 08/20] chore: add example without factories

---
 .prettierignore                               |  1 +
 .../.rnstorybook-nofactories/index.tsx        | 41 +++++++++
 .../.rnstorybook-nofactories/main.ts          | 28 +++++++
 .../.rnstorybook-nofactories/preview.tsx      | 37 +++++++++
 .../storybook.requires.ts                     | 83 +++++++++++++++++++
 examples/expo-example/App.tsx                 |  7 +-
 examples/expo-example/metro.config.js         |  7 ++
 examples/expo-example/package.json            |  1 +
 8 files changed, 204 insertions(+), 1 deletion(-)
 create mode 100644 examples/expo-example/.rnstorybook-nofactories/index.tsx
 create mode 100644 examples/expo-example/.rnstorybook-nofactories/main.ts
 create mode 100644 examples/expo-example/.rnstorybook-nofactories/preview.tsx
 create mode 100644 examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts

diff --git a/.prettierignore b/.prettierignore
index eaf48a1e8f..3ea09995e2 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,6 +3,7 @@ pnpm-lock.yaml
 dist/
 examples/expo-example/.expo
 examples/expo-example/.rnstorybook/storybook.requires.ts
+examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
 docs/.docusaurus
 docs/build
 .claude/
diff --git a/examples/expo-example/.rnstorybook-nofactories/index.tsx b/examples/expo-example/.rnstorybook-nofactories/index.tsx
new file mode 100644
index 0000000000..be264b7cb0
--- /dev/null
+++ b/examples/expo-example/.rnstorybook-nofactories/index.tsx
@@ -0,0 +1,41 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { LiteUI } from '@storybook/react-native-ui-lite';
+import { StatusBar, View } from 'react-native';
+import { SafeAreaView, SafeAreaProvider } from 'react-native-safe-area-context';
+import { view } from './storybook.requires';
+
+const isScreenshotTesting = process.env.EXPO_PUBLIC_SCREENSHOT_TESTING === 'true';
+const isLiteUI = process.env.EXPO_PUBLIC_LITE_UI === 'true';
+
+const StorybookUIRoot = view.getStorybookUI({
+  shouldPersistSelection: true,
+  storage: {
+    getItem: AsyncStorage.getItem,
+    setItem: AsyncStorage.setItem,
+  },
+  enableWebsockets: true,
+
+  CustomUIComponent: isScreenshotTesting
+    ? ({ children, story }) => {
+        return (
+          <SafeAreaProvider>
+            <SafeAreaView style={{ flex: 1 }}>
+              <StatusBar hidden />
+              <View
+                style={{ flex: 1 }}
+                accessibilityLabel={story?.id}
+                testID={story?.id}
+                accessible
+              >
+                {children}
+              </View>
+            </SafeAreaView>
+          </SafeAreaProvider>
+        );
+      }
+    : isLiteUI
+      ? LiteUI
+      : undefined,
+});
+
+export default StorybookUIRoot;
diff --git a/examples/expo-example/.rnstorybook-nofactories/main.ts b/examples/expo-example/.rnstorybook-nofactories/main.ts
new file mode 100644
index 0000000000..d524e50c97
--- /dev/null
+++ b/examples/expo-example/.rnstorybook-nofactories/main.ts
@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-native';
+
+const main: StorybookConfig = {
+  stories: [
+    '../components/**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    '../other_components/**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    {
+      directory: '../../../packages/react-native-ui',
+      titlePrefix: 'react-native-ui',
+      files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    },
+  ],
+  addons: [
+    '@storybook/addon-ondevice-controls',
+    '@storybook/addon-ondevice-actions',
+    '@storybook/addon-ondevice-notes',
+    'storybook-addon-deep-controls',
+  ],
+  reactNative: {
+    playFn: false,
+  },
+  features: {
+    ondeviceBackgrounds: true,
+  },
+  framework: '@storybook/react-native',
+};
+
+export default main;
diff --git a/examples/expo-example/.rnstorybook-nofactories/preview.tsx b/examples/expo-example/.rnstorybook-nofactories/preview.tsx
new file mode 100644
index 0000000000..37d6c0ccaf
--- /dev/null
+++ b/examples/expo-example/.rnstorybook-nofactories/preview.tsx
@@ -0,0 +1,37 @@
+import { Appearance } from 'react-native';
+
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      storySort: {
+        method: 'alphabetical' as const,
+        includeNames: true,
+        order: ['ControlExamples', ['ControlExample'], 'InteractionExample', 'DeepControls'],
+      },
+    },
+    hideFullScreenButton: false,
+    noSafeArea: false,
+    my_param: 'anything',
+    layout: 'padded',
+    storybookUIVisibility: 'visible',
+    backgrounds: {
+      options: {
+        dark: { name: 'dark', value: '#333' },
+        light: { name: 'plain', value: '#fff' },
+        app: { name: 'app', value: '#eeeeee' },
+      },
+    },
+  },
+  initialGlobals: {
+    backgrounds: { value: Appearance.getColorScheme() === 'dark' ? 'dark' : 'plain' },
+  },
+};
+
+export default preview;
diff --git a/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts b/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
new file mode 100644
index 0000000000..8574dbe5ac
--- /dev/null
+++ b/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
@@ -0,0 +1,83 @@
+/* do not change this file, it is auto generated by storybook. */
+/// <reference types="@storybook/react-native/metro-env" />
+import { start, updateView, View, type Features } from '@storybook/react-native';
+
+import '@storybook/addon-ondevice-controls/register';
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-notes/register';
+import 'storybook-addon-deep-controls/register';
+
+const normalizedStories = [
+  {
+    titlePrefix: '',
+    directory: './components',
+    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    req: require.context(
+      '../components',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+  {
+    titlePrefix: '',
+    directory: './other_components',
+    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    req: require.context(
+      '../other_components',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+  {
+    titlePrefix: 'react-native-ui',
+    directory: '../../packages/react-native-ui',
+    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
+    importPathMatcher:
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    req: require.context(
+      '../../../packages/react-native-ui',
+      true,
+      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/
+    ),
+  },
+];
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+  var STORYBOOK_WEBSOCKET: { host: string; port: number } | undefined;
+  var FEATURES: Features;
+}
+
+const annotations = [
+  require('./preview'),
+  require('@storybook/react-native/preview'),
+  require('storybook-addon-deep-controls/preview'),
+];
+
+globalThis.STORIES = normalizedStories;
+globalThis.STORYBOOK_WEBSOCKET = { host: '192.168.1.172', port: 7007 };
+
+module?.hot?.accept?.();
+
+globalThis.FEATURES.ondeviceBackgrounds = true;
+
+const options = {
+  playFn: false,
+};
+
+if (!globalThis.view) {
+  globalThis.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    options,
+  });
+} else {
+  updateView(globalThis.view, annotations, normalizedStories, options);
+}
+
+export const view: View = globalThis.view;
diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx
index 9af8bc40d6..bb01807ff0 100644
--- a/examples/expo-example/App.tsx
+++ b/examples/expo-example/App.tsx
@@ -1,4 +1,9 @@
 // fixes fast refresh on web
 import '@expo/metro-runtime';
 
-export { default } from './.rnstorybook';
+const App =
+  process.env.EXPO_PUBLIC_NO_FACTORIES === 'true'
+    ? require('./.rnstorybook-nofactories').default
+    : require('./.rnstorybook').default;
+
+export default App;
diff --git a/examples/expo-example/metro.config.js b/examples/expo-example/metro.config.js
index b5890e6a68..6531f2abd3 100644
--- a/examples/expo-example/metro.config.js
+++ b/examples/expo-example/metro.config.js
@@ -22,9 +22,16 @@ defaultConfig.resolver.nodeModulesPaths = [
 
 const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
 const { withRozenite } = require('@rozenite/metro');
+
+const configPath =
+  process.env.EXPO_PUBLIC_NO_FACTORIES === 'true'
+    ? path.resolve(projectRoot, './.rnstorybook-nofactories')
+    : undefined;
+
 module.exports = withRozenite(
   withStorybook(defaultConfig, {
     enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
+    ...(configPath && { configPath }),
     websockets: 'auto',
     experimental_mcp: true,
   }),
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
index a0f91dd19e..78ff17dbe7 100644
--- a/examples/expo-example/package.json
+++ b/examples/expo-example/package.json
@@ -10,6 +10,7 @@
     "storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start",
     "storybook:lite": "EXPO_PUBLIC_STORYBOOK_ENABLED=true EXPO_PUBLIC_LITE_UI=true expo start",
     "storybook:test": "EXPO_PUBLIC_SCREENSHOT_TESTING=true EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start",
+    "storybook:nofactories": "EXPO_PUBLIC_STORYBOOK_ENABLED=true EXPO_PUBLIC_NO_FACTORIES=true expo start",
     "storybook:web": "storybook dev -p 6006",
     "build-web-storybook": "storybook build",
     "storybook-generate": "sb-rn-get-stories --host auto",

From ad9c38285ca29bea15dd5e5df7a3c5a01909c2cb Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 22:14:57 +0000
Subject: [PATCH 09/20] refactor: update type annotations in Start.tsx for
 improved type safety

- Changed annotations parameter type from any[] to ModuleExports[] in resolveAnnotations and getProjectAnnotations functions.
- Introduced a PreviewObject interface and isPreviewObject type guard for better handling of preview objects.
- Updated storyEntries type to use Record<string, unknown> instead of any for improved type clarity.
---
 packages/react-native/src/Start.tsx | 33 +++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index b9f876b8c0..a97a04ecb3 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -9,7 +9,7 @@ import {
 } from 'storybook/internal/preview-api';
 // NOTE this really should be exported from preview-api, but it's not
 import { Channel } from 'storybook/internal/channels';
-import type { NormalizedStoriesSpecifier } from 'storybook/internal/types';
+import type { ModuleExports, NormalizedStoriesSpecifier } from 'storybook/internal/types';
 import type { ReactRenderer } from '@storybook/react';
 import { View } from './View';
 import { prepareStories, type ReactNativeOptions } from './prepareStories';
@@ -28,16 +28,31 @@ globalThis.FEATURES = {
   backgrounds: false,
 };
 
+/** Shape of the opaque object returned by definePreview(). */
+interface PreviewObject {
+  _tag: 'Preview';
+  input: Record<string, unknown> & { addons?: unknown[] };
+}
+
+function isPreviewObject(value: unknown): value is PreviewObject {
+  return (
+    value != null &&
+    typeof value === 'object' &&
+    '_tag' in value &&
+    value._tag === 'Preview' &&
+    'input' in value
+  );
+}
+
 /**
  * If an annotation module's default export is a Preview object (from definePreview),
  * extract the user's plain config so composeConfigs can merge parameters properly.
  * definePreview wraps config in an opaque object that composeConfigs can't read.
  */
-function resolveAnnotations(annotations: any[]): any[] {
+function resolveAnnotations(annotations: ModuleExports[]): ModuleExports[] {
   return annotations.map((mod) => {
     const defaultExport = mod?.default ?? mod;
-    if (defaultExport?._tag === 'Preview' && defaultExport.input) {
-      // Extract user config fields, excluding addons (which definePreview handles internally)
+    if (isPreviewObject(defaultExport)) {
       const { addons: _addons, ...userConfig } = defaultExport.input;
       return { default: userConfig };
     }
@@ -45,7 +60,7 @@ function resolveAnnotations(annotations: any[]): any[] {
   });
 }
 
-export const getProjectAnnotations = (view: View, annotations: any[]) => async () =>
+export const getProjectAnnotations = (view: View, annotations: ModuleExports[]) => async () =>
   composeConfigs<ReactRenderer>([
     {
       renderToCanvas: (context) => {
@@ -71,8 +86,8 @@ export function start({
   storyEntries,
   options,
 }: {
-  storyEntries: (NormalizedStoriesSpecifier & { req: any })[];
-  annotations: any[];
+  storyEntries: (NormalizedStoriesSpecifier & { req: Record<string, unknown> })[];
+  annotations: ModuleExports[];
   options?: ReactNativeOptions;
 }) {
   const composedAnnotations = composeConfigs<ReactRenderer>(annotations);
@@ -170,8 +185,8 @@ export function start({
 
 export function updateView(
   viewInstance: View,
-  annotations: any[],
-  normalizedStories: (NormalizedStoriesSpecifier & { req: any })[],
+  annotations: ModuleExports[],
+  normalizedStories: (NormalizedStoriesSpecifier & { req: Record<string, unknown> })[],
   options?: ReactNativeOptions
 ) {
   const composedAnnotations = composeConfigs<ReactRenderer>(annotations);

From af21a9ef45af7a115b70035d689af7ebbf3f3058 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Fri, 27 Feb 2026 22:20:05 +0000
Subject: [PATCH 10/20] refactor: simplify type annotations in Start.tsx for
 clarity

- Updated storyEntries and normalizedStories types to use unknown instead of Record<string, unknown> for improved type flexibility.
---
 packages/react-native/src/Start.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index a97a04ecb3..dcc6b71f48 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -86,7 +86,7 @@ export function start({
   storyEntries,
   options,
 }: {
-  storyEntries: (NormalizedStoriesSpecifier & { req: Record<string, unknown> })[];
+  storyEntries: (NormalizedStoriesSpecifier & { req: unknown })[];
   annotations: ModuleExports[];
   options?: ReactNativeOptions;
 }) {
@@ -186,7 +186,7 @@ export function start({
 export function updateView(
   viewInstance: View,
   annotations: ModuleExports[],
-  normalizedStories: (NormalizedStoriesSpecifier & { req: Record<string, unknown> })[],
+  normalizedStories: (NormalizedStoriesSpecifier & { req: unknown })[],
   options?: ReactNativeOptions
 ) {
   const composedAnnotations = composeConfigs<ReactRenderer>(annotations);

From 0e44b1be8732591784457deca09625bc9e917ef8 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 28 Feb 2026 11:03:29 +0000
Subject: [PATCH 11/20] comment

---
 packages/react-native/src/Start.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index dcc6b71f48..ab5fdbfdc9 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -45,9 +45,17 @@ function isPreviewObject(value: unknown): value is PreviewObject {
 }
 
 /**
- * If an annotation module's default export is a Preview object (from definePreview),
- * extract the user's plain config so composeConfigs can merge parameters properly.
- * definePreview wraps config in an opaque object that composeConfigs can't read.
+ * definePreview() wraps the user's config in an opaque Preview object that
+ * composeConfigs can't read (it looks for top-level fields like `parameters`
+ * but Preview stores them inside `.input`).
+ *
+ * We can't use the Preview's `.composed` getter because it includes web-specific
+ * core annotations (test loaders, component-testing, measure, highlight, etc.)
+ * that depend on a browser/testing environment with act() support — none of
+ * which is available on-device in React Native.
+ *
+ * Instead we extract `.input` (the user's plain config) so composeConfigs
+ * can read the fields directly.
  */
 function resolveAnnotations(annotations: ModuleExports[]): ModuleExports[] {
   return annotations.map((mod) => {

From cc7ebfc6898eb3ef2b02a8601e740ef1d390c3f6 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 28 Feb 2026 15:32:25 +0000
Subject: [PATCH 12/20] roadmap update

---
 ROADMAP.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/ROADMAP.md b/ROADMAP.md
index 7507a05a3f..4e09810ff0 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -2,12 +2,12 @@
 
 For v11:
 
-- csf factories
-- backgrounds with globals
-- addons into core
-- make lite ui the default and remove dependencies from controls
+- [x] csf factories
+- [x] backgrounds with globals
+- [ ] addons into core
+- [ ] make lite ui the default and remove dependencies from controls
 
 stretch goals:
 
-- simple docs implementation
-- dev tooling like vscode extension and rn dev tools integration
+- [ ] simple docs implementation
+- [x] dev tooling like vscode extension and rn dev tools integration

From 8d69dcf820d696523a62051864d5b32d2e47ced3 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sat, 28 Feb 2026 15:39:54 +0000
Subject: [PATCH 13/20] feat: integrate theming support in ActionLogger and
 Inspect components

- Added '@storybook/react-native-theming' as a dependency for theming capabilities.
- Updated ActionLogger to use styled components for count text based on the current theme.
- Refactored Inspect component to utilize themed text styles for various data types, enhancing visual consistency and readability.
---
 packages/ondevice-actions/package.json        |   1 +
 .../src/components/ActionLogger/Inspect.tsx   | 104 +++++++++---------
 .../src/components/ActionLogger/index.tsx     |   9 +-
 pnpm-lock.yaml                                |   3 +
 4 files changed, 65 insertions(+), 52 deletions(-)

diff --git a/packages/ondevice-actions/package.json b/packages/ondevice-actions/package.json
index 5ffa7d97e8..1f5fea339a 100644
--- a/packages/ondevice-actions/package.json
+++ b/packages/ondevice-actions/package.json
@@ -28,6 +28,7 @@
     "check:types": "tsc --noEmit"
   },
   "dependencies": {
+    "@storybook/react-native-theming": "^10.3.0-next.2",
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {
diff --git a/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index 1dd5ca0695..9eb3c471fa 100644
--- a/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/packages/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -1,19 +1,39 @@
 import React, { useState } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
-
-const theme = {
-  OBJECT_NAME_COLOR: 'rgb(136, 19, 145)',
-  OBJECT_VALUE_NULL_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_UNDEFINED_COLOR: 'rgb(128, 128, 128)',
-  OBJECT_VALUE_REGEXP_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_STRING_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_SYMBOL_COLOR: 'rgb(196, 26, 22)',
-  OBJECT_VALUE_NUMBER_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_BOOLEAN_COLOR: 'rgb(28, 0, 207)',
-  OBJECT_VALUE_FUNCTION_PREFIX_COLOR: 'rgb(13, 34, 170)',
-
-  ARROW_COLOR: '#859499',
-};
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { styled } from '@storybook/react-native-theming';
+
+const DefaultText = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
+const ObjectNameText = styled.Text(({ theme }) => ({
+  color: theme.color.secondary,
+}));
+
+const MutedText = styled.Text(({ theme }) => ({
+  color: theme.textMutedColor,
+}));
+
+const StringText = styled.Text(({ theme }) => ({
+  color: theme.color.orange,
+}));
+
+const NumberText = styled.Text(({ theme }) => ({
+  color: theme.color.green,
+}));
+
+const BooleanText = styled.Text(({ theme }) => ({
+  color: theme.color.seafoam,
+}));
+
+const FunctionText = styled.Text(({ theme }) => ({
+  color: theme.color.purple,
+}));
+
+const ArrowText = styled.Text<{ visible: boolean }>(({ theme, visible }) => ({
+  color: visible ? theme.textMutedColor : 'transparent',
+  paddingRight: 8,
+}));
 
 interface InspectProps {
   name?: string;
@@ -32,15 +52,9 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
   }, [canExpand]);
 
-  const toggle = (
-    <Text style={{ color: canExpand ? theme.ARROW_COLOR : 'transparent', paddingRight: 8 }}>
-      {expanded ? '▼' : '▶'}
-    </Text>
-  );
+  const toggle = <ArrowText visible={!!canExpand}>{expanded ? '▼' : '▶'}</ArrowText>;
 
-  const nameComponent = name ? (
-    <Text style={{ color: theme.OBJECT_NAME_COLOR }}>{name}</Text>
-  ) : null;
+  const nameComponent = name ? <ObjectNameText>{name}</ObjectNameText> : null;
 
   if (Array.isArray(value)) {
     if (name) {
@@ -49,7 +63,7 @@ const Inspect = ({ name, value }: InspectProps) => {
           <TouchableOpacity onPress={toggleExpanded} style={styles.row}>
             {toggle}
             {nameComponent}
-            <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
+            <DefaultText>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</DefaultText>
           </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
@@ -59,7 +73,7 @@ const Inspect = ({ name, value }: InspectProps) => {
                 </View>
               ))}
               <View style={styles.spacingLeft}>
-                <Text>]</Text>
+                <DefaultText>]</DefaultText>
               </View>
             </View>
           ) : null}
@@ -68,13 +82,13 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
     return (
       <>
-        <Text>[</Text>
+        <DefaultText>[</DefaultText>
         {value.map((v, i) => (
           <View key={i} style={styles.spacingLeft}>
             <Inspect value={v} />
           </View>
         ))}
-        <Text>]</Text>
+        <DefaultText>]</DefaultText>
       </>
     );
   }
@@ -85,7 +99,7 @@ const Inspect = ({ name, value }: InspectProps) => {
           <TouchableOpacity style={styles.row} onPress={toggleExpanded}>
             {toggle}
             {nameComponent}
-            <Text>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</Text>
+            <DefaultText>{`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}</DefaultText>
           </TouchableOpacity>
           {expanded ? (
             <View style={styles.expanded}>
@@ -95,7 +109,7 @@ const Inspect = ({ name, value }: InspectProps) => {
                 </View>
               ))}
               <View style={styles.spacingLeft}>
-                <Text>{'}'}</Text>
+                <DefaultText>{'}'}</DefaultText>
               </View>
             </View>
           ) : null}
@@ -104,13 +118,13 @@ const Inspect = ({ name, value }: InspectProps) => {
     }
     return (
       <>
-        <Text>{'{'}</Text>
+        <DefaultText>{'{'}</DefaultText>
         {Object.entries(value).map(([key, v]) => (
           <View key={key}>
             <Inspect name={key} value={v} />
           </View>
         ))}
-        <Text>{'}'}</Text>
+        <DefaultText>{'}'}</DefaultText>
       </>
     );
   }
@@ -119,7 +133,7 @@ const Inspect = ({ name, value }: InspectProps) => {
       <View style={styles.row}>
         {toggle}
         {nameComponent}
-        <Text>: </Text>
+        <DefaultText>: </DefaultText>
         <Value value={value} />
       </View>
     );
@@ -129,35 +143,25 @@ const Inspect = ({ name, value }: InspectProps) => {
 
 function Value({ value }: { value: any }) {
   if (value === null) {
-    return <Text style={{ color: theme.OBJECT_VALUE_NULL_COLOR }}>null</Text>;
+    return <MutedText>null</MutedText>;
   }
   if (value === undefined) {
-    return <Text style={{ color: theme.OBJECT_VALUE_UNDEFINED_COLOR }}>undefined</Text>;
+    return <MutedText>undefined</MutedText>;
   }
   if (value instanceof RegExp) {
-    return (
-      <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {`/${value.source}/${value.flags}`}
-      </Text>
-    );
+    return <StringText>{`/${value.source}/${value.flags}`}</StringText>;
   }
   switch (typeof value) {
     case 'string':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_STRING_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <StringText>{JSON.stringify(value)}</StringText>;
     case 'number':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_NUMBER_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <NumberText>{JSON.stringify(value)}</NumberText>;
     case 'boolean':
-      return (
-        <Text style={{ color: theme.OBJECT_VALUE_BOOLEAN_COLOR }}>{JSON.stringify(value)}</Text>
-      );
+      return <BooleanText>{JSON.stringify(value)}</BooleanText>;
     case 'function':
-      return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+      return <FunctionText>[Function]</FunctionText>;
     default:
-      return <Text>{JSON.stringify(value)}</Text>;
+      return <DefaultText>{JSON.stringify(value)}</DefaultText>;
   }
 }
 
diff --git a/packages/ondevice-actions/src/components/ActionLogger/index.tsx b/packages/ondevice-actions/src/components/ActionLogger/index.tsx
index 41890370fd..8da0f192e3 100644
--- a/packages/ondevice-actions/src/components/ActionLogger/index.tsx
+++ b/packages/ondevice-actions/src/components/ActionLogger/index.tsx
@@ -1,7 +1,12 @@
 import { ActionDisplay } from 'storybook/actions';
-import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Button, ScrollView, StyleSheet, View } from 'react-native';
+import { styled } from '@storybook/react-native-theming';
 import Inspect from './Inspect';
 
+const CountText = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
 interface ActionLoggerProps {
   actions: ActionDisplay[];
   onClear: () => void;
@@ -13,7 +18,7 @@ export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
       <View>
         {actions.map((action: ActionDisplay) => (
           <View key={action.id} style={styles.row}>
-            <View>{action.count > 1 ? <Text>{action.count}</Text> : null}</View>
+            <View>{action.count > 1 ? <CountText>{action.count}</CountText> : null}</View>
             <View style={styles.grow}>
               <Inspect name={action.data.name} value={action.data.args || action.data} />
             </View>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 155ed6f3ed..b7a6ce4ea8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -228,6 +228,9 @@ importers:
 
   packages/ondevice-actions:
     dependencies:
+      '@storybook/react-native-theming':
+        specifier: ^10.3.0-next.2
+        version: link:../react-native-theming
       fast-deep-equal:
         specifier: ^3.1.3
         version: 3.1.3

From d84e366dfc4fc1eeae4999ae71e1beecea6210c4 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 15:56:07 +0000
Subject: [PATCH 14/20] fix: custom titles not working as expected

---
 .../FactoriesEdgeCases/CustomName.stories.tsx | 24 +++++++++++++++++
 .../ExcludeStories.stories.tsx                | 24 +++++++++++++++++
 .../IncludeStories.stories.tsx                | 24 +++++++++++++++++
 .../NestedTitle.stories.tsx                   | 19 ++++++++++++++
 .../PlayFunction.stories.tsx                  | 26 +++++++++++++++++++
 .../TestCase/TestCase.stories.tsx             | 13 +++++-----
 .../TestCase2/TestCase2.stories.tsx           | 13 +++++-----
 packages/react-native/src/prepareStories.ts   |  3 ++-
 8 files changed, 131 insertions(+), 15 deletions(-)
 create mode 100644 examples/expo-example/other_components/FactoriesEdgeCases/CustomName.stories.tsx
 create mode 100644 examples/expo-example/other_components/FactoriesEdgeCases/ExcludeStories.stories.tsx
 create mode 100644 examples/expo-example/other_components/FactoriesEdgeCases/IncludeStories.stories.tsx
 create mode 100644 examples/expo-example/other_components/FactoriesEdgeCases/NestedTitle.stories.tsx
 create mode 100644 examples/expo-example/other_components/FactoriesEdgeCases/PlayFunction.stories.tsx

diff --git a/examples/expo-example/other_components/FactoriesEdgeCases/CustomName.stories.tsx b/examples/expo-example/other_components/FactoriesEdgeCases/CustomName.stories.tsx
new file mode 100644
index 0000000000..106481459f
--- /dev/null
+++ b/examples/expo-example/other_components/FactoriesEdgeCases/CustomName.stories.tsx
@@ -0,0 +1,24 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const CustomNameComponent = ({ label }: { label: string }) => (
+  <View>
+    <Text>{label}</Text>
+  </View>
+);
+
+const meta = preview.meta({
+  title: 'FactoriesEdgeCases/Custom Name',
+  component: CustomNameComponent,
+});
+
+export default meta;
+
+export const StoryWithCustomName = meta.story({
+  name: 'My Custom Display Name',
+  args: { label: 'This story should show "My Custom Display Name" in the sidebar' },
+});
+
+export const StoryWithDefaultName = meta.story({
+  args: { label: 'This story should show "Story With Default Name" in the sidebar' },
+});
diff --git a/examples/expo-example/other_components/FactoriesEdgeCases/ExcludeStories.stories.tsx b/examples/expo-example/other_components/FactoriesEdgeCases/ExcludeStories.stories.tsx
new file mode 100644
index 0000000000..cc677eb3d4
--- /dev/null
+++ b/examples/expo-example/other_components/FactoriesEdgeCases/ExcludeStories.stories.tsx
@@ -0,0 +1,24 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const ExcludeComponent = ({ label }: { label: string }) => (
+  <View>
+    <Text>{label}</Text>
+  </View>
+);
+
+const meta = preview.meta({
+  title: 'FactoriesEdgeCases/Exclude Stories',
+  component: ExcludeComponent,
+  excludeStories: ['ShouldBeExcluded'],
+});
+
+export default meta;
+
+export const Visible = meta.story({
+  args: { label: 'This story should be visible' },
+});
+
+export const ShouldBeExcluded = meta.story({
+  args: { label: 'This story should NOT appear in the sidebar' },
+});
diff --git a/examples/expo-example/other_components/FactoriesEdgeCases/IncludeStories.stories.tsx b/examples/expo-example/other_components/FactoriesEdgeCases/IncludeStories.stories.tsx
new file mode 100644
index 0000000000..7de9370d33
--- /dev/null
+++ b/examples/expo-example/other_components/FactoriesEdgeCases/IncludeStories.stories.tsx
@@ -0,0 +1,24 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const IncludeComponent = ({ label }: { label: string }) => (
+  <View>
+    <Text>{label}</Text>
+  </View>
+);
+
+const meta = preview.meta({
+  title: 'FactoriesEdgeCases/Include Stories',
+  component: IncludeComponent,
+  includeStories: ['OnlyThisOne'],
+});
+
+export default meta;
+
+export const OnlyThisOne = meta.story({
+  args: { label: 'This story should be visible (included)' },
+});
+
+export const ShouldBeExcluded = meta.story({
+  args: { label: 'This story should NOT appear (not in includeStories)' },
+});
diff --git a/examples/expo-example/other_components/FactoriesEdgeCases/NestedTitle.stories.tsx b/examples/expo-example/other_components/FactoriesEdgeCases/NestedTitle.stories.tsx
new file mode 100644
index 0000000000..b21bf863a5
--- /dev/null
+++ b/examples/expo-example/other_components/FactoriesEdgeCases/NestedTitle.stories.tsx
@@ -0,0 +1,19 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const NestedTitleComponent = () => (
+  <View>
+    <Text>This story should appear under FactoriesEdgeCases / Nested / Deeply</Text>
+  </View>
+);
+
+const meta = preview.meta({
+  title: 'FactoriesEdgeCases/Nested/Deeply',
+  component: NestedTitleComponent,
+});
+
+export default meta;
+
+export const Basic = meta.story({
+  args: {},
+});
diff --git a/examples/expo-example/other_components/FactoriesEdgeCases/PlayFunction.stories.tsx b/examples/expo-example/other_components/FactoriesEdgeCases/PlayFunction.stories.tsx
new file mode 100644
index 0000000000..aa38387bad
--- /dev/null
+++ b/examples/expo-example/other_components/FactoriesEdgeCases/PlayFunction.stories.tsx
@@ -0,0 +1,26 @@
+import preview from '../../.rnstorybook/preview';
+import { Text, View } from 'react-native';
+
+const PlayComponent = ({ label }: { label: string }) => (
+  <View>
+    <Text testID="play-label">{label}</Text>
+  </View>
+);
+
+const meta = preview.meta({
+  title: 'FactoriesEdgeCases/Play Function',
+  component: PlayComponent,
+});
+
+export default meta;
+
+export const WithPlay = meta.story({
+  args: { label: 'Has a play function' },
+  play: async () => {
+    console.log('play function executed');
+  },
+});
+
+export const WithoutPlay = meta.story({
+  args: { label: 'No play function' },
+});
diff --git a/examples/expo-example/other_components/TestCase/TestCase.stories.tsx b/examples/expo-example/other_components/TestCase/TestCase.stories.tsx
index d8a3b27476..f86559b4b9 100644
--- a/examples/expo-example/other_components/TestCase/TestCase.stories.tsx
+++ b/examples/expo-example/other_components/TestCase/TestCase.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-native';
+import preview from '../../.rnstorybook/preview';
 import { useRef } from 'react';
 import { Text } from 'react-native';
 
@@ -7,14 +7,13 @@ const TestCase = () => {
   return <Text>{unstableRef}</Text>;
 };
 
-const meta = {
+const meta = preview.meta({
+  title: 'TestCase/Re-rendering',
   component: TestCase,
-} satisfies Meta<typeof TestCase>;
+});
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
+export const Basic = meta.story({
   args: {},
-};
+});
diff --git a/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx b/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx
index 4aab97065c..271496162a 100644
--- a/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx
+++ b/examples/expo-example/other_components/TestCase2/TestCase2.stories.tsx
@@ -1,18 +1,17 @@
-import { Meta, StoryObj } from '@storybook/react-native';
+import preview from '../../.rnstorybook/preview';
 import { Text } from 'react-native';
 
 const TestCase2 = () => {
   return <Text>Testing story globs and nested stories</Text>;
 };
 
-const meta = {
+const meta = preview.meta({
+  title: 'TestCase/Nested stories',
   component: TestCase2,
-} satisfies Meta<typeof TestCase2>;
+});
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
+export const Basic = meta.story({
   args: {},
-};
+});
diff --git a/packages/react-native/src/prepareStories.ts b/packages/react-native/src/prepareStories.ts
index e7c5bf6b8c..c2aac5e3e8 100644
--- a/packages/react-native/src/prepareStories.ts
+++ b/packages/react-native/src/prepareStories.ts
@@ -70,7 +70,8 @@ export function prepareStories({
           const exportValue = fileExports[key];
           if (!exportValue) return;
 
-          const title = makeTitle(filename, specifier, meta.title);
+          // CSF factories: preview.meta() stores title in meta.input.title, not meta.title
+          const title = makeTitle(filename, specifier, meta.title ?? meta.input?.title);
 
           if (title) {
             const nameFromExport = storyNameFromExport(key);

From 7e42bb2809ea0dd6de03d0a141b77fe5172c57f2 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 17:13:04 +0000
Subject: [PATCH 15/20] fix: use rn specific define preview and composition

---
 CLAUDE.md                                     |  52 +---
 .../storybook.requires.ts                     |  47 ++-
 packages/react-native/src/Start.tsx           |  44 +--
 packages/react-native/src/definePreview.tsx   | 289 ++++++++++++++++++
 packages/react-native/src/entry-preview.ts    |  24 ++
 packages/react-native/src/index.ts            |   2 +-
 packages/react-native/src/prepareStories.ts   |  22 +-
 packages/react-native/src/preview.ts          |  28 +-
 8 files changed, 363 insertions(+), 145 deletions(-)
 create mode 100644 packages/react-native/src/definePreview.tsx
 create mode 100644 packages/react-native/src/entry-preview.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 1b37209b03..c4d38da749 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1,33 +1,17 @@
 This file provides guidance to agents when working with code in this repository.
 
-Always check first if the react-native-best-practices skill can be used
+check available mcp and skills
 
-## Development Commands
-
-```bash
-# Initial Setup
-pnpm install
-pnpm build
-
-# Development
-pnpm dev        # Watch all packages for changes
-pnpm example    # Run the expo example app with Storybook
-
-# Story Generation
-pnpm -F expo-example storybook-generate # Regenerate storybook.requires.ts
-
-# Testing
-pnpm test       # Run unit tests across all packages
-pnpm test:ci    # Run tests in CI mode
-
-# Code Quality
-pnpm lint       # Run ESLint across the codebase
-pnpm format:check   # Check Prettier formatting
-pnpm format:fix     # Auto-fix Prettier formatting
-```
+use pnpm for commands, check package.json for scripts
 
 ## On-Device Testing Tools
 
+- use agent-device to control a simulator
+  - check `agent-device --help`
+- use rn-logs to get metro logs
+  - check `rn-logs logs --help`
+- use the storybook mcp to select stories and get story list
+
 ### agent-device (iOS/Android Simulator Control)
 
 Use `agent-device` to interact with iOS/Android simulators for testing the Storybook app:
@@ -39,19 +23,15 @@ agent-device click @e14                          # Click element by ref from sna
 agent-device find "Press me" click               # Find text and click it
 ```
 
-After relaunching, you need to press the app in Expo Go to open it (e.g. click the "Expo Example" entry).
+After relaunching, you need to press the "Expo Example" to go to it.
 
 ### rn-logs (React Native Log Streaming)
 
-Use `rn-logs` to stream console output from the running app:
-
 ```bash
 rn-logs apps                              # List running apps
 rn-logs logs --app "host.exp.Exponent"    # Stream logs from Expo Go
 ```
 
-Pipe through `grep` to filter: `rn-logs logs --app "host.exp.Exponent" 2>&1 | grep "KEYWORD"`
-
 ## Architecture Overview
 
 **pnpm workspaces monorepo** managed by Lerna containing React Native Storybook packages.
@@ -62,16 +42,6 @@ Pipe through `grep` to filter: `rn-logs logs --app "host.exp.Exponent" 2>&1 | gr
 2. **On-device UI** - Native UI that runs directly on mobile devices
 3. **Story requires generation** - Automatic generation of story imports via Metro (`storybook.requires.ts`)
 4. **Portable stories** - Reuse stories in unit tests via `universal-test-renderer`
-5. **fn() actions bridge** - `setupFnActionsBridge` in `storybook.requires.ts` bridges `fn()` mocks from `storybook/test` to the on-device actions panel. Must be called from user-land code (not package code) due to module identity — `storybook/test` uses a module-scoped listener Set.
-
-### Build System
-
-- Uses **tsup** for TypeScript compilation (ES2022, CommonJS output)
-- Each package has its own `tsup.config.ts`
-- `pnpm prepare` in a package builds it (or `pnpm -F @storybook/react-native prepare`)
-
-### Testing
+5. web storybook codebase can be referenced and likely can be found at ../storybook (from root)
 
-- Uses **jest** with `jest-expo` preset for example app tests
-- Story generation snapshots tested with Node's native test runner (`tests/scripts/`)
-- Update Node test runner snapshots: `cd tests && node --test-update-snapshots --test scripts/generate.test.ts scripts/docgen.test.ts`
+additional information in docs folder and readme file
diff --git a/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts b/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
index 8574dbe5ac..19fd2c4f1c 100644
--- a/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
+++ b/examples/expo-example/.rnstorybook-nofactories/storybook.requires.ts
@@ -2,18 +2,17 @@
 /// <reference types="@storybook/react-native/metro-env" />
 import { start, updateView, View, type Features } from '@storybook/react-native';
 
-import '@storybook/addon-ondevice-controls/register';
-import '@storybook/addon-ondevice-actions/register';
-import '@storybook/addon-ondevice-notes/register';
-import 'storybook-addon-deep-controls/register';
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-actions/register";
+import "@storybook/addon-ondevice-notes/register";
+import "storybook-addon-deep-controls/register";
 
 const normalizedStories = [
   {
-    titlePrefix: '',
-    directory: './components',
-    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    titlePrefix: "",
+    directory: "./components",
+    files: "**/!(*.factories).stories.?(ts|tsx|js|jsx)",
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
       '../components',
       true,
@@ -21,11 +20,10 @@ const normalizedStories = [
     ),
   },
   {
-    titlePrefix: '',
-    directory: './other_components',
-    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    titlePrefix: "",
+    directory: "./other_components",
+    files: "**/!(*.factories).stories.?(ts|tsx|js|jsx)",
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
       '../other_components',
       true,
@@ -33,19 +31,19 @@ const normalizedStories = [
     ),
   },
   {
-    titlePrefix: 'react-native-ui',
-    directory: '../../packages/react-native-ui',
-    files: '**/!(*.factories).stories.?(ts|tsx|js|jsx)',
-    importPathMatcher:
-      /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
+    titlePrefix: "react-native-ui",
+    directory: "../../packages/react-native-ui",
+    files: "**/!(*.factories).stories.?(ts|tsx|js|jsx)",
+    importPathMatcher: /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/,
     req: require.context(
       '../../../packages/react-native-ui',
       true,
       /^\.(?:(?:^|\/|(?:(?:(?!(?:^|\/)\.).)*?)\/)(?:(?!(?:[^/]*?\.factories))[^/]*?)\.stories\.(?:ts|tsx|js|jsx)?)$/
     ),
-  },
+  }
 ];
 
+
 declare global {
   var view: View;
   var STORIES: typeof normalizedStories;
@@ -53,10 +51,11 @@ declare global {
   var FEATURES: Features;
 }
 
+
 const annotations = [
   require('./preview'),
-  require('@storybook/react-native/preview'),
-  require('storybook-addon-deep-controls/preview'),
+  require("@storybook/react-native/preview"),
+  require('storybook-addon-deep-controls/preview')
 ];
 
 globalThis.STORIES = normalizedStories;
@@ -67,8 +66,8 @@ module?.hot?.accept?.();
 globalThis.FEATURES.ondeviceBackgrounds = true;
 
 const options = {
-  playFn: false,
-};
+  "playFn": false
+}
 
 if (!globalThis.view) {
   globalThis.view = start({
diff --git a/packages/react-native/src/Start.tsx b/packages/react-native/src/Start.tsx
index ab5fdbfdc9..f72fbab4a6 100644
--- a/packages/react-native/src/Start.tsx
+++ b/packages/react-native/src/Start.tsx
@@ -28,46 +28,6 @@ globalThis.FEATURES = {
   backgrounds: false,
 };
 
-/** Shape of the opaque object returned by definePreview(). */
-interface PreviewObject {
-  _tag: 'Preview';
-  input: Record<string, unknown> & { addons?: unknown[] };
-}
-
-function isPreviewObject(value: unknown): value is PreviewObject {
-  return (
-    value != null &&
-    typeof value === 'object' &&
-    '_tag' in value &&
-    value._tag === 'Preview' &&
-    'input' in value
-  );
-}
-
-/**
- * definePreview() wraps the user's config in an opaque Preview object that
- * composeConfigs can't read (it looks for top-level fields like `parameters`
- * but Preview stores them inside `.input`).
- *
- * We can't use the Preview's `.composed` getter because it includes web-specific
- * core annotations (test loaders, component-testing, measure, highlight, etc.)
- * that depend on a browser/testing environment with act() support — none of
- * which is available on-device in React Native.
- *
- * Instead we extract `.input` (the user's plain config) so composeConfigs
- * can read the fields directly.
- */
-function resolveAnnotations(annotations: ModuleExports[]): ModuleExports[] {
-  return annotations.map((mod) => {
-    const defaultExport = mod?.default ?? mod;
-    if (isPreviewObject(defaultExport)) {
-      const { addons: _addons, ...userConfig } = defaultExport.input;
-      return { default: userConfig };
-    }
-    return mod;
-  });
-}
-
 export const getProjectAnnotations = (view: View, annotations: ModuleExports[]) => async () =>
   composeConfigs<ReactRenderer>([
     {
@@ -86,7 +46,7 @@ export const getProjectAnnotations = (view: View, annotations: ModuleExports[])
         return <Component {...args} />;
       },
     },
-    ...resolveAnnotations(annotations),
+    ...annotations,
   ]);
 
 export function start({
@@ -167,7 +127,7 @@ export function start({
           return <Component {...args} />;
         },
       },
-      ...resolveAnnotations(annotations),
+      ...annotations,
     ]);
 
   const preview = new PreviewWithSelection<ReactRenderer>(
diff --git a/packages/react-native/src/definePreview.tsx b/packages/react-native/src/definePreview.tsx
new file mode 100644
index 0000000000..9c5b092389
--- /dev/null
+++ b/packages/react-native/src/definePreview.tsx
@@ -0,0 +1,289 @@
+import {
+  composeStory,
+  composeConfigs,
+  normalizeProjectAnnotations,
+} from 'storybook/internal/preview-api';
+import { combineTags } from 'storybook/internal/csf';
+import type {
+  ProjectAnnotations,
+  NormalizedProjectAnnotations,
+  ComponentAnnotations,
+  StoryAnnotations,
+} from 'storybook/internal/types';
+import type { ReactRenderer } from '@storybook/react';
+
+import * as rnEntryPreview from './entry-preview';
+
+// Helpers inlined from storybook internals
+const normalizeArrays = <T,>(array: T[] | T | undefined): T[] =>
+  Array.isArray(array) ? array : array ? [array] : [];
+
+const combineParameters = (...parameterSets: (Record<string, any> | undefined)[]): any => {
+  const defined = parameterSets.filter(Boolean) as Record<string, any>[];
+  const mergeKeys: Record<string, boolean> = {};
+
+  const combined = defined.reduce<Record<string, any>>((acc, parameters) => {
+    Object.entries(parameters).forEach(([key, value]) => {
+      const existing = acc[key];
+      if (Array.isArray(value) || typeof existing === 'undefined') {
+        acc[key] = value;
+      } else if (isPlainObject(value) && isPlainObject(existing)) {
+        mergeKeys[key] = true;
+      } else if (typeof value !== 'undefined') {
+        acc[key] = value;
+      }
+    });
+    return acc;
+  }, {});
+
+  Object.keys(mergeKeys).forEach((key) => {
+    const mergeValues = defined.map((p) => p[key]).filter((v) => typeof v !== 'undefined');
+    if (mergeValues.every(isPlainObject)) {
+      combined[key] = combineParameters(...mergeValues);
+    } else {
+      combined[key] = mergeValues[mergeValues.length - 1];
+    }
+  });
+
+  return combined;
+};
+
+function isPlainObject(obj: unknown): obj is Record<string, unknown> {
+  return obj != null && typeof obj === 'object' && !Array.isArray(obj);
+}
+
+// ---------------------------------------------------------------------------
+// RN render function – same as what Start.tsx currently inlines
+// ---------------------------------------------------------------------------
+const render = (args: any, context: any) => {
+  const { id, component: Component } = context;
+
+  if (!Component) {
+    throw new Error(
+      `Unable to render story ${id} as the component annotation is missing from the default export`
+    );
+  }
+
+  return <Component {...args} />;
+};
+
+// ---------------------------------------------------------------------------
+// definePreview – RN-specific (no getCoreAnnotations, no web addons)
+// ---------------------------------------------------------------------------
+type PreviewInput = ProjectAnnotations<ReactRenderer> & {
+  addons?: ProjectAnnotations<ReactRenderer>[];
+};
+
+interface RNPreview {
+  readonly _tag: 'Preview';
+  input: PreviewInput;
+  readonly composed: NormalizedProjectAnnotations<ReactRenderer>;
+  meta(input: ComponentAnnotations<ReactRenderer, any>): RNMeta;
+}
+
+interface RNMeta {
+  readonly _tag: 'Meta';
+  input: ComponentAnnotations<ReactRenderer, any>;
+  preview: RNPreview;
+  // Direct property access for prepareStories compatibility
+  readonly title: string | undefined;
+  readonly includeStories: any;
+  readonly excludeStories: any;
+  story(input?: any): RNStory;
+}
+
+interface RNStory {
+  readonly _tag: 'Story';
+  input: StoryAnnotations<ReactRenderer, any>;
+  meta: RNMeta;
+  readonly composed: {
+    args: any;
+    argTypes: any;
+    parameters: any;
+    id: string;
+    tags: string[];
+    name: string;
+    globals: any;
+  };
+  readonly play: ((...args: any[]) => any) | undefined;
+  Component: any;
+  run(context?: any): Promise<void>;
+  extend(input: StoryAnnotations<ReactRenderer, any>): RNStory;
+  test(name: string, fn: any): void;
+  test(name: string, annotations: any, fn: any): void;
+  __compose: () => any;
+  __children: RNStory[];
+}
+
+function defineStory(input: StoryAnnotations<ReactRenderer, any>, meta: RNMeta): RNStory {
+  let composed: any;
+
+  const compose = () => {
+    if (!composed) {
+      // Shallow-copy meta.input because composeStory mutates componentAnnotations.title
+      // (sets it to DEFAULT_STORY_TITLE when undefined). Without the copy, stories relying
+      // on auto-title from the file path would all get grouped under "Composed Story".
+      composed = composeStory(input, { ...meta.input }, undefined, meta.preview.composed);
+    }
+    return composed;
+  };
+
+  const __children: RNStory[] = [];
+
+  const story: RNStory = {
+    _tag: 'Story',
+    input,
+    meta,
+    __compose: compose,
+    __children,
+
+    get composed() {
+      const c = compose();
+      const { args, argTypes, parameters, id, tags, globals, storyName: name } = c;
+      return { args, argTypes, parameters, id, tags, name, globals };
+    },
+
+    // Return undefined when no user play function exists (not a noop like base storybook)
+    // This lets `typeof story.play === 'function'` correctly detect user-defined play
+    get play() {
+      const userPlay = input.play ?? meta.input?.play;
+      return userPlay ?? undefined;
+    },
+
+    async run(context?: any) {
+      await compose().run(context);
+    },
+
+    test(name: string, overridesOrTestFn: any, testFn?: any) {
+      const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
+      const testFunction = typeof overridesOrTestFn !== 'function' ? testFn : overridesOrTestFn;
+
+      const play = async (context: any) => {
+        if (story.play) await story.play(context);
+        await testFunction(context);
+      };
+
+      const test = story.extend({
+        ...annotations,
+        name,
+        tags: ['test', '!autodocs', ...(annotations.tags ?? [])],
+        play,
+      });
+
+      __children.push(test);
+      return test;
+    },
+
+    extend(input2: StoryAnnotations<ReactRenderer, any>) {
+      return defineStory(
+        {
+          ...input,
+          ...input2,
+          args: { ...(input.args || {}), ...(input2.args as any) },
+          argTypes: combineParameters(input.argTypes, input2.argTypes),
+          afterEach: [
+            ...normalizeArrays(input?.afterEach ?? []),
+            ...normalizeArrays(input2.afterEach ?? []),
+          ],
+          beforeEach: [
+            ...normalizeArrays(input?.beforeEach ?? []),
+            ...normalizeArrays(input2.beforeEach ?? []),
+          ],
+          decorators: [
+            ...normalizeArrays(input?.decorators ?? []),
+            ...normalizeArrays(input2.decorators ?? []),
+          ] as any,
+          globals: { ...(input as any).globals, ...(input2 as any).globals },
+          loaders: [
+            ...normalizeArrays(input?.loaders ?? []),
+            ...normalizeArrays(input2.loaders ?? []),
+          ],
+          parameters: combineParameters(input.parameters, input2.parameters),
+          tags: combineTags(...(input.tags ?? []), ...(input2.tags ?? [])),
+        },
+        meta
+      );
+    },
+
+    Component: undefined as any,
+  };
+
+  return story;
+}
+
+function defineMeta(input: ComponentAnnotations<ReactRenderer, any>, preview: RNPreview): RNMeta {
+  const metaInput = {
+    ...input,
+    parameters: { ...input.parameters, csfFactory: true },
+  };
+
+  const meta: RNMeta = {
+    _tag: 'Meta',
+    input: metaInput,
+    preview,
+
+    // Direct property access so prepareStories can read these without workarounds
+    get title() {
+      return metaInput.title;
+    },
+    get includeStories() {
+      return metaInput.includeStories;
+    },
+    get excludeStories() {
+      return metaInput.excludeStories;
+    },
+
+    story(storyInput: any = {}) {
+      const normalized = typeof storyInput === 'function' ? { render: storyInput } : storyInput;
+      const story = defineStory(normalized, meta);
+      // Set Component for portable story compat (same as @storybook/react)
+      story.Component = story.__compose();
+      return story;
+    },
+  };
+
+  return meta;
+}
+
+export function definePreview(input: PreviewInput): RNPreview {
+  let composed: NormalizedProjectAnnotations<ReactRenderer> | undefined;
+
+  const { addons, ...userConfig } = input;
+
+  const preview: RNPreview = {
+    // Spread user's config fields (parameters, decorators, etc.) at the top level
+    // so composeConfigs can read them directly without unwrapping.
+    ...userConfig,
+
+    _tag: 'Preview',
+    input,
+
+    get composed() {
+      if (composed) return composed;
+
+      composed = normalizeProjectAnnotations(
+        composeConfigs<ReactRenderer>([
+          // RN-specific annotations (renderer, argTypes enhancers, etc.)
+          rnEntryPreview,
+          // Include render function so composeStory works
+          { render },
+          // User-supplied addons
+          ...(addons ?? []),
+          // User's own config (parameters, decorators, etc.)
+          userConfig,
+        ])
+      );
+
+      return composed;
+    },
+
+    meta(metaInput: ComponentAnnotations<ReactRenderer, any>) {
+      return defineMeta(metaInput, preview);
+    },
+  };
+
+  // Set global so portable stories (composeStory without explicit config) work
+  globalThis.globalProjectAnnotations = preview.composed;
+
+  return preview;
+}
diff --git a/packages/react-native/src/entry-preview.ts b/packages/react-native/src/entry-preview.ts
new file mode 100644
index 0000000000..cfd15dd463
--- /dev/null
+++ b/packages/react-native/src/entry-preview.ts
@@ -0,0 +1,24 @@
+import { Platform } from 'react-native';
+import {
+  parameters as reactArgtypeParameters,
+  argTypesEnhancers,
+} from '@storybook/react/entry-preview-argtypes';
+
+// Workaround for Reanimated globals not being available on web.
+// Without these, the actions panel crashes with:
+// "ProgressTransitionRegister is not available on non-native platform"
+if (Platform.OS === 'web') {
+  // @ts-ignore
+  globalThis.ProgressTransitionRegister = {};
+  // @ts-ignore
+  globalThis.UpdatePropsManager = {};
+}
+
+export { argTypesEnhancers };
+
+export const parameters = {
+  renderer: 'react-native',
+  docs: {
+    extractArgTypes: reactArgtypeParameters.docs.extractArgTypes,
+  },
+};
diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts
index 9505c5e736..4874caac09 100644
--- a/packages/react-native/src/index.ts
+++ b/packages/react-native/src/index.ts
@@ -20,4 +20,4 @@ export type {
   StoryObj,
 } from '@storybook/react';
 
-export { __definePreview as definePreview } from '@storybook/react';
+export { definePreview } from './definePreview';
diff --git a/packages/react-native/src/prepareStories.ts b/packages/react-native/src/prepareStories.ts
index c2aac5e3e8..cc24ec4ddf 100644
--- a/packages/react-native/src/prepareStories.ts
+++ b/packages/react-native/src/prepareStories.ts
@@ -59,28 +59,30 @@ export function prepareStories({
     req.keys().forEach((filename: string) => {
       try {
         const fileExports = req(filename);
-        // TODO: should this be here?
         if (!fileExports.default) return;
         const meta = fileExports.default;
 
         Object.keys(fileExports).forEach((key) => {
           if (key === 'default') return;
-          if (!isExportStory(key, fileExports.default)) return;
+          if (!isExportStory(key, meta)) return;
 
           const exportValue = fileExports[key];
           if (!exportValue) return;
 
-          // CSF factories: preview.meta() stores title in meta.input.title, not meta.title
-          const title = makeTitle(filename, specifier, meta.title ?? meta.input?.title);
+          const title = makeTitle(filename, specifier, meta.title);
 
           if (title) {
             const nameFromExport = storyNameFromExport(key);
             const id = toId(title, nameFromExport);
 
-            let name = nameFromExport;
-
-            if (typeof exportValue === 'function') {
-              name = exportValue?.storyName || nameFromExport;
+            // For CSF factories, read the explicit name from input (avoids triggering
+            // composeStory which doesn't have the export name). For plain CSF, fall
+            // back to .name / .storyName / the export-derived name.
+            let name: string;
+            if (exportValue?._tag === 'Story') {
+              name = exportValue.input?.name ?? nameFromExport;
+            } else if (typeof exportValue === 'function') {
+              name = exportValue.storyName || nameFromExport;
             } else {
               name = exportValue?.name || exportValue?.storyName || nameFromExport;
             }
@@ -98,9 +100,9 @@ export function prepareStories({
             const importedStories = req(filename);
             const stories = Object.entries(importedStories).reduce(
               (carry, [storyKey, story]: [string, Readonly<Record<string, unknown>>]) => {
-                if (!isExportStory(storyKey, fileExports.default)) return carry;
+                if (!isExportStory(storyKey, meta)) return carry;
 
-                if (story.play && !options?.playFn) {
+                if (typeof story.play === 'function' && !options?.playFn) {
                   // play functions are not yet fully supported on native.
                   // There is a new option in main.js to turn them on for future use.
                   carry[storyKey] = { ...story, play: undefined };
diff --git a/packages/react-native/src/preview.ts b/packages/react-native/src/preview.ts
index 633cd81822..07deaa4c97 100644
--- a/packages/react-native/src/preview.ts
+++ b/packages/react-native/src/preview.ts
@@ -1,27 +1 @@
-import { Platform } from 'react-native';
-import {
-  parameters as reactParameters,
-  argTypesEnhancers,
-} from '@storybook/react/entry-preview-docs';
-import { type Preview } from '@storybook/react';
-
-// Workaround for Reanimated globals not being available on web.
-// Without these, the actions panel crashes with:
-// "ProgressTransitionRegister is not available on non-native platform"
-if (Platform.OS === 'web') {
-  // @ts-ignore
-  globalThis.ProgressTransitionRegister = {};
-  // @ts-ignore
-  globalThis.UpdatePropsManager = {};
-}
-
-const preview: Preview = {
-  argTypesEnhancers,
-  parameters: {
-    docs: {
-      extractArgTypes: reactParameters.docs.extractArgTypes,
-    },
-  },
-};
-
-export default preview;
+export { argTypesEnhancers, parameters } from './entry-preview';

From e5277efeedd881c5178cfa850df5c4eef79b716b Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 17:15:49 +0000
Subject: [PATCH 16/20] changeset

---
 .changeset/flat-impalas-press.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/flat-impalas-press.md

diff --git a/.changeset/flat-impalas-press.md b/.changeset/flat-impalas-press.md
new file mode 100644
index 0000000000..469572c3bd
--- /dev/null
+++ b/.changeset/flat-impalas-press.md
@@ -0,0 +1,5 @@
+---
+'@storybook/react-native': patch
+---
+
+feat: adds csf next support

From 6088e25acf73822255b25d87eee433e23cb8f563 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 17:39:13 +0000
Subject: [PATCH 17/20] fix: actions

---
 packages/react-native/src/definePreview.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-native/src/definePreview.tsx b/packages/react-native/src/definePreview.tsx
index 9c5b092389..b91d5d214b 100644
--- a/packages/react-native/src/definePreview.tsx
+++ b/packages/react-native/src/definePreview.tsx
@@ -3,7 +3,7 @@ import {
   composeConfigs,
   normalizeProjectAnnotations,
 } from 'storybook/internal/preview-api';
-import { combineTags } from 'storybook/internal/csf';
+import { combineTags, getCoreAnnotations } from 'storybook/internal/csf';
 import type {
   ProjectAnnotations,
   NormalizedProjectAnnotations,
@@ -265,6 +265,9 @@ export function definePreview(input: PreviewInput): RNPreview {
         composeConfigs<ReactRenderer>([
           // RN-specific annotations (renderer, argTypes enhancers, etc.)
           rnEntryPreview,
+          // Core addon annotations (actions, backgrounds, etc.)
+          // Web-only addons are disabled via globalThis.FEATURES flags
+          ...getCoreAnnotations(),
           // Include render function so composeStory works
           { render },
           // User-supplied addons

From 826b5467eb90ff84d0f024eb19f6ce5d5c4a7668 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 18:13:14 +0000
Subject: [PATCH 18/20] refactor: update .gitignore and enhance CLAUDE.md
 documentation

- Removed *.lerna_backup from .gitignore.
- Improved clarity in CLAUDE.md by consolidating testing tool commands and adding a new section on sending events to the channel server.
- Streamlined the agent-device section for better readability.
- Removed redundant architecture overview section to focus on key concepts.
---
 .gitignore                                  |   1 -
 CLAUDE.md                                   |  28 +-
 packages/react-native/src/definePreview.tsx | 317 ++++----------------
 3 files changed, 74 insertions(+), 272 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3362676108..3c9e66a0a8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,7 +10,6 @@ dist
 .cache
 junit.xml
 coverage/
-*.lerna_backup
 build
 /**/LICENSE
 docs/public
diff --git a/CLAUDE.md b/CLAUDE.md
index c4d38da749..ce02846438 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -6,15 +6,25 @@ use pnpm for commands, check package.json for scripts
 
 ## On-Device Testing Tools
 
-- use agent-device to control a simulator
-  - check `agent-device --help`
-- use rn-logs to get metro logs
-  - check `rn-logs logs --help`
+- use agent-device to control a simulator `agent-device --help`
+- use rn-logs to get metro logs `rn-logs logs --help`
 - use the storybook mcp to select stories and get story list
 
-### agent-device (iOS/Android Simulator Control)
+use curl to send events to channel server, such as to update the args:
+
+```sh
+curl -X POST http://localhost:7007/send-event \
+  -H "Content-Type: application/json" \
+  -d '{
+    "type": "updateStoryArgs",
+    "args": [{
+      "storyId": "controlexamples-controlexample--example",
+      "updatedArgs": { "name": "Alice", "age": 25 }
+    }]
+  }'
+```
 
-Use `agent-device` to interact with iOS/Android simulators for testing the Storybook app:
+### agent-device (iOS/Android Simulator Control)
 
 ```bash
 agent-device open host.exp.Exponent --relaunch  # Relaunch Expo Go
@@ -32,11 +42,7 @@ rn-logs apps                              # List running apps
 rn-logs logs --app "host.exp.Exponent"    # Stream logs from Expo Go
 ```
 
-## Architecture Overview
-
-**pnpm workspaces monorepo** managed by Lerna containing React Native Storybook packages.
-
-### Key Concepts
+## Key Concepts
 
 1. **CSF (Component Story Format)** - Standard story syntax
 2. **On-device UI** - Native UI that runs directly on mobile devices
diff --git a/packages/react-native/src/definePreview.tsx b/packages/react-native/src/definePreview.tsx
index b91d5d214b..016b4a157e 100644
--- a/packages/react-native/src/definePreview.tsx
+++ b/packages/react-native/src/definePreview.tsx
@@ -1,57 +1,10 @@
-import {
-  composeStory,
-  composeConfigs,
-  normalizeProjectAnnotations,
-} from 'storybook/internal/preview-api';
-import { combineTags, getCoreAnnotations } from 'storybook/internal/csf';
-import type {
-  ProjectAnnotations,
-  NormalizedProjectAnnotations,
-  ComponentAnnotations,
-  StoryAnnotations,
-} from 'storybook/internal/types';
+import { definePreview as definePreviewBase } from 'storybook/internal/csf';
+import type { PreviewAddon, InferTypes, Preview } from 'storybook/internal/csf';
+import type { ProjectAnnotations } from 'storybook/internal/types';
 import type { ReactRenderer } from '@storybook/react';
 
 import * as rnEntryPreview from './entry-preview';
 
-// Helpers inlined from storybook internals
-const normalizeArrays = <T,>(array: T[] | T | undefined): T[] =>
-  Array.isArray(array) ? array : array ? [array] : [];
-
-const combineParameters = (...parameterSets: (Record<string, any> | undefined)[]): any => {
-  const defined = parameterSets.filter(Boolean) as Record<string, any>[];
-  const mergeKeys: Record<string, boolean> = {};
-
-  const combined = defined.reduce<Record<string, any>>((acc, parameters) => {
-    Object.entries(parameters).forEach(([key, value]) => {
-      const existing = acc[key];
-      if (Array.isArray(value) || typeof existing === 'undefined') {
-        acc[key] = value;
-      } else if (isPlainObject(value) && isPlainObject(existing)) {
-        mergeKeys[key] = true;
-      } else if (typeof value !== 'undefined') {
-        acc[key] = value;
-      }
-    });
-    return acc;
-  }, {});
-
-  Object.keys(mergeKeys).forEach((key) => {
-    const mergeValues = defined.map((p) => p[key]).filter((v) => typeof v !== 'undefined');
-    if (mergeValues.every(isPlainObject)) {
-      combined[key] = combineParameters(...mergeValues);
-    } else {
-      combined[key] = mergeValues[mergeValues.length - 1];
-    }
-  });
-
-  return combined;
-};
-
-function isPlainObject(obj: unknown): obj is Record<string, unknown> {
-  return obj != null && typeof obj === 'object' && !Array.isArray(obj);
-}
-
 // ---------------------------------------------------------------------------
 // RN render function – same as what Start.tsx currently inlines
 // ---------------------------------------------------------------------------
@@ -68,225 +21,69 @@ const render = (args: any, context: any) => {
 };
 
 // ---------------------------------------------------------------------------
-// definePreview – RN-specific (no getCoreAnnotations, no web addons)
+// definePreview – RN-specific wrapper around base definePreview
 // ---------------------------------------------------------------------------
-type PreviewInput = ProjectAnnotations<ReactRenderer> & {
-  addons?: ProjectAnnotations<ReactRenderer>[];
-};
-
-interface RNPreview {
-  readonly _tag: 'Preview';
-  input: PreviewInput;
-  readonly composed: NormalizedProjectAnnotations<ReactRenderer>;
-  meta(input: ComponentAnnotations<ReactRenderer, any>): RNMeta;
-}
-
-interface RNMeta {
-  readonly _tag: 'Meta';
-  input: ComponentAnnotations<ReactRenderer, any>;
-  preview: RNPreview;
-  // Direct property access for prepareStories compatibility
-  readonly title: string | undefined;
-  readonly includeStories: any;
-  readonly excludeStories: any;
-  story(input?: any): RNStory;
-}
-
-interface RNStory {
-  readonly _tag: 'Story';
-  input: StoryAnnotations<ReactRenderer, any>;
-  meta: RNMeta;
-  readonly composed: {
-    args: any;
-    argTypes: any;
-    parameters: any;
-    id: string;
-    tags: string[];
-    name: string;
-    globals: any;
-  };
-  readonly play: ((...args: any[]) => any) | undefined;
-  Component: any;
-  run(context?: any): Promise<void>;
-  extend(input: StoryAnnotations<ReactRenderer, any>): RNStory;
-  test(name: string, fn: any): void;
-  test(name: string, annotations: any, fn: any): void;
-  __compose: () => any;
-  __children: RNStory[];
-}
-
-function defineStory(input: StoryAnnotations<ReactRenderer, any>, meta: RNMeta): RNStory {
-  let composed: any;
-
-  const compose = () => {
-    if (!composed) {
-      // Shallow-copy meta.input because composeStory mutates componentAnnotations.title
-      // (sets it to DEFAULT_STORY_TITLE when undefined). Without the copy, stories relying
-      // on auto-title from the file path would all get grouped under "Composed Story".
-      composed = composeStory(input, { ...meta.input }, undefined, meta.preview.composed);
-    }
-    return composed;
-  };
-
-  const __children: RNStory[] = [];
-
-  const story: RNStory = {
-    _tag: 'Story',
-    input,
-    meta,
-    __compose: compose,
-    __children,
-
-    get composed() {
-      const c = compose();
-      const { args, argTypes, parameters, id, tags, globals, storyName: name } = c;
-      return { args, argTypes, parameters, id, tags, name, globals };
-    },
-
-    // Return undefined when no user play function exists (not a noop like base storybook)
-    // This lets `typeof story.play === 'function'` correctly detect user-defined play
-    get play() {
-      const userPlay = input.play ?? meta.input?.play;
-      return userPlay ?? undefined;
-    },
-
-    async run(context?: any) {
-      await compose().run(context);
-    },
-
-    test(name: string, overridesOrTestFn: any, testFn?: any) {
-      const annotations = typeof overridesOrTestFn !== 'function' ? overridesOrTestFn : {};
-      const testFunction = typeof overridesOrTestFn !== 'function' ? testFn : overridesOrTestFn;
-
-      const play = async (context: any) => {
-        if (story.play) await story.play(context);
-        await testFunction(context);
-      };
-
-      const test = story.extend({
-        ...annotations,
-        name,
-        tags: ['test', '!autodocs', ...(annotations.tags ?? [])],
-        play,
-      });
-
-      __children.push(test);
-      return test;
-    },
-
-    extend(input2: StoryAnnotations<ReactRenderer, any>) {
-      return defineStory(
-        {
-          ...input,
-          ...input2,
-          args: { ...(input.args || {}), ...(input2.args as any) },
-          argTypes: combineParameters(input.argTypes, input2.argTypes),
-          afterEach: [
-            ...normalizeArrays(input?.afterEach ?? []),
-            ...normalizeArrays(input2.afterEach ?? []),
-          ],
-          beforeEach: [
-            ...normalizeArrays(input?.beforeEach ?? []),
-            ...normalizeArrays(input2.beforeEach ?? []),
-          ],
-          decorators: [
-            ...normalizeArrays(input?.decorators ?? []),
-            ...normalizeArrays(input2.decorators ?? []),
-          ] as any,
-          globals: { ...(input as any).globals, ...(input2 as any).globals },
-          loaders: [
-            ...normalizeArrays(input?.loaders ?? []),
-            ...normalizeArrays(input2.loaders ?? []),
-          ],
-          parameters: combineParameters(input.parameters, input2.parameters),
-          tags: combineTags(...(input.tags ?? []), ...(input2.tags ?? [])),
-        },
-        meta
-      );
-    },
-
-    Component: undefined as any,
-  };
-
-  return story;
-}
-
-function defineMeta(input: ComponentAnnotations<ReactRenderer, any>, preview: RNPreview): RNMeta {
-  const metaInput = {
+export function definePreview<Addons extends PreviewAddon<never>[]>(
+  input: { addons: Addons } & ProjectAnnotations<ReactRenderer & InferTypes<Addons>>
+): Preview<ReactRenderer & InferTypes<Addons>> {
+  const preview = definePreviewBase({
     ...input,
-    parameters: { ...input.parameters, csfFactory: true },
-  };
-
-  const meta: RNMeta = {
-    _tag: 'Meta',
-    input: metaInput,
-    preview,
-
-    // Direct property access so prepareStories can read these without workarounds
-    get title() {
-      return metaInput.title;
-    },
-    get includeStories() {
-      return metaInput.includeStories;
-    },
-    get excludeStories() {
-      return metaInput.excludeStories;
-    },
-
-    story(storyInput: any = {}) {
-      const normalized = typeof storyInput === 'function' ? { render: storyInput } : storyInput;
-      const story = defineStory(normalized, meta);
-      // Set Component for portable story compat (same as @storybook/react)
-      story.Component = story.__compose();
-      return story;
-    },
-  };
-
-  return meta;
-}
-
-export function definePreview(input: PreviewInput): RNPreview {
-  let composed: NormalizedProjectAnnotations<ReactRenderer> | undefined;
+    addons: [rnEntryPreview, { render }, ...(input.addons ?? [])],
+  }) as Preview<ReactRenderer & InferTypes<Addons>>;
 
+  // Spread userConfig for Start.tsx compat (composeConfigs reads fields directly)
   const { addons, ...userConfig } = input;
+  Object.assign(preview, userConfig);
+
+  // Wrap meta() for RN-specific behaviors
+  const origMeta = preview.meta.bind(preview);
+  preview.meta = (metaInput: any) => {
+    const meta = origMeta(metaInput);
+
+    // Expose title/includeStories/excludeStories directly for prepareStories.
+    // Base Meta only has these on `.input`, but prepareStories reads `meta.title`
+    // and `isExportStory(key, meta)` destructures `{ includeStories, excludeStories }`.
+    Object.defineProperties(meta, {
+      title: { get: () => meta.input.title, enumerable: true, configurable: true },
+      includeStories: {
+        get: () => meta.input.includeStories,
+        enumerable: true,
+        configurable: true,
+      },
+      excludeStories: {
+        get: () => meta.input.excludeStories,
+        enumerable: true,
+        configurable: true,
+      },
+    });
 
-  const preview: RNPreview = {
-    // Spread user's config fields (parameters, decorators, etc.) at the top level
-    // so composeConfigs can read them directly without unwrapping.
-    ...userConfig,
-
-    _tag: 'Preview',
-    input,
-
-    get composed() {
-      if (composed) return composed;
+    // Wrap story() for RN-specific behaviors
+    const origStory = meta.story.bind(meta);
+    meta.story = (storyInput: any) => {
+      const story = origStory(storyInput);
+
+      // Lazy Component — avoids eager composeStory which mutates meta.input.title
+      // to "Composed Story". On RN, prepareStories reads meta.title at runtime.
+      Object.defineProperty(story, 'Component', {
+        get: () => (story as any).__compose(),
+        enumerable: true,
+        configurable: true,
+      });
 
-      composed = normalizeProjectAnnotations(
-        composeConfigs<ReactRenderer>([
-          // RN-specific annotations (renderer, argTypes enhancers, etc.)
-          rnEntryPreview,
-          // Core addon annotations (actions, backgrounds, etc.)
-          // Web-only addons are disabled via globalThis.FEATURES flags
-          ...getCoreAnnotations(),
-          // Include render function so composeStory works
-          { render },
-          // User-supplied addons
-          ...(addons ?? []),
-          // User's own config (parameters, decorators, etc.)
-          userConfig,
-        ])
-      );
+      // play returns undefined (not noop) when no user play function.
+      // Base returns `async () => {}`, making `typeof story.play === 'function'` always true.
+      // RN needs `undefined` for play detection in prepareStories.
+      Object.defineProperty(story, 'play', {
+        get: () => (story.input.play ?? meta.input?.play) || undefined,
+        enumerable: true,
+        configurable: true,
+      });
 
-      return composed;
-    },
+      return story;
+    };
 
-    meta(metaInput: ComponentAnnotations<ReactRenderer, any>) {
-      return defineMeta(metaInput, preview);
-    },
+    return meta;
   };
 
-  // Set global so portable stories (composeStory without explicit config) work
-  globalThis.globalProjectAnnotations = preview.composed;
-
   return preview;
 }

From d8783c5e891a56626f17c10aec1e420f58ddecf7 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 18:28:36 +0000
Subject: [PATCH 19/20] fix: type inference

---
 packages/react-native/package.json          |   1 +
 packages/react-native/src/definePreview.tsx | 133 ++++++++++++++++++--
 packages/react-native/src/index.ts          |   1 +
 pnpm-lock.yaml                              |   3 +
 4 files changed, 128 insertions(+), 10 deletions(-)

diff --git a/packages/react-native/package.json b/packages/react-native/package.json
index e6ba202415..586b29dc7b 100644
--- a/packages/react-native/package.json
+++ b/packages/react-native/package.json
@@ -64,6 +64,7 @@
     "glob": "^13.0.0",
     "react-native-url-polyfill": "^3.0.0",
     "setimmediate": "^1.0.5",
+    "type-fest": "~2.19",
     "tmcp": "^1.16.0",
     "valibot": "^1.2.0",
     "ws": "^8.18.3"
diff --git a/packages/react-native/src/definePreview.tsx b/packages/react-native/src/definePreview.tsx
index 016b4a157e..42536ab6f2 100644
--- a/packages/react-native/src/definePreview.tsx
+++ b/packages/react-native/src/definePreview.tsx
@@ -1,12 +1,125 @@
+import type { ComponentType } from 'react';
+
 import { definePreview as definePreviewBase } from 'storybook/internal/csf';
-import type { PreviewAddon, InferTypes, Preview } from 'storybook/internal/csf';
-import type { ProjectAnnotations } from 'storybook/internal/types';
+import type {
+  PreviewAddon,
+  AddonTypes,
+  InferTypes,
+  Meta,
+  Preview,
+  Story,
+} from 'storybook/internal/csf';
+import type {
+  Args,
+  ArgsStoryFn,
+  ComponentAnnotations,
+  DecoratorFunction,
+  ProjectAnnotations,
+  Renderer,
+  StoryAnnotations,
+} from 'storybook/internal/types';
+
+import type { SetOptional, Simplify, UnionToIntersection, RemoveIndexSignature } from 'type-fest';
+
 import type { ReactRenderer } from '@storybook/react';
 
 import * as rnEntryPreview from './entry-preview';
 
 // ---------------------------------------------------------------------------
-// RN render function – same as what Start.tsx currently inlines
+// Types — simplified from @storybook/react's ReactPreview/ReactMeta/ReactStory
+// ---------------------------------------------------------------------------
+
+// React Native uses ReactRenderer as its renderer type
+type RNRenderer = ReactRenderer;
+
+/** Extracts and unions all args types from an array of decorators. */
+type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<
+  Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown
+>;
+
+type InferArgs<TArgs, T, Decorators> = Simplify<
+  TArgs & Simplify<RemoveIndexSignature<DecoratorsArgs<RNRenderer & T, Decorators>>>
+>;
+
+type InferRNTypes<T, TArgs, Decorators> = RNRenderer &
+  T & { args: Simplify<InferArgs<TArgs, T, Decorators>> };
+
+// @ts-ignore meta() return type is intentionally narrowed from base Preview
+export interface RNPreview<T extends AddonTypes> extends Preview<RNRenderer & T> {
+  type<R>(): RNPreview<T & R>;
+
+  meta<
+    TArgs extends Args,
+    Decorators extends DecoratorFunction<RNRenderer & T, any>,
+    TMetaArgs extends Partial<TArgs & T['args']>,
+  >(
+    meta: {
+      render?: ArgsStoryFn<RNRenderer & T, TArgs & T['args']>;
+      component?: ComponentType<TArgs>;
+      decorators?: Decorators | Decorators[];
+      args?: TMetaArgs;
+    } & Omit<
+      ComponentAnnotations<RNRenderer & T, TArgs>,
+      'decorators' | 'component' | 'args' | 'render'
+    >
+  ): RNMeta<
+    InferRNTypes<T, TArgs, Decorators>,
+    Omit<ComponentAnnotations<InferRNTypes<T, TArgs, Decorators>>, 'args'> & {
+      // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+      args: Partial<TArgs> extends TMetaArgs ? {} : TMetaArgs;
+    }
+  >;
+}
+
+export interface RNMeta<
+  T extends RNRenderer,
+  MetaInput extends ComponentAnnotations<T>,
+> extends Meta<T, MetaInput> {
+  // Overload: render function (no args needed)
+  story<
+    TInput extends
+      | (() => RNRenderer['storyResult'])
+      | (StoryAnnotations<T, T['args']> & {
+          render: () => RNRenderer['storyResult'];
+        }),
+  >(
+    story: TInput
+  ): RNStory<T, TInput extends () => RNRenderer['storyResult'] ? { render: TInput } : TInput>;
+
+  // Overload: story with args/config
+  story<
+    TInput extends Simplify<
+      StoryAnnotations<
+        T,
+        T['args'],
+        SetOptional<T['args'], keyof T['args'] & keyof MetaInput['args']>
+      >
+    >,
+  >(
+    story: TInput
+  ): RNStory<T, TInput>;
+
+  // Overload: no-arg story (only when all required args are in meta)
+  story(
+    ..._args: Partial<T['args']> extends SetOptional<
+      T['args'],
+      keyof T['args'] & keyof MetaInput['args']
+    >
+      ? []
+      : [never]
+    // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  ): RNStory<T, {}>;
+}
+
+export interface RNStory<
+  T extends RNRenderer,
+  TInput extends StoryAnnotations<T, T['args']>,
+> extends Story<T, TInput> {
+  Component: ComponentType<Partial<T['args']>>;
+}
+
+// ---------------------------------------------------------------------------
+// RN render function
 // ---------------------------------------------------------------------------
 const render = (args: any, context: any) => {
   const { id, component: Component } = context;
@@ -24,12 +137,12 @@ const render = (args: any, context: any) => {
 // definePreview – RN-specific wrapper around base definePreview
 // ---------------------------------------------------------------------------
 export function definePreview<Addons extends PreviewAddon<never>[]>(
-  input: { addons: Addons } & ProjectAnnotations<ReactRenderer & InferTypes<Addons>>
-): Preview<ReactRenderer & InferTypes<Addons>> {
+  input: { addons: Addons } & ProjectAnnotations<RNRenderer & InferTypes<Addons>>
+): RNPreview<RNRenderer & InferTypes<Addons>> {
   const preview = definePreviewBase({
     ...input,
     addons: [rnEntryPreview, { render }, ...(input.addons ?? [])],
-  }) as Preview<ReactRenderer & InferTypes<Addons>>;
+  }) as unknown as RNPreview<RNRenderer & InferTypes<Addons>>;
 
   // Spread userConfig for Start.tsx compat (composeConfigs reads fields directly)
   const { addons, ...userConfig } = input;
@@ -37,8 +150,8 @@ export function definePreview<Addons extends PreviewAddon<never>[]>(
 
   // Wrap meta() for RN-specific behaviors
   const origMeta = preview.meta.bind(preview);
-  preview.meta = (metaInput: any) => {
-    const meta = origMeta(metaInput);
+  preview.meta = (_input) => {
+    const meta = origMeta(_input);
 
     // Expose title/includeStories/excludeStories directly for prepareStories.
     // Base Meta only has these on `.input`, but prepareStories reads `meta.title`
@@ -59,8 +172,8 @@ export function definePreview<Addons extends PreviewAddon<never>[]>(
 
     // Wrap story() for RN-specific behaviors
     const origStory = meta.story.bind(meta);
-    meta.story = (storyInput: any) => {
-      const story = origStory(storyInput);
+    meta.story = (__input: any) => {
+      const story = origStory(__input);
 
       // Lazy Component — avoids eager composeStory which mutates meta.input.title
       // to "Composed Story". On RN, prepareStories reads meta.title at runtime.
diff --git a/packages/react-native/src/index.ts b/packages/react-native/src/index.ts
index 4874caac09..141fa58774 100644
--- a/packages/react-native/src/index.ts
+++ b/packages/react-native/src/index.ts
@@ -21,3 +21,4 @@ export type {
 } from '@storybook/react';
 
 export { definePreview } from './definePreview';
+export type { RNPreview, RNMeta, RNStory } from './definePreview';
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9feb458d6b..8d831e81b2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -401,6 +401,9 @@ importers:
       tmcp:
         specifier: ^1.16.0
         version: 1.19.2(typescript@5.9.3)
+      type-fest:
+        specifier: ~2.19
+        version: 2.19.0
       valibot:
         specifier: ^1.2.0
         version: 1.2.0(typescript@5.9.3)

From cdfe8baf362962f517166107439f2e9c607247c7 Mon Sep 17 00:00:00 2001
From: Daniel Williams <dannyhyunsoowilliams@gmail.com>
Date: Sun, 1 Mar 2026 18:34:36 +0000
Subject: [PATCH 20/20] fix

---
 .../DeepControls/DeepControls.factories.stories.tsx           | 4 ++--
 examples/expo-example/scripts/build-index.ts                  | 1 -
 examples/expo-example/scripts/generatePerfTests.ts            | 1 -
 examples/expo-example/scripts/start-channel-server.ts         | 1 -
 4 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx b/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
index 3301ebf145..a16d9d60fa 100644
--- a/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
+++ b/examples/expo-example/components/DeepControls/DeepControls.factories.stories.tsx
@@ -42,8 +42,8 @@ export const Basic = meta.story({
       },
     },
   },
+  // Deep controls currently broken for factories
   argTypes: {
-    // @ts-expect-error
     'objectArg.enumString': {
       control: 'radio',
       options: ['value1', 'value2', 'value3'],
@@ -63,5 +63,5 @@ export const Basic = meta.story({
     'objectArg.nested.number': {
       control: 'number',
     },
-  },
+  } as any,
 });
diff --git a/examples/expo-example/scripts/build-index.ts b/examples/expo-example/scripts/build-index.ts
index 638d18fe1d..63a27a3d1a 100644
--- a/examples/expo-example/scripts/build-index.ts
+++ b/examples/expo-example/scripts/build-index.ts
@@ -5,7 +5,6 @@ import fs from 'fs';
 import { fileURLToPath } from 'url';
 import { buildIndex } from '@storybook/react-native/node';
 
-// @ts-expect-error - import.meta.url is supported at runtime with tsx
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const configPath = path.resolve(__dirname, '../.rnstorybook');
diff --git a/examples/expo-example/scripts/generatePerfTests.ts b/examples/expo-example/scripts/generatePerfTests.ts
index 18ee7be190..11ed9ec595 100644
--- a/examples/expo-example/scripts/generatePerfTests.ts
+++ b/examples/expo-example/scripts/generatePerfTests.ts
@@ -37,7 +37,6 @@ export const seventeen: StoryObj<typeof Test${num}> = {}
 export const eighteen: StoryObj<typeof Test${num}> = {}
 export const nineteen: StoryObj<typeof Test${num}> = {}`;
 // ESM doesn't provide __dirname natively, so use import.meta.url workaround
-// @ts-expect-error - import meta is here but sigh...
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
diff --git a/examples/expo-example/scripts/start-channel-server.ts b/examples/expo-example/scripts/start-channel-server.ts
index c671b06ee1..f0f183bc8b 100644
--- a/examples/expo-example/scripts/start-channel-server.ts
+++ b/examples/expo-example/scripts/start-channel-server.ts
@@ -4,7 +4,6 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { createChannelServer } from '@storybook/react-native/node';
 
-// @ts-expect-error we run with esm
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const configPath = path.resolve(__dirname, '../.rnstorybook');