@storybook/react-native 10.0.0-rc.1 → 10.0.0

package/dist/metro/withStorybook.d.ts

@@ -60,9 +60,8 @@ interface WithStorybookOptions {
  * @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
  *                       When true, generates storybook.requires.js instead of storybook.requires.ts.
  *                       Defaults to false.
- * @param options.removeStorybook - If enabled is false and this is true, attempts to remove
- *                                          storybook modules from the JavaScript bundle to reduce bundle size.
- *                                          Defaults to false.
+ * @param options.enabled - If false, attempts to remove storybook modules from the JavaScript
+ *                         bundle to reduce bundle size. Defaults to true.
  * @param options.docTools - Whether to include doc tools in the storybook.requires file.
  *                          Doc tools provide additional documentation features. Defaults to true.
  * @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
@@ -107,7 +106,7 @@ interface WithStorybookOptions {
  *
  * const config = getDefaultConfig(__dirname);
  * module.exports = withStorybook(config, {
- *   removeStorybook: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== "true",
+ *   enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === "true",
  * });
  * ```
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "10.0.0-rc.1",
+  "version": "10.0.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -49,10 +49,10 @@
   },
   "dependencies": {
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "10.0.0-rc.1",
-    "@storybook/react-native-theming": "^10.0.0-rc.1",
-    "@storybook/react-native-ui": "^10.0.0-rc.1",
-    "@storybook/react-native-ui-common": "^10.0.0-rc.1",
+    "@storybook/react": "^10.0.0",
+    "@storybook/react-native-theming": "^10.0.0",
+    "@storybook/react-native-ui": "^10.0.0",
+    "@storybook/react-native-ui-common": "^10.0.0",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
@@ -74,7 +74,7 @@
     "jotai": "^2.6.2",
     "react": "19.1.0",
     "react-native": "0.81.4",
-    "storybook": "10.0.0-rc.1",
+    "storybook": "^10.0.0",
     "tsup": "^8.5.0",
     "typescript": "~5.9.2",
     "universal-test-renderer": "^0.6.0"
@@ -86,7 +86,7 @@
     "react-native-gesture-handler": ">=2",
     "react-native-reanimated": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": ">=10 || 10.0.0-beta.0 || ^10"
+    "storybook": ">=10 || ^10"
   },
   "peerDependenciesMeta": {
     "@gorhom/bottom-sheet": {
@@ -108,5 +108,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b1b99bb72fa5713564390e65d556f1ec47c8c7b3"
+  "gitHead": "f2af5e230aac4cd858f2d73909868ae4952eb1c1"
 }

package/readme.md

@@ -1,13 +1,17 @@
 # Storybook for React Native
 
-> This readme is for v9, for v8 docs see the [v8.6 docs](https://github.com/storybookjs/react-native/tree/v8.6.0-stable).
+A new docs site is being built for Storybook for React Native, you can find it at https://storybookjs.github.io/react-native/docs/intro/.
+
+> [!IMPORTANT]
+> This readme is for v10, for v9 docs see the [v9.1 docs](https://github.com/storybookjs/react-native/tree/v9.1.4).
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-If you are migrating from 8 to 9 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-8-to-9)
+If you are migrating from 9 to 10 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-9-to-10)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
+> [!NOTE]  
 > Make sure you align your storybook dependencies to the same major version or you will see broken behaviour.
 
 ![picture of storybook](https://github.com/user-attachments/assets/cf98766d-8b90-44ab-b718-94ab16e63205)
@@ -79,23 +83,23 @@ Then wrap your config in the withStorybook function as seen below.
 
 ```js
 // metro.config.js
-const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
-const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
 
-/** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
+// For basic usage with all defaults, this is all you need
+module.exports = withStorybook(config);
+
+// Or customize the options
 module.exports = withStorybook(config, {
-  // Set to false to remove storybook specific options
-  // you can also use a env variable to set this
-  enabled: true,
-  // Path to your storybook config
-  configPath: path.resolve(__dirname, './.rnstorybook'),
-  // note that this is the default so you can the config path blank if you use .rnstorybook
+  // When false, removes Storybook from bundle (useful for production)
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
 
-  // Optional websockets configuration
-  // Starts a websocket server on the specified port and host on metro start
+  // Path to your storybook config (default: './.rnstorybook')
+  configPath: './.rnstorybook',
+
+  // Optional websockets configuration for syncing between devices
   // websockets: {
   //   port: 7007,
   //   host: 'localhost',
@@ -107,8 +111,8 @@ module.exports = withStorybook(config, {
 
 ```js
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-const path = require('path');
-const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const { withStorybook } = require('@storybook/react-native/metro/withStorybook');
+
 const defaultConfig = getDefaultConfig(__dirname);
 
 /**
@@ -122,15 +126,19 @@ const config = {};
 
 const finalConfig = mergeConfig(defaultConfig, config);
 
+// For basic usage with all defaults
+module.exports = withStorybook(finalConfig);
+
+// Or customize the options
 module.exports = withStorybook(finalConfig, {
-  // Set to false to remove storybook specific options
-  // you can also use a env variable to set this
-  enabled: true,
-  // Path to your storybook config
+  // When false, removes Storybook from bundle (useful for production)
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
+
+  // Path to your storybook config (default: './.rnstorybook')
   configPath: path.resolve(__dirname, './.rnstorybook'),
   // note that this is the default so you can the config path blank if you use .rnstorybook
 
-  // Optional websockets configuration
+  // Optional websockets configuration for syncing between devices
   // Starts a websocket server on the specified port and host on metro start
   // websockets: {
   //   port: 7007,
@@ -148,12 +156,45 @@ Make sure you have `react-native-reanimated` in your project and the plugin setu
 plugins: ['react-native-reanimated/plugin'],
 ```
 
+## Expo router specific setup
+
+```bash
+npm create storybook@latest
+```
+
+choose recommended and then native
+
+```bash
+npx expo@latest customize metro.config.js
+```
+
+copy the metro config
+
+```js
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+module.exports = withStorybook(config);
+```
+
+add storybook screen to app
+
+create `app/storybook.tsx`
+
+```tsx
+export { default } from '../.rnstorybook';
+```
+
+Then add a way to navigate to your storybook route and I recommend disabling the header for the storybook route.
+
+Heres a video showing the same setup:
+
+https://www.youtube.com/watch?v=egBqrYg0AIg
+
 ## Writing stories
 
 In storybook we use a syntax called CSF that looks like this:
 
 ```tsx
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 import { MyButton } from './Button';
 
 const meta = {
@@ -222,7 +263,7 @@ For global decorators and parameters, you can add them to `preview.tsx` inside y
 
 ```tsx
 // .rnstorybook/preview.tsx
-import type { Preview } from '@storybook/react';
+import type {
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 
 const preview: Preview = {
@@ -291,13 +332,52 @@ For details of each ondevice addon you can see the readme:
 
 ## Hide/Show storybook
 
-Storybook on react native is a normal React Native component that can be used or hidden anywhere in your RN application based on your own logic.
+In v10, you have flexible options for integrating Storybook into your app:
 
-You can also create a separate app just for storybook that also works as a package for your visual components.
-Some have opted to toggle the storybook component by using a custom option in the react native developer menu.
+### Option 1: Direct export (simplest)
 
-- [Heres an approach for react native cli](https://dev.to/dannyhw/multiple-entry-points-for-react-native-storybook-4dkp)
-- [Heres an article about how you can do it in expo](https://dev.to/dannyhw/how-to-swap-between-react-native-storybook-and-your-app-p3o)
+Just export Storybook directly. Control inclusion via the metro config `enabled` flag:
+
+```tsx
+// App.tsx
+export { default } from './.rnstorybook';
+```
+
+```js
+// metro.config.js
+module.exports = withStorybook(config, {
+  enabled: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true',
+});
+```
+
+When `enabled: false`, Metro automatically removes Storybook from your bundle.
+
+### Option 2: Conditional rendering
+
+If you want to switch between your app and Storybook at runtime:
+
+```tsx
+// App.tsx
+import StorybookUI from './.rnstorybook';
+import { MyApp } from './MyApp';
+
+const isStorybook = process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true';
+
+export default function App() {
+  return isStorybook ? <StorybookUI /> : <MyApp />;
+}
+```
+
+### Option 3: Expo Router (recommended for Expo)
+
+Create a dedicated route for Storybook:
+
+```tsx
+// app/storybook.tsx
+export { default } from '../.rnstorybook';
+```
+
+Then navigate to `/storybook` in your app to view stories.
 
 ## withStorybook wrapper
 
@@ -322,7 +402,9 @@ module.exports = withStorybook(defaultConfig, {
 
 Type: `boolean`, default: `true`
 
-Determines whether the options specified are applied to the Metro config. This can be useful for project setups that use Metro both with and without Storybook and need to conditionally apply the options. In this example, it is made conditional using an environment variable:
+Controls whether Storybook is included in your app bundle. When `true`, enables Storybook metro configuration and generates the `storybook.requires` file. When `false`, removes all Storybook code from the bundle by replacing imports with empty modules.
+
+This is useful for conditionally including Storybook in development but excluding it from production builds:
 
 ```js
 // metro.config.js
@@ -332,18 +414,11 @@ const withStorybook = require('@storybook/react-native/metro/withStorybook');
 const defaultConfig = getDefaultConfig(__dirname);
 
 module.exports = withStorybook(defaultConfig, {
-  enabled: process.env.WITH_STORYBOOK,
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
   // ... other options
 });
 ```
 
-#### onDisabledRemoveStorybook
-
-Type: `boolean`, default: `false`
-
-If onDisabledRemoveStorybook `true` and `enabled` is `false`, the storybook package will be removed from the build.
-This is useful if you want to remove storybook from your production build.
-
 #### useJs
 
 Type: `boolean`, default: `false`
@@ -356,6 +431,18 @@ Type: `string`, default: `path.resolve(process.cwd(), './.rnstorybook')`
 
 The location of your Storybook configuration directory, which includes `main.ts` and other project-related files.
 
+#### docTools
+
+Type: `boolean`, default: `true`
+
+Whether to include doc tools in the storybook.requires file. Doc tools provide additional documentation features and work with `babel-plugin-react-docgen-typescript`.
+
+#### liteMode
+
+Type: `boolean`, default: `false`
+
+Whether to use lite mode for Storybook. In lite mode, the default Storybook UI is mocked out so you don't need to install all its dependencies like react-native-reanimated. This is useful for reducing bundle size and dependencies. Use this when using @storybook/react-native-ui-lite instead of @storybook/react-native-ui.
+
 ### websockets
 
 Type: `{ host: string?, port: number? }`, default: `undefined`

package/template/cli/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react-native';
 
 const preview: Preview = {
   parameters: {

package/template/cli/stories/Button.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 
 import { View } from 'react-native';
 import { fn } from 'storybook/test';

package/template/cli/stories/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-native';
 
 import { Header } from './Header';