@storybook/react-native 9.0.0-beta.9 → 9.0.0-rc.4

package/dist/index.d.ts

@@ -2,11 +2,12 @@ import * as storybook_internal_types from 'storybook/internal/types';
 import { StoryIndex, PreparedStory, NormalizedStoriesSpecifier, Addon_StorySortParameterV7, StorybookConfig as StorybookConfig$1 } from 'storybook/internal/types';
 import { ReactRenderer } from '@storybook/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Channel } from 'storybook/internal/channels';
-import { PreviewWithSelection } from 'storybook/internal/preview-api';
 import { StoryContext } from '@storybook/csf';
 import { Theme } from '@storybook/react-native-theming';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
+import { SBUI } from '@storybook/react-native-ui-common';
+import { Channel } from 'storybook/internal/channels';
+import { PreviewWithSelection } from 'storybook/internal/preview-api';
 
 interface Storage {
     getItem: (key: string) => Promise<string | null>;
@@ -39,6 +40,7 @@ type Params = {
     shouldPersistSelection?: boolean;
     theme: ThemePartial;
     storage?: Storage;
+    CustomUIComponent?: SBUI;
 };
 declare class View {
     _storyIndex: StoryIndex;
@@ -70,9 +72,9 @@ interface ReactNativeOptions {
     playFn?: boolean;
 }
 declare function prepareStories({ storyEntries, options, storySort, }: {
-    storyEntries: Array<NormalizedStoriesSpecifier & {
+    storyEntries: (NormalizedStoriesSpecifier & {
         req: any;
-    }>;
+    })[];
     options?: ReactNativeOptions;
     storySort?: Addon_StorySortParameterV7;
 }): {
@@ -84,15 +86,15 @@ declare function prepareStories({ storyEntries, options, storySort, }: {
 };
 declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<storybook_internal_types.NormalizedProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, options, }: {
-    storyEntries: Array<NormalizedStoriesSpecifier & {
+    storyEntries: (NormalizedStoriesSpecifier & {
         req: any;
-    }>;
+    })[];
     annotations: any[];
     options?: ReactNativeOptions;
 }): View;
-declare function updateView(viewInstance: View, annotations: any[], normalizedStories: Array<NormalizedStoriesSpecifier & {
+declare function updateView(viewInstance: View, annotations: any[], normalizedStories: (NormalizedStoriesSpecifier & {
     req: any;
-}>, options?: ReactNativeOptions): void;
+})[], options?: ReactNativeOptions): void;
 
 interface StorybookConfig {
     stories: StorybookConfig$1['stories'];

package/dist/index.js

@@ -47,20 +47,17 @@ var import_csf2 = require("@storybook/csf");
 var import_channels2 = require("storybook/internal/channels");
 
 // src/View.tsx
-var import_bottom_sheet = require("@gorhom/bottom-sheet");
+var import_csf = require("@storybook/csf");
+var import_react_native_theming2 = require("@storybook/react-native-theming");
+var import_react_native_ui_common = require("@storybook/react-native-ui-common");
 var import_channels = require("storybook/internal/channels");
-var import_core_events = __toESM(require("storybook/internal/core-events"));
+var import_core_events = require("storybook/internal/core-events");
 var import_manager_api = require("storybook/internal/manager-api");
 var import_preview_api = require("storybook/internal/preview-api");
-var import_csf = require("@storybook/csf");
-var import_react_native_theming2 = require("@storybook/react-native-theming");
-var import_react_native_ui = require("@storybook/react-native-ui");
 var import_dedent = __toESM(require("dedent"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react4 = require("react");
 var import_react_native3 = require("react-native");
-var import_react_native_gesture_handler = require("react-native-gesture-handler");
-var import_react_native_safe_area_context = require("react-native-safe-area-context");
 
 // src/components/StoryView/StoryView.tsx
 var import_react_native_theming = require("@storybook/react-native-theming");
@@ -954,8 +951,22 @@ var View3 = class {
       shouldPersistSelection = true,
       onDeviceUI = true,
       enableWebsockets = false,
-      storage
+      storage,
+      CustomUIComponent
     } = params;
+    const getFullUI = (enabled) => {
+      if (enabled) {
+        try {
+          const { FullUI: FullUI2 } = require("@storybook/react-native-ui");
+          return FullUI2;
+        } catch (error) {
+          console.warn("storybook-log: error loading UI", error);
+        }
+      }
+      const PlaceholderUI = ({ children }) => children;
+      return PlaceholderUI;
+    };
+    const FullUI = getFullUI(onDeviceUI);
     this._storage = storage;
     const initialStory = this._getInitialStory(params);
     if (enableWebsockets) {
@@ -965,7 +976,7 @@ var View3 = class {
       this._channel = channel;
       this._preview.channel = channel;
       this._preview.setupListeners();
-      channel.emit(import_core_events.default.CHANNEL_CREATED);
+      channel.emit(import_core_events.CHANNEL_CREATED);
       this._preview.ready().then(() => this._preview.onStoryIndexChanged());
     }
     import_manager_api.addons.loadAddons({
@@ -999,10 +1010,10 @@ var View3 = class {
             const urlObj = new URL(url);
             const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
             const hasStoryId = storyId && typeof storyId === "string";
-            const storyExists = hasStoryId && this._storyIdExists(storyId);
-            if (storyExists && this._ready) {
+            const storyExists = hasStoryId && self._storyIdExists(storyId);
+            if (storyExists && self._ready) {
               console.log(`STORYBOOK: Linking event received, navigating to story: ${storyId}`);
-              this._channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+              self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId });
             }
             if (hasStoryId && !storyExists) {
               console.log(
@@ -1016,15 +1027,15 @@ var View3 = class {
         };
       }, []);
       (0, import_react4.useEffect)(() => {
-        this.createPreparedStoryMapping().then(() => {
-          this._ready = true;
+        self.createPreparedStoryMapping().then(() => {
+          self._ready = true;
           setReady(true);
           return import_react_native3.Linking.getInitialURL().then((url) => {
             if (url && typeof url === "string") {
               const urlObj = new URL(url);
               const storyId = urlObj.searchParams.get("STORYBOOK_STORY_ID");
               const hasStoryId = storyId && typeof storyId === "string";
-              const storyExists = hasStoryId && this._storyIdExists(storyId);
+              const storyExists = hasStoryId && self._storyIdExists(storyId);
               if (hasStoryId && !storyExists) {
                 console.log(
                   `STORYBOOK: Initial Linking event received, but story does not exist: ${storyId}`
@@ -1064,8 +1075,8 @@ var View3 = class {
               });
             `);
           }
-          if (shouldPersistSelection && !!this._storage) {
-            this._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+          if (shouldPersistSelection && !!self._storage) {
+            self._storage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
               console.warn("storybook-log: error writing to async storage", e);
             });
           }
@@ -1076,10 +1087,10 @@ var View3 = class {
         if (!ready) {
           return {};
         }
-        return (0, import_react_native_ui.transformStoryIndexToStoriesHash)(this._storyIndex, {
+        return (0, import_react_native_ui_common.transformStoryIndexToStoriesHash)(self._storyIndex, {
           docsOptions: { docsMode: false, defaultName: "" },
           filters: {},
-          status: {},
+          allStatuses: {},
           provider: {
             handleAPI: () => ({}),
             getConfig: () => ({})
@@ -1100,7 +1111,29 @@ var View3 = class {
         );
       }
       if (onDeviceUI) {
-        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_theming2.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_safe_area_context.SafeAreaProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_gesture_handler.GestureHandlerRootView, { style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_bottom_sheet.BottomSheetModalProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.StorageProvider, { storage, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.LayoutProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native_ui.Layout, { storyHash, story, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {}) }) }) }) }) }) }) });
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          FullUI,
+          {
+            storage,
+            theme: appliedTheme,
+            storyHash,
+            story,
+            setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {})
+          }
+        );
+      } else if (CustomUIComponent) {
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          CustomUIComponent,
+          {
+            story,
+            storyHash,
+            setStory: (newStoryId) => self._channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId }),
+            storage,
+            theme: appliedTheme,
+            children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {})
+          }
+        );
       } else {
         return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StoryView_default, {});
       }
@@ -1218,10 +1251,13 @@ function prepareStories({
     storySort,
     Object.values(index.entries).map((entry) => entry.importPath)
   );
-  const sorted = sortableStories.reduce((acc, item) => {
-    acc[item.id] = item;
-    return acc;
-  }, {});
+  const sorted = sortableStories.reduce(
+    (acc, item) => {
+      acc[item.id] = item;
+      return acc;
+    },
+    {}
+  );
   return { index: { v: 5, entries: sorted }, importMap };
 }
 var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api2.composeConfigs)([

package/dist/metro/withStorybook.d.ts

@@ -37,6 +37,10 @@ interface WithStorybookOptions {
      * If enabled is false and onDisabledRemoveStorybook is true, we will attempt to remove storybook from the js bundle.
      */
     onDisabledRemoveStorybook?: boolean;
+    /**
+     * Whether to include doc tools in the storybook.requires file. Defaults to true.
+     */
+    docTools?: boolean;
 }
 /**
  * Configures Metro bundler to work with Storybook in React Native.
@@ -59,6 +63,7 @@ interface WithStorybookOptions {
  *   configPath: path.resolve(projectRoot, './.rnstorybook'),
  *   websockets: { port: 7007, host: 'localhost' },
  *   useJs: false,
+ *   docTools: true,
  *   onDisabledRemoveStorybook: true,
  * });
  */

package/dist/metro/withStorybook.js

@@ -75,14 +75,14 @@ var require_common = __commonJS({
         const basePath = `${addon}/${file}`;
         require.resolve(basePath);
         return basePath;
-      } catch (error) {
+      } catch (_error) {
       }
       for (const ext of extensions) {
         try {
           const filePath = `${addon}/${file}.${ext}`;
           require.resolve(filePath);
           return filePath;
-        } catch (error) {
+        } catch (_error) {
         }
       }
       if (addon.startsWith("./") || addon.startsWith("../")) {
@@ -91,7 +91,7 @@ var require_common = __commonJS({
           if (extension) {
             return `${addon}/${file}`;
           }
-        } catch (error) {
+        } catch (_error) {
         }
       }
       return null;
@@ -130,10 +130,14 @@ var require_generate = __commonJS({
     } = require_common();
     var { normalizeStories, globToRegexp } = require("storybook/internal/common");
     var fs = require("fs");
-    var prettier = require("prettier");
     var path2 = require("path");
     var cwd = process.cwd();
-    function generate2({ configPath, absolute = false, useJs = false }) {
+    function generate2({
+      configPath,
+      /* absolute = false, */
+      useJs = false,
+      docTools = true
+    }) {
       const storybookRequiresLocation = path2.resolve(
         cwd,
         configPath,
@@ -150,13 +154,13 @@ var require_generate = __commonJS({
         const { path: p, recursive: r, match: m } = toRequireContext(specifier);
         const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
         return `{
-      titlePrefix: "${specifier.titlePrefix}",
-      directory: "${specifier.directory}",
-      files: "${specifier.files}",
-      importPathMatcher: /${reg.source}/,
-      ${useJs ? "" : "// @ts-ignore"}
-      req: require.context('${pathToStory}', ${r}, ${m})
-    }`;
+    titlePrefix: "${specifier.titlePrefix}",
+    directory: "${specifier.directory}",
+    files: "${specifier.files}",
+    importPathMatcher: /${reg.source}/,
+    ${useJs ? "" : "// @ts-ignore"}
+    req: require.context('${pathToStory}', ${r}, ${m})
+  }`;
       });
       let registerAddons = "";
       for (const addon of main.addons) {
@@ -171,8 +175,11 @@ var require_generate = __commonJS({
 `;
         }
       }
-      const docTools = 'require("@storybook/react-native/preview")';
-      const enhancers = [docTools];
+      const docToolsAnnotation = 'require("@storybook/react-native/preview")';
+      const enhancers = [];
+      if (docTools) {
+        enhancers.push(docToolsAnnotation);
+      }
       for (const addon of main.addons) {
         const previewPath = resolveAddonFile(
           getAddonName(addon),
@@ -189,54 +196,55 @@ var require_generate = __commonJS({
       let optionsVar = "";
       const reactNativeOptions = main.reactNative;
       if (reactNativeOptions && typeof reactNativeOptions === "object") {
-        optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+        optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
         options = "options";
       }
       const previewExists = getPreviewExists({ configPath });
       if (previewExists) {
         enhancers.unshift("require('./preview')");
       }
-      const annotations = `[${enhancers.join(", ")}]`;
+      const annotations = `[
+  ${enhancers.join(",\n  ")}
+]`;
       const globalTypes = `
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   `;
-      const fileContent = `
-  /* do not change this file, it is auto generated by storybook. */
+      const fileContent = `/* do not change this file, it is auto generated by storybook. */
+import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
 
-  import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
+${registerAddons}
 
-  ${registerAddons}
+const normalizedStories = [
+  ${normalizedStories.join(",\n  ")}
+];
 
-  const normalizedStories = [${normalizedStories.join(",")}];
+${useJs ? "" : globalTypes}
 
-  ${useJs ? "" : globalTypes}
+const annotations = ${annotations};
 
-  const annotations = ${annotations};
+global.STORIES = normalizedStories;
 
-  global.STORIES = normalizedStories;
-  
-  ${useJs ? "" : "// @ts-ignore"}
-  module?.hot?.accept?.();
+${useJs ? "" : "// @ts-ignore"}
+module?.hot?.accept?.();
 
-  ${optionsVar}
+${optionsVar}
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      ${options}
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, ${options});
-  }
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    ${options}
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, ${options});
+}
 
-  export const view${useJs ? "" : ": View"} = global.view;
+export const view${useJs ? "" : ": View"} = global.view;
 `;
-      const formattedFileContent = prettier.format(fileContent, { parser: "babel-ts" });
-      fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
+      fs.writeFileSync(storybookRequiresLocation, fileContent, {
         encoding: "utf8",
         flag: "w"
       });
@@ -254,14 +262,16 @@ var import_ws = require("ws");
 function withStorybook(config, options = {
   enabled: true,
   useJs: false,
-  onDisabledRemoveStorybook: false
+  onDisabledRemoveStorybook: false,
+  docTools: true
 }) {
   const {
     configPath,
     enabled = true,
     websockets,
     useJs = false,
-    onDisabledRemoveStorybook = false
+    onDisabledRemoveStorybook = false,
+    docTools = true
   } = options;
   if (!enabled) {
     if (onDisabledRemoveStorybook) {
@@ -302,7 +312,8 @@ function withStorybook(config, options = {
   }
   (0, import_generate.generate)({
     configPath: configPath ?? path.resolve(process.cwd(), "./.rnstorybook"),
-    useJs
+    useJs,
+    docTools
   });
   return {
     ...config,
@@ -314,8 +325,8 @@ function withStorybook(config, options = {
       ...config.resolver,
       resolveRequest: (context, moduleName, platform) => {
         const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
-        const isStorybookModule = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook");
-        const theContext = isStorybookModule ? {
+        const shouldUseCustomResolveConfig = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook") || moduleName.startsWith("uuid");
+        const theContext = shouldUseCustomResolveConfig ? {
           ...context,
           unstable_enablePackageExports: true,
           unstable_conditionNames: ["import"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "9.0.0-beta.9",
+  "version": "9.0.0-rc.4",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -48,13 +48,13 @@
   "dependencies": {
     "@storybook/csf": "^0.1.13",
     "@storybook/global": "^5.0.0",
-    "@storybook/react": "9.0.0-beta.9",
-    "@storybook/react-native-theming": "^9.0.0-beta.9",
-    "@storybook/react-native-ui": "^9.0.0-beta.9",
+    "@storybook/react": "9.0.0-rc.4",
+    "@storybook/react-native-theming": "^9.0.0-rc.4",
+    "@storybook/react-native-ui": "^9.0.0-rc.4",
+    "@storybook/react-native-ui-common": "^9.0.0-rc.4",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
     "deepmerge": "^4.3.0",
-    "prettier": "^2.4.1",
     "react-native-url-polyfill": "^2.0.0",
     "setimmediate": "^1.0.5",
     "type-fest": "~2.19",
@@ -67,12 +67,12 @@
     "babel-jest": "^29.7.0",
     "babel-preset-expo": "^12.0.9",
     "jest": "^29.7.0",
-    "jest-expo": "~53.0.2",
+    "jest-expo": "~53.0.5",
     "jotai": "^2.6.2",
     "react": "19.0.0",
-    "react-native": "0.79.1",
+    "react-native": "0.79.2",
     "react-test-renderer": "^19.1.0",
-    "storybook": "9.0.0-beta.9",
+    "storybook": "9.0.0-rc.4",
     "tsup": "^7.2.0",
     "typescript": "~5.8.3"
   },
@@ -81,8 +81,23 @@
     "react": "*",
     "react-native": ">=0.72.0",
     "react-native-gesture-handler": ">=2",
+    "react-native-reanimated": ">=2",
     "react-native-safe-area-context": "*",
-    "storybook": "9.0.0-beta.9"
+    "storybook": "9.0.0-rc.4"
+  },
+  "peerDependenciesMeta": {
+    "@gorhom/bottom-sheet": {
+      "optional": true
+    },
+    "react-native-gesture-handler": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
+    "react-native-safe-area-context": {
+      "optional": true
+    }
   },
   "engines": {
     "node": ">=8.0.0"
@@ -90,5 +105,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7e1611cf3e1a2ede212f10b6dfacd3a5384e13f9"
+  "gitHead": "1d0249371caed6a6a90f42530d722040eb18c9dc"
 }

package/readme.md

@@ -1,16 +1,14 @@
 # Storybook for React Native
 
-> [!IMPORTANT]  
-> This readme is for v8, for v7 docs see the [v7.6 docs](https://github.com/storybookjs/react-native/tree/v7.6.20-stable).
+> This readme is for v9 beta, for v8 docs see the [v8.6 docs](https://github.com/storybookjs/react-native/tree/v8.6.0-stable).
 
 With Storybook for React Native you can design and develop individual React Native components without running your app.
 
-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)
+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)
 
 For more information about storybook visit: [storybook.js.org](https://storybook.js.org)
 
-> [!NOTE]  
-> `@storybook/react-native` requires atleast 8.3.1, if you install other storybook core packages they should be `^8.3.1` or newer.
+> 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)
 
@@ -139,6 +137,15 @@ module.exports = withStorybook(finalConfig, {
 });
 ```
 
+#### Reanimated setup
+
+Make sure you have `react-native-reanimated` in your project and the plugin setup in your babel config.
+
+```js
+// babel.config.js
+plugins: ['react-native-reanimated/plugin'],
+```
+
 ## Writing stories
 
 In storybook we use a syntax called CSF that looks like this:
@@ -376,8 +383,6 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
     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;

package/scripts/__snapshots__/generate.test.js.snap

@@ -1,251 +1,270 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loader writeRequires when there are different file extensions writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/file-extensions",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/file-extensions",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a configuration object writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "ComponentsPrefix",
-      directory: "./scripts/mocks/configuration-objects/components",
-      files: "**/*.stories.tsx",
-      importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "ComponentsPrefix",
+    directory: "./scripts/mocks/configuration-objects/components",
+    files: "**/*.stories.tsx",
+    importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
+  }
+];
+
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is a story glob writes the story imports 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/all-config-files",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/all-config-files",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
+
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
 
-  
+// @ts-ignore
+module?.hot?.accept?.();
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when there is no preview does not add preview related stuff 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
-
-  import { start, updateView, View } from '@storybook/react-native';
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView, View } from '@storybook/react-native';
 
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/no-preview",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      // @ts-ignore
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/no-preview",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    // @ts-ignore
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   
 
-  const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
+const annotations = [
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  global.STORIES = normalizedStories;
-  
-  // @ts-ignore
-  module?.hot?.accept?.();
+global.STORIES = normalizedStories;
+
+// @ts-ignore
+module?.hot?.accept?.();
 
-  
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view: View = global.view;
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view: View = global.view;
 "
 `;
 
 exports[`loader writeRequires when using js writes the story imports without types 1`] = `
-"
-  /* do not change this file, it is auto generated by storybook. */
+"/* do not change this file, it is auto generated by storybook. */
+import { start, updateView } from '@storybook/react-native';
 
-  import { start, updateView } from '@storybook/react-native';
-
-  import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
 import "@storybook/addon-ondevice-backgrounds/register";
 import "@storybook/addon-ondevice-actions/register";
 
 
-  const normalizedStories = [{
-      titlePrefix: "",
-      directory: "./scripts/mocks/all-config-files",
-      files: "FakeStory.stories.tsx",
-      importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
-      
-      req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }];
+const normalizedStories = [
+  {
+    titlePrefix: "",
+    directory: "./scripts/mocks/all-config-files",
+    files: "FakeStory.stories.tsx",
+    importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
+    
+    req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
+  }
+];
 
-  
 
-  const annotations = [require('./preview'), require("@storybook/react-native/preview"), require('@storybook/addon-ondevice-actions/preview')];
 
-  global.STORIES = normalizedStories;
-  
-  
-  module?.hot?.accept?.();
+const annotations = [
+  require('./preview'),
+  require("@storybook/react-native/preview"),
+  require('@storybook/addon-ondevice-actions/preview')
+];
 
-  
+global.STORIES = normalizedStories;
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, );
-  }
 
-  export const view = global.view;
+module?.hot?.accept?.();
+
+
+
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, );
+}
+
+export const view = global.view;
 "
 `;

package/scripts/common.js

@@ -67,7 +67,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
     require.resolve(basePath);
 
     return basePath;
-  } catch (error) {}
+  } catch (_error) {}
 
   for (const ext of extensions) {
     try {
@@ -76,7 +76,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
       require.resolve(filePath);
 
       return filePath;
-    } catch (error) {}
+    } catch (_error) {}
   }
 
   // attempt to resolve as a relative path for local addons
@@ -87,7 +87,7 @@ function resolveAddonFile(addon, file, extensions = ['js', 'mjs', 'ts'], configP
       if (extension) {
         return `${addon}/${file}`;
       }
-    } catch (error) {}
+    } catch (_error) {}
   }
 
   return null;

package/scripts/generate.js

@@ -8,12 +8,12 @@ const {
 } = require('./common');
 const { normalizeStories, globToRegexp } = require('storybook/internal/common');
 const fs = require('fs');
-const prettier = require('prettier');
+
 const path = require('path');
 
 const cwd = process.cwd();
 
-function generate({ configPath, absolute = false, useJs = false }) {
+function generate({ configPath, /* absolute = false, */ useJs = false, docTools = true }) {
   const storybookRequiresLocation = path.resolve(
     cwd,
     configPath,
@@ -39,13 +39,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
     const pathToStory = ensureRelativePathHasDot(path.posix.relative(configPath, p));
     return `{
-      titlePrefix: "${specifier.titlePrefix}",
-      directory: "${specifier.directory}",
-      files: "${specifier.files}",
-      importPathMatcher: /${reg.source}/,
-      ${useJs ? '' : '// @ts-ignore'}
-      req: require.context('${pathToStory}', ${r}, ${m})
-    }`;
+    titlePrefix: "${specifier.titlePrefix}",
+    directory: "${specifier.directory}",
+    files: "${specifier.files}",
+    importPathMatcher: /${reg.source}/,
+    ${useJs ? '' : '// @ts-ignore'}
+    req: require.context('${pathToStory}', ${r}, ${m})
+  }`;
   });
 
   let registerAddons = '';
@@ -63,9 +63,13 @@ function generate({ configPath, absolute = false, useJs = false }) {
     }
   }
 
-  const docTools = 'require("@storybook/react-native/preview")';
+  const docToolsAnnotation = 'require("@storybook/react-native/preview")';
+
+  const enhancers = [];
 
-  const enhancers = [docTools];
+  if (docTools) {
+    enhancers.push(docToolsAnnotation);
+  }
 
   for (const addon of main.addons) {
     const previewPath = resolveAddonFile(
@@ -86,7 +90,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
   const reactNativeOptions = main.reactNative;
 
   if (reactNativeOptions && typeof reactNativeOptions === 'object') {
-    optionsVar = `const options = ${JSON.stringify(reactNativeOptions)}`;
+    optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 4)}`;
     options = 'options';
   }
 
@@ -96,51 +100,51 @@ function generate({ configPath, absolute = false, useJs = false }) {
     enhancers.unshift("require('./preview')");
   }
 
-  const annotations = `[${enhancers.join(', ')}]`;
+  const annotations = `[
+  ${enhancers.join(',\n  ')}
+]`;
 
   const globalTypes = `
-    declare global {
-      var view: View;
-      var STORIES: typeof normalizedStories;
-    }
+declare global {
+  var view: View;
+  var STORIES: typeof normalizedStories;
+}
   `;
 
-  const fileContent = `
-  /* do not change this file, it is auto generated by storybook. */
+  const fileContent = `/* do not change this file, it is auto generated by storybook. */
+import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-native';
 
-  import { start, updateView${useJs ? '' : ', View'} } from '@storybook/react-native';
+${registerAddons}
 
-  ${registerAddons}
+const normalizedStories = [
+  ${normalizedStories.join(',\n  ')}
+];
 
-  const normalizedStories = [${normalizedStories.join(',')}];
+${useJs ? '' : globalTypes}
 
-  ${useJs ? '' : globalTypes}
+const annotations = ${annotations};
 
-  const annotations = ${annotations};
+global.STORIES = normalizedStories;
 
-  global.STORIES = normalizedStories;
-  
-  ${useJs ? '' : '// @ts-ignore'}
-  module?.hot?.accept?.();
+${useJs ? '' : '// @ts-ignore'}
+module?.hot?.accept?.();
 
-  ${optionsVar}
+${optionsVar}
 
-  if (!global.view) {
-    global.view = start({
-      annotations,
-      storyEntries: normalizedStories,
-      ${options}
-    });
-  } else {
-    updateView(global.view, annotations, normalizedStories, ${options});
-  }
+if (!global.view) {
+  global.view = start({
+    annotations,
+    storyEntries: normalizedStories,
+    ${options}
+  });
+} else {
+  updateView(global.view, annotations, normalizedStories, ${options});
+}
 
-  export const view${useJs ? '' : ': View'} = global.view;
+export const view${useJs ? '' : ': View'} = global.view;
 `;
 
-  const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });
-
-  fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
+  fs.writeFileSync(storybookRequiresLocation, fileContent, {
     encoding: 'utf8',
     flag: 'w',
   });

package/scripts/generate.test.js

@@ -14,12 +14,6 @@ jest.mock('fs', () => ({
   },
 }));
 
-jest.mock('prettier', () => ({
-  format(s, opts) {
-    return s;
-  },
-}));
-
 describe('loader', () => {
   describe('writeRequires', () => {
     describe('when there is a story glob', () => {

package/scripts/handle-args.js

@@ -9,6 +9,7 @@ function getArguments() {
       './.rnstorybook'
     )
     .option('-js, --use-js', 'Use a js file for storybook.requires')
+    .option('-D, --no-doc-tools', 'Do not include doc tools in the storybook.requires file')
     .option('-a, --absolute', 'Use absolute paths for story imports');
 
   program.parse();

package/scripts/mocks/preview-files/tsx/preview.tsx

@@ -1,9 +1,9 @@
 export const decorators: any = [];
 export const parameters = {
-    my_param: 'anything',
-    backgrounds: [
-        { name: 'plain', value: 'white', default: true },
-        { name: 'warm', value: 'hotpink' },
-        { name: 'cool', value: 'deepskyblue' },
-    ],
+  my_param: 'anything',
+  backgrounds: [
+    { name: 'plain', value: 'white', default: true },
+    { name: 'warm', value: 'hotpink' },
+    { name: 'cool', value: 'deepskyblue' },
+  ],
 };