docs: updated readme

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

@@ -12,21 +12,8 @@ const StorybookUIRoot = view.getStorybookUI({
   // port: 7007,
 
   // initialSelection: { kind: 'TextInput', name: 'Basic' },
-  // isUIHidden: true,
-  // isSplitPanelVisible: true,
   // onDeviceUI: false,
   // host: '192.168.1.69',
-  // theme: {
-  //   storyList: {
-  //     search: {
-  //       borderColor: 'red',
-  //       borderWidth: 3,
-  //     },
-  //   },
-  //   tabs: {
-  //     activeBackgroundColor: 'yellow',
-  //   },
-  // },
 });
 
 export default StorybookUIRoot;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "7.6.10",
+  "version": "8.3.1",
   "private": true,
   "description": "Storybook for React Native is an open source tool for developing UI components in isolation. It makes building stunning UIs organized and efficient.",
   "keywords": [

packages/react-native/readme.md

@@ -2,13 +2,13 @@
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-This readme is for the 7.6.10 version, you can find the 6.5 docs [here](https://github.com/storybookjs/react-native/tree/v6.5-stable).
+This readme is for the 8.3.1 version, you can find the 7.6 docs [here](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
 
-If you are migrating from 6.5 to 7.6 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-65x-to-76x)
+If you are migrating from 7.6 to 8.3 you can find the migration guide [here](https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-76x-to-83x)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> NOTE: `@storybook/react-native` requires atleast 7.6.10, if you install other storybook core packages they should be `^7.6.10` or newer.
+> NOTE: `@storybook/react-native` requires atleast 8.3.1, if you install other storybook core packages they should be `^8.3.1` or newer.
 
 If you want to help out or are just curious then check out the [project board](https://github.com/orgs/storybookjs/projects/12) to see the open issues.
 
@@ -81,37 +81,60 @@ Then set `transformer.unstable_allowRequireContext` to true and add the generate
 // metro.config.js
 const path = require('path');
 const { getDefaultConfig } = require('expo/metro-config');
-
-const { generate } = require('@storybook/react-native/scripts/generate');
-
-generate({
-  configPath: path.resolve(__dirname, './.storybook'),
-});
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
 
 /** @type {import('expo/metro-config').MetroConfig} */
 const config = getDefaultConfig(__dirname);
 
-config.transformer.unstable_allowRequireContext = true;
+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, './.storybook'),
 
-module.exports = config;
+  // Optional websockets configuration
+  // Starts a websocket server on the specified port and host on metro start
+  // websockets: {
+  //   port: 7007,
+  //   host: 'localhost',
+  // },
+});
 ```
 
 **React native**
 
 ```js
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 const path = require('path');
-const { generate } = require('@storybook/react-native/scripts/generate');
-
-generate({
+const withStorybook = require('@storybook/react-native/metro/withStorybook');
+const defaultConfig = getDefaultConfig(__dirname);
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {};
+// set your own config here 👆
+
+const finalConfig = mergeConfig(defaultConfig, config);
+
+module.exports = withStorybook(finalConfig, {
+  // Set to false to remove storybook specific options
+  // you can also use a env variable to set this
+  enabled: process.env.STORYBOOK_ENABLED === 'true',
+  // Path to your storybook config
   configPath: path.resolve(__dirname, './.storybook'),
-});
 
-module.exports = {
-  /* existing config */
-  transformer: {
-    unstable_allowRequireContext: true,
-  },
-};
+  // Optional websockets configuration
+  // Starts a websocket server on the specified port and host on metro start
+  // websockets: {
+  //   port: 7007,
+  //   host: 'localhost',
+  // },
+});
 ```
 
 ## Writing stories
@@ -271,19 +294,29 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 
 ```
 {
-    tabOpen: Number (0)
-        -- which tab should be open. -1 Sidebar, 0 Canvas, 1 Addons
-    initialSelection: string | Object (undefined)
+    initialSelection?: string | Object (undefined)
         -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
-    shouldDisableKeyboardAvoidingView: Boolean (false)
-        -- Disable KeyboardAvoidingView wrapping Storybook's view
-    keyboardAvoidingViewVerticalOffset: Number (0)
-        -- With shouldDisableKeyboardAvoidingView=true, this will set the keyboardverticaloffset (https://facebook.github.io/react-native/docs/keyboardavoidingview#keyboardverticaloffset) value for KeyboardAvoidingView wrapping Storybook's view
-    storage: Object (undefined)
+    storage?: Object (undefined)
         -- {getItem: (key: string) => Promise<string | null>;setItem: (key: string, value: string) => Promise<void>;}
         -- Custom storage to be used instead of AsyncStorage
     shouldPersistSelection: Boolean (true)
         -- Stores last selected story in your devices storage.
+    onDeviceUI?: boolean;
+        -- show the ondevice ui
+    enableWebsockets?: boolean;
+        -- enable websockets for the storybook ui
+    query?: string;
+        -- query params for the websocket connection
+    host?: string;
+        -- host for the websocket connection
+    port?: number;
+        -- port for the websocket connection
+    secured?: boolean;
+        -- use secured websockets
+    shouldPersistSelection?: boolean;
+        -- store the last selected story in the device's storage
+    theme: Partial<Theme>;
+        -- theme for the storybook ui
 }
 ```
 

packages/react-native/src/View.tsx

@@ -55,19 +55,13 @@ type DeepPartial<T> = T extends object
 
 export type Params = {
   onDeviceUI?: boolean;
-  // resetStorybook?: boolean; // TODO: Do we need this?
   enableWebsockets?: boolean;
   query?: string;
   host?: string;
   port?: number;
   secured?: boolean;
   initialSelection?: InitialSelection;
   shouldPersistSelection?: boolean;
-  tabOpen?: number;
-  isUIHidden?: boolean;
-  isSplitPanelVisible?: boolean;
-  shouldDisableKeyboardAvoidingView?: boolean;
-  keyboardAvoidingViewVerticalOffset?: number;
   theme: DeepPartial<Theme>;
   storage?: Storage;
 };