@storybook/react-native 7.0.0-alpha.8 → 7.6.8-alpha.0

package/dist/V6.d.ts

@@ -1,9 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params, R as ReactNativeFramework } from './View-8eae84cb.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-8eae84cb.js';
+import { P as Params, R as ReactNativeFramework } from './View-7a09870e.js';
+export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
 import { ClientApi } from '@storybook/preview-api';
-import { b as Addon_StoryApi } from './index.d-680e82dc.js';
-export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-680e82dc.js';
+import { b as Addon_StoryApi } from './index.d-82fc9196.js';
+export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';
 import { ReactNode } from 'react';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
 import '@storybook/csf';

package/dist/V6.js

@@ -72,16 +72,17 @@ __export(V6_exports, {
 module.exports = __toCommonJS(V6_exports);
 
 // src/StartV6.tsx
-var import_channels = require("@storybook/channels");
-var import_core_events2 = __toESM(require("@storybook/core-events"));
+var import_channels2 = require("@storybook/channels");
+var import_core_events3 = __toESM(require("@storybook/core-events"));
 var import_global = require("@storybook/global");
 var import_manager_api3 = require("@storybook/manager-api");
-var import_preview_api = require("@storybook/preview-api");
+var import_preview_api3 = require("@storybook/preview-api");
 var import_preview_web = require("@storybook/preview-web");
 
 // src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
@@ -102,11 +103,15 @@ function atom(read, write) {
     config.read = read;
   } else {
     config.init = read;
-    config.read = (get) => get(config);
-    config.write = (get, set, arg) => set(
-      config,
-      typeof arg === "function" ? arg(get(config)) : arg
-    );
+    config.read = function(get) {
+      return get(this);
+    };
+    config.write = function(get, set, arg) {
+      return set(
+        this,
+        typeof arg === "function" ? arg(get(this)) : arg
+      );
+    };
   }
   if (write) {
     config.write = write;
@@ -137,9 +142,9 @@ var rejectPromise = (promise, e) => {
   promise.reason = e;
 };
 var isPromiseLike = (x) => typeof (x == null ? void 0 : x.then) === "function";
-var isEqualAtomValue = (a, b) => "v" in a && "v" in b && Object.is(a.v, b.v);
-var isEqualAtomError = (a, b) => "e" in a && "e" in b && Object.is(a.e, b.e);
-var hasPromiseAtomValue = (a) => "v" in a && a.v instanceof Promise;
+var isEqualAtomValue = (a, b) => !!a && "v" in a && "v" in b && Object.is(a.v, b.v);
+var isEqualAtomError = (a, b) => !!a && "e" in a && "e" in b && Object.is(a.e, b.e);
+var hasPromiseAtomValue = (a) => !!a && "v" in a && a.v instanceof Promise;
 var isEqualPromiseAtomValue = (a, b) => "v" in a && "v" in b && a.v.orig && a.v.orig === b.v.orig;
 var returnAtomValue = (atomState) => {
   if ("e" in atomState) {
@@ -167,9 +172,11 @@ var createStore = () => {
     if (!pendingMap.has(atom2)) {
       pendingMap.set(atom2, prevAtomState);
     }
-    if (prevAtomState && hasPromiseAtomValue(prevAtomState)) {
+    if (hasPromiseAtomValue(prevAtomState)) {
       const next = "v" in atomState ? atomState.v instanceof Promise ? atomState.v : Promise.resolve(atomState.v) : Promise.reject(atomState.e);
-      cancelPromise(prevAtomState.v, next);
+      if (prevAtomState.v !== next) {
+        cancelPromise(prevAtomState.v, next);
+      }
     }
   };
   const updateDependencies = (atom2, nextAtomState, nextDependencies) => {
@@ -201,10 +208,10 @@ var createStore = () => {
     if (nextDependencies) {
       updateDependencies(atom2, nextAtomState, nextDependencies);
     }
-    if (prevAtomState && isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+    if (isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
       return prevAtomState;
     }
-    if (prevAtomState && hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
+    if (hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
       if (prevAtomState.d === nextAtomState.d) {
         return prevAtomState;
       } else {
@@ -217,39 +224,37 @@ var createStore = () => {
   const setAtomValueOrPromise = (atom2, valueOrPromise, nextDependencies, abortPromise) => {
     if (isPromiseLike(valueOrPromise)) {
       let continuePromise;
+      const updatePromiseDependencies = () => {
+        const prevAtomState = getAtomState(atom2);
+        if (!hasPromiseAtomValue(prevAtomState) || prevAtomState.v !== promise) {
+          return;
+        }
+        const nextAtomState = setAtomValue(
+          atom2,
+          promise,
+          nextDependencies
+        );
+        if (mountedMap.has(atom2) && prevAtomState.d !== nextAtomState.d) {
+          mountDependencies(atom2, nextAtomState, prevAtomState.d);
+        }
+      };
       const promise = new Promise((resolve, reject) => {
         let settled = false;
         valueOrPromise.then(
           (v) => {
             if (!settled) {
               settled = true;
-              const prevAtomState = getAtomState(atom2);
-              const nextAtomState = setAtomValue(
-                atom2,
-                promise,
-                nextDependencies
-              );
               resolvePromise(promise, v);
               resolve(v);
-              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
-                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
-              }
+              updatePromiseDependencies();
             }
           },
           (e) => {
             if (!settled) {
               settled = true;
-              const prevAtomState = getAtomState(atom2);
-              const nextAtomState = setAtomValue(
-                atom2,
-                promise,
-                nextDependencies
-              );
               rejectPromise(promise, e);
               reject(e);
-              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
-                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
-              }
+              updatePromiseDependencies();
             }
           }
         );
@@ -285,7 +290,7 @@ var createStore = () => {
     if (nextDependencies) {
       updateDependencies(atom2, nextAtomState, nextDependencies);
     }
-    if (prevAtomState && isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+    if (isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
       return prevAtomState;
     }
     setAtomState(atom2, nextAtomState);
@@ -297,9 +302,13 @@ var createStore = () => {
       if (mountedMap.has(atom2)) {
         return atomState;
       }
-      if (Array.from(atomState.d).every(
-        ([a, s]) => a === atom2 || readAtomState(a) === s
-      )) {
+      if (Array.from(atomState.d).every(([a, s]) => {
+        if (a === atom2) {
+          return true;
+        }
+        const aState = readAtomState(a);
+        return aState === s || isEqualAtomValue(aState, s);
+      })) {
         return atomState;
       }
     }
@@ -380,9 +389,19 @@ var createStore = () => {
   const recomputeDependents = (atom2) => {
     const dependencyMap = /* @__PURE__ */ new Map();
     const dirtyMap = /* @__PURE__ */ new WeakMap();
+    const getDependents = (a) => {
+      var _a;
+      const dependents = new Set((_a = mountedMap.get(a)) == null ? void 0 : _a.t);
+      pendingMap.forEach((_, pendingAtom) => {
+        var _a2;
+        if ((_a2 = getAtomState(pendingAtom)) == null ? void 0 : _a2.d.has(a)) {
+          dependents.add(pendingAtom);
+        }
+      });
+      return dependents;
+    };
     const loop1 = (a) => {
-      const mounted = mountedMap.get(a);
-      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+      getDependents(a).forEach((dependent) => {
         if (dependent !== a) {
           dependencyMap.set(
             dependent,
@@ -395,8 +414,7 @@ var createStore = () => {
     };
     loop1(atom2);
     const loop2 = (a) => {
-      const mounted = mountedMap.get(a);
-      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+      getDependents(a).forEach((dependent) => {
         var _a;
         if (dependent !== a) {
           let dirtyCount = dirtyMap.get(dependent);
@@ -408,7 +426,7 @@ var createStore = () => {
             if (isChanged) {
               const prevAtomState = getAtomState(dependent);
               const nextAtomState = readAtomState(dependent, true);
-              isChanged = !prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState);
+              isChanged = !isEqualAtomValue(prevAtomState, nextAtomState);
             }
             if (!isChanged) {
               dependencyMap.forEach((s) => s.delete(dependent));
@@ -431,7 +449,7 @@ var createStore = () => {
         }
         const prevAtomState = getAtomState(a);
         const nextAtomState = setAtomValueOrPromise(a, args2[0]);
-        if (!prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState)) {
+        if (!isEqualAtomValue(prevAtomState, nextAtomState)) {
           recomputeDependents(a);
         }
       } else {
@@ -461,15 +479,16 @@ var createStore = () => {
     }
     return result;
   };
-  const mountAtom = (atom2, initialDependent) => {
+  const mountAtom = (atom2, initialDependent, onMountQueue) => {
     var _a;
+    const queue = onMountQueue || [];
     (_a = getAtomState(atom2)) == null ? void 0 : _a.d.forEach((_, a) => {
       const aMounted = mountedMap.get(a);
       if (aMounted) {
         aMounted.t.add(atom2);
       } else {
         if (a !== atom2) {
-          mountAtom(a, atom2);
+          mountAtom(a, atom2, queue);
         }
       }
     });
@@ -483,10 +502,16 @@ var createStore = () => {
       mountedAtoms.add(atom2);
     }
     if (isActuallyWritableAtom(atom2) && atom2.onMount) {
-      const onUnmount = atom2.onMount((...args) => writeAtom(atom2, ...args));
-      if (onUnmount) {
-        mounted.u = onUnmount;
-      }
+      const { onMount } = atom2;
+      queue.push(() => {
+        const onUnmount = onMount((...args) => writeAtom(atom2, ...args));
+        if (onUnmount) {
+          mounted.u = onUnmount;
+        }
+      });
+    }
+    if (!onMountQueue) {
+      queue.forEach((f) => f());
     }
     return mounted;
   };
@@ -555,13 +580,13 @@ var createStore = () => {
       pending.forEach(([atom2, prevAtomState]) => {
         const atomState = getAtomState(atom2);
         if (atomState) {
-          if (atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
+          const mounted = mountedMap.get(atom2);
+          if (mounted && atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
             mountDependencies(atom2, atomState, prevAtomState == null ? void 0 : prevAtomState.d);
           }
-          const mounted = mountedMap.get(atom2);
           if (mounted && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (prevAtomState && !hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
+          (!hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
             mounted.l.forEach((listener) => listener());
             if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
               flushed.add(atom2);
@@ -964,6 +989,7 @@ var findFirstChildStory = (story) => {
 };
 
 // src/components/StoryListView/StoryListView.tsx
+var import_preview_api = require("@storybook/preview-api");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1178,7 +1204,8 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    const channel = import_preview_api.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1923,8 +1950,57 @@ var OnDeviceUI = ({
 var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
 // src/View.tsx
+var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
+
+// src/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1972,25 +2048,33 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  // _getServerChannel = (params: Partial<Params> = {}) => {
-  //   const host = getHost(params.host || 'localhost');
-  //   const port = `:${params.port || 7007}`;
-  //   const query = params.query || '';
-  //   const websocketType = params.secured ? 'wss' : 'ws';
-  //   const url = `${websocketType}://${host}${port}/${query}`;
-  //   return createWebSocketChannel({
-  //     url,
-  //     async: true,
-  //     onError: async () => {},
-  //   });
-  // };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channels.createWebSocketChannel)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
   getStorybookUI = (params = {}) => {
-    const {
-      shouldPersistSelection = true,
-      onDeviceUI = true
-      /* enableWebsockets = false  */
-    } = params;
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
     const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      console.log("websockets enabled");
+      const channel = this._getServerChannel(params);
+      import_manager_api2.addons.setChannel(channel);
+      import_preview_api2.addons.setChannel(channel);
+      this._channel = channel;
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
     import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -2119,10 +2203,10 @@ var render = (args, context) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
 };
 function start() {
-  const channel = new import_channels.Channel({ async: true });
+  const channel = new import_channels2.Channel({ async: true });
   import_manager_api3.addons.setChannel(channel);
-  channel.emit(import_core_events2.default.CHANNEL_CREATED);
-  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api.ClientApi();
+  channel.emit(import_core_events3.default.CHANNEL_CREATED);
+  const clientApi2 = import_global.global?.__STORYBOOK_CLIENT_API__ || new import_preview_api3.ClientApi();
   const previewView = {
     prepareForStory: () => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
@@ -2164,7 +2248,7 @@ function start() {
     import_global.global.__STORYBOOK_PREVIEW__ = preview;
     import_global.global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  (0, import_preview_api.setGlobalRender)(render);
+  (0, import_preview_api3.setGlobalRender)(render);
   let initialized = false;
   function onStoriesChanged() {
     const storyIndex = clientApi2.getStoryIndex();
@@ -2174,7 +2258,7 @@ function start() {
   const view2 = new View10(preview, channel);
   return {
     view: view2,
-    forceReRender: () => channel.emit(import_core_events2.default.FORCE_RE_RENDER),
+    forceReRender: () => channel.emit(import_core_events3.default.FORCE_RE_RENDER),
     clientApi: clientApi2,
     preview,
     // This gets called each time the user calls configure (i.e. once per HMR)

package/dist/{View-8eae84cb.d.ts → View-7a09870e.d.ts}

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Renderer, Args, ComponentAnnotations, AnnotatedStoryFn, StoryAnnotations, StoryContext } from '@storybook/csf';
 import { PreviewWithSelection } from '@storybook/preview-web';
 import { Theme } from '@storybook/react-native-theming';
-import { c as StoryIndex } from './index.d-680e82dc.js';
+import { c as StoryIndex } from './index.d-82fc9196.js';
 import { ReactElement, ComponentType, JSXElementConstructor, ComponentProps } from 'react';
 import { Channel } from '@storybook/channels';
 
@@ -122,6 +122,7 @@ declare class View {
         storySpecifier: string;
         viewMode: string;
     }>;
+    _getServerChannel: (params?: Partial<Params>) => Channel;
     getStorybookUI: (params?: Partial<Params>) => () => react_jsx_runtime.JSX.Element;
 }
 

package/dist/{index.d-680e82dc.d.ts → index.d-82fc9196.d.ts}

@@ -94,9 +94,9 @@ type ArgTypes<TArgs = Args> = {
 type StrictArgTypes<TArgs = Args> = {
     [name in keyof TArgs]: StrictInputType;
 };
-type Globals = {
+interface Globals {
     [name: string]: any;
-};
+}
 type Renderer = {
     /** What is the type of the `component` annotation in this renderer? */
     component: unknown;
@@ -106,7 +106,7 @@ type Renderer = {
     canvasElement: unknown;
     T?: unknown;
 };
-type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryIdentifier & {
+interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryIdentifier {
     component?: (TRenderer & {
         T: any;
     })['component'];
@@ -116,24 +116,24 @@ type StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs = Arg
     parameters: Parameters;
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
-};
-type StoryContextUpdate<TArgs = Args> = {
+}
+interface StoryContextUpdate<TArgs = Args> {
     args?: TArgs;
     globals?: Globals;
     [key: string]: any;
-};
+}
 type ViewMode$1 = 'story' | 'docs';
-type StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForEnhancers<TRenderer, TArgs> & Required<StoryContextUpdate<TArgs>> & {
+interface StoryContextForLoaders<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForEnhancers<TRenderer, TArgs>, Required<StoryContextUpdate<TArgs>> {
     hooks: unknown;
     viewMode: ViewMode$1;
     originalStoryFn: StoryFn<TRenderer>;
-};
-type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any>>;
-type StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContextForLoaders<TRenderer, TArgs> & {
+}
+type LoaderFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForLoaders<TRenderer, TArgs>) => Promise<Record<string, any> | void> | Record<string, any> | void;
+interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> extends StoryContextForLoaders<TRenderer, TArgs> {
     loaded: Record<string, any>;
     abortSignal: AbortSignal;
     canvasElement: TRenderer['canvasElement'];
-};
+}
 type PartialStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (update?: StoryContextUpdate<Partial<TArgs>>) => TRenderer['storyResult'];
 type LegacyStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
 type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: TArgs, context: StoryContext<TRenderer, TArgs>) => (TRenderer & {

package/dist/index.d.ts

@@ -1,8 +1,8 @@
-import { V as View } from './View-8eae84cb.js';
-export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, R as ReactNativeFramework, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-8eae84cb.js';
+import { V as View } from './View-7a09870e.js';
+export { C as ComponentMeta, c as ComponentStory, a as ComponentStoryFn, b as ComponentStoryObj, M as Meta, R as ReactNativeFramework, f as Story, d as StoryFn, S as StoryFnReactReturnType, e as StoryObj } from './View-7a09870e.js';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { N as NormalizedStoriesSpecifier } from './index.d-680e82dc.js';
-export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-680e82dc.js';
+import { N as NormalizedStoriesSpecifier } from './index.d-82fc9196.js';
+export { a as ArgTypes, A as Args, P as Parameters, S as StoryContext } from './index.d-82fc9196.js';
 import 'react/jsx-runtime';
 import '@storybook/csf';
 import '@storybook/preview-web';

package/dist/index.js

@@ -67,14 +67,15 @@ var import_react_native_theming13 = require("@storybook/react-native-theming");
 
 // src/Start.tsx
 var import_csf2 = require("@storybook/csf");
-var import_preview_api = require("@storybook/preview-api");
+var import_preview_api3 = require("@storybook/preview-api");
 var import_manager_api3 = require("@storybook/manager-api");
 var import_preview_web = require("@storybook/preview-api/dist/preview-web");
-var import_channels = require("@storybook/channels");
+var import_channels2 = require("@storybook/channels");
 
 // src/View.tsx
 var import_async_storage = __toESM(require("@react-native-async-storage/async-storage"));
 var import_csf = require("@storybook/csf");
+var import_preview_api2 = require("@storybook/preview-api");
 var import_manager_api2 = require("@storybook/manager-api");
 var import_react_native_theming12 = require("@storybook/react-native-theming");
 var import_react16 = require("react");
@@ -95,11 +96,15 @@ function atom(read, write) {
     config.read = read;
   } else {
     config.init = read;
-    config.read = (get) => get(config);
-    config.write = (get, set, arg) => set(
-      config,
-      typeof arg === "function" ? arg(get(config)) : arg
-    );
+    config.read = function(get) {
+      return get(this);
+    };
+    config.write = function(get, set, arg) {
+      return set(
+        this,
+        typeof arg === "function" ? arg(get(this)) : arg
+      );
+    };
   }
   if (write) {
     config.write = write;
@@ -130,9 +135,9 @@ var rejectPromise = (promise, e) => {
   promise.reason = e;
 };
 var isPromiseLike = (x) => typeof (x == null ? void 0 : x.then) === "function";
-var isEqualAtomValue = (a, b) => "v" in a && "v" in b && Object.is(a.v, b.v);
-var isEqualAtomError = (a, b) => "e" in a && "e" in b && Object.is(a.e, b.e);
-var hasPromiseAtomValue = (a) => "v" in a && a.v instanceof Promise;
+var isEqualAtomValue = (a, b) => !!a && "v" in a && "v" in b && Object.is(a.v, b.v);
+var isEqualAtomError = (a, b) => !!a && "e" in a && "e" in b && Object.is(a.e, b.e);
+var hasPromiseAtomValue = (a) => !!a && "v" in a && a.v instanceof Promise;
 var isEqualPromiseAtomValue = (a, b) => "v" in a && "v" in b && a.v.orig && a.v.orig === b.v.orig;
 var returnAtomValue = (atomState) => {
   if ("e" in atomState) {
@@ -160,9 +165,11 @@ var createStore = () => {
     if (!pendingMap.has(atom2)) {
       pendingMap.set(atom2, prevAtomState);
     }
-    if (prevAtomState && hasPromiseAtomValue(prevAtomState)) {
+    if (hasPromiseAtomValue(prevAtomState)) {
       const next = "v" in atomState ? atomState.v instanceof Promise ? atomState.v : Promise.resolve(atomState.v) : Promise.reject(atomState.e);
-      cancelPromise(prevAtomState.v, next);
+      if (prevAtomState.v !== next) {
+        cancelPromise(prevAtomState.v, next);
+      }
     }
   };
   const updateDependencies = (atom2, nextAtomState, nextDependencies) => {
@@ -194,10 +201,10 @@ var createStore = () => {
     if (nextDependencies) {
       updateDependencies(atom2, nextAtomState, nextDependencies);
     }
-    if (prevAtomState && isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+    if (isEqualAtomValue(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
       return prevAtomState;
     }
-    if (prevAtomState && hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
+    if (hasPromiseAtomValue(prevAtomState) && hasPromiseAtomValue(nextAtomState) && isEqualPromiseAtomValue(prevAtomState, nextAtomState)) {
       if (prevAtomState.d === nextAtomState.d) {
         return prevAtomState;
       } else {
@@ -210,39 +217,37 @@ var createStore = () => {
   const setAtomValueOrPromise = (atom2, valueOrPromise, nextDependencies, abortPromise) => {
     if (isPromiseLike(valueOrPromise)) {
       let continuePromise;
+      const updatePromiseDependencies = () => {
+        const prevAtomState = getAtomState(atom2);
+        if (!hasPromiseAtomValue(prevAtomState) || prevAtomState.v !== promise) {
+          return;
+        }
+        const nextAtomState = setAtomValue(
+          atom2,
+          promise,
+          nextDependencies
+        );
+        if (mountedMap.has(atom2) && prevAtomState.d !== nextAtomState.d) {
+          mountDependencies(atom2, nextAtomState, prevAtomState.d);
+        }
+      };
       const promise = new Promise((resolve, reject) => {
         let settled = false;
         valueOrPromise.then(
           (v) => {
             if (!settled) {
               settled = true;
-              const prevAtomState = getAtomState(atom2);
-              const nextAtomState = setAtomValue(
-                atom2,
-                promise,
-                nextDependencies
-              );
               resolvePromise(promise, v);
               resolve(v);
-              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
-                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
-              }
+              updatePromiseDependencies();
             }
           },
           (e) => {
             if (!settled) {
               settled = true;
-              const prevAtomState = getAtomState(atom2);
-              const nextAtomState = setAtomValue(
-                atom2,
-                promise,
-                nextDependencies
-              );
               rejectPromise(promise, e);
               reject(e);
-              if ((prevAtomState == null ? void 0 : prevAtomState.d) !== nextAtomState.d) {
-                mountDependencies(atom2, nextAtomState, prevAtomState == null ? void 0 : prevAtomState.d);
-              }
+              updatePromiseDependencies();
             }
           }
         );
@@ -278,7 +283,7 @@ var createStore = () => {
     if (nextDependencies) {
       updateDependencies(atom2, nextAtomState, nextDependencies);
     }
-    if (prevAtomState && isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
+    if (isEqualAtomError(prevAtomState, nextAtomState) && prevAtomState.d === nextAtomState.d) {
       return prevAtomState;
     }
     setAtomState(atom2, nextAtomState);
@@ -290,9 +295,13 @@ var createStore = () => {
       if (mountedMap.has(atom2)) {
         return atomState;
       }
-      if (Array.from(atomState.d).every(
-        ([a, s]) => a === atom2 || readAtomState(a) === s
-      )) {
+      if (Array.from(atomState.d).every(([a, s]) => {
+        if (a === atom2) {
+          return true;
+        }
+        const aState = readAtomState(a);
+        return aState === s || isEqualAtomValue(aState, s);
+      })) {
         return atomState;
       }
     }
@@ -373,9 +382,19 @@ var createStore = () => {
   const recomputeDependents = (atom2) => {
     const dependencyMap = /* @__PURE__ */ new Map();
     const dirtyMap = /* @__PURE__ */ new WeakMap();
+    const getDependents = (a) => {
+      var _a;
+      const dependents = new Set((_a = mountedMap.get(a)) == null ? void 0 : _a.t);
+      pendingMap.forEach((_, pendingAtom) => {
+        var _a2;
+        if ((_a2 = getAtomState(pendingAtom)) == null ? void 0 : _a2.d.has(a)) {
+          dependents.add(pendingAtom);
+        }
+      });
+      return dependents;
+    };
     const loop1 = (a) => {
-      const mounted = mountedMap.get(a);
-      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+      getDependents(a).forEach((dependent) => {
         if (dependent !== a) {
           dependencyMap.set(
             dependent,
@@ -388,8 +407,7 @@ var createStore = () => {
     };
     loop1(atom2);
     const loop2 = (a) => {
-      const mounted = mountedMap.get(a);
-      mounted == null ? void 0 : mounted.t.forEach((dependent) => {
+      getDependents(a).forEach((dependent) => {
         var _a;
         if (dependent !== a) {
           let dirtyCount = dirtyMap.get(dependent);
@@ -401,7 +419,7 @@ var createStore = () => {
             if (isChanged) {
               const prevAtomState = getAtomState(dependent);
               const nextAtomState = readAtomState(dependent, true);
-              isChanged = !prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState);
+              isChanged = !isEqualAtomValue(prevAtomState, nextAtomState);
             }
             if (!isChanged) {
               dependencyMap.forEach((s) => s.delete(dependent));
@@ -424,7 +442,7 @@ var createStore = () => {
         }
         const prevAtomState = getAtomState(a);
         const nextAtomState = setAtomValueOrPromise(a, args2[0]);
-        if (!prevAtomState || !isEqualAtomValue(prevAtomState, nextAtomState)) {
+        if (!isEqualAtomValue(prevAtomState, nextAtomState)) {
           recomputeDependents(a);
         }
       } else {
@@ -454,15 +472,16 @@ var createStore = () => {
     }
     return result;
   };
-  const mountAtom = (atom2, initialDependent) => {
+  const mountAtom = (atom2, initialDependent, onMountQueue) => {
     var _a;
+    const queue = onMountQueue || [];
     (_a = getAtomState(atom2)) == null ? void 0 : _a.d.forEach((_, a) => {
       const aMounted = mountedMap.get(a);
       if (aMounted) {
         aMounted.t.add(atom2);
       } else {
         if (a !== atom2) {
-          mountAtom(a, atom2);
+          mountAtom(a, atom2, queue);
         }
       }
     });
@@ -476,10 +495,16 @@ var createStore = () => {
       mountedAtoms.add(atom2);
     }
     if (isActuallyWritableAtom(atom2) && atom2.onMount) {
-      const onUnmount = atom2.onMount((...args) => writeAtom(atom2, ...args));
-      if (onUnmount) {
-        mounted.u = onUnmount;
-      }
+      const { onMount } = atom2;
+      queue.push(() => {
+        const onUnmount = onMount((...args) => writeAtom(atom2, ...args));
+        if (onUnmount) {
+          mounted.u = onUnmount;
+        }
+      });
+    }
+    if (!onMountQueue) {
+      queue.forEach((f) => f());
     }
     return mounted;
   };
@@ -548,13 +573,13 @@ var createStore = () => {
       pending.forEach(([atom2, prevAtomState]) => {
         const atomState = getAtomState(atom2);
         if (atomState) {
-          if (atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
+          const mounted = mountedMap.get(atom2);
+          if (mounted && atomState.d !== (prevAtomState == null ? void 0 : prevAtomState.d)) {
             mountDependencies(atom2, atomState, prevAtomState == null ? void 0 : prevAtomState.d);
           }
-          const mounted = mountedMap.get(atom2);
           if (mounted && !// TODO This seems pretty hacky. Hope to fix it.
           // Maybe we could `mountDependencies` in `setAtomState`?
-          (prevAtomState && !hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
+          (!hasPromiseAtomValue(prevAtomState) && (isEqualAtomValue(prevAtomState, atomState) || isEqualAtomError(prevAtomState, atomState)))) {
             mounted.l.forEach((listener) => listener());
             if ((import_meta.env ? import_meta.env.MODE : void 0) !== "production") {
               flushed.add(atom2);
@@ -957,6 +982,7 @@ var findFirstChildStory = (story) => {
 };
 
 // src/components/StoryListView/StoryListView.tsx
+var import_preview_api = require("@storybook/preview-api");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var SectionHeaderText = import_react_native_theming.styled.Text(({ theme: theme3 }) => ({
   fontSize: theme3.storyList.fontSize,
@@ -1171,7 +1197,8 @@ var StoryListView = ({ storyIndex }) => {
     setData(filterNestedStories(originalData, query));
   };
   const changeStory = (storyId) => {
-    global.__STORYBOOK_ADDONS_CHANNEL__.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
+    const channel = import_preview_api.addons.getChannel();
+    channel.emit(import_core_events.default.SET_CURRENT_STORY, { storyId });
   };
   const renderItem = import_react3.default.useCallback(({ item }) => {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RenderItem, { item, changeStory });
@@ -1916,8 +1943,57 @@ var OnDeviceUI = ({
 var OnDeviceUI_default = import_react15.default.memo(OnDeviceUI);
 
 // src/View.tsx
+var import_channels = require("@storybook/channels");
+var import_core_events2 = __toESM(require("@storybook/core-events"));
 var import_deepmerge = __toESM(require("deepmerge"));
 var import_react_native16 = require("react-native");
+
+// src/rn-host-detect.js
+function getByRemoteConfig(hostname) {
+  var remoteModuleConfig = window?.__fbBatchedBridgeConfig?.remoteModuleConfig;
+  if (!Array.isArray(remoteModuleConfig) || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return { hostname, passed: false };
+  }
+  var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+  if (constants) {
+    var serverHost = constants.ServerHost || hostname;
+    return { hostname: serverHost.split(":")[0], passed: true };
+  }
+  return { hostname, passed: false };
+}
+function getConstants(config) {
+  return config && (config[0] === "AndroidConstants" || config[0] === "PlatformConstants");
+}
+function getByRNRequirePolyfill(hostname) {
+  var NativeModules;
+  var PlatformConstants;
+  var AndroidConstants;
+  if (typeof window === "undefined" || !window.__DEV__ || typeof window.require !== "function" || // RN >= 0.56
+  // TODO: Get NativeModules for RN >= 0.56
+  window.require.name === "metroRequire") {
+    return hostname;
+  }
+  NativeModules = window.require("NativeModules");
+  if (!NativeModules || !NativeModules.PlatformConstants && !NativeModules.AndroidConstants) {
+    return hostname;
+  }
+  PlatformConstants = NativeModules.PlatformConstants;
+  AndroidConstants = NativeModules.AndroidConstants;
+  var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+  return serverHost.split(":")[0];
+}
+function getHost(hostname) {
+  if (typeof __fbBatchedBridge !== "object" || hostname !== "localhost" && hostname !== "127.0.0.1") {
+    return hostname;
+  }
+  var result = getByRemoteConfig(hostname);
+  if (result.passed) {
+    return result.hostname;
+  }
+  return getByRNRequirePolyfill(hostname);
+}
+
+// src/View.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var STORAGE_KEY = "lastOpenedStory";
 var View10 = class {
@@ -1965,25 +2041,33 @@ var View10 = class {
     }
     return { storySpecifier: "*", viewMode: "story" };
   };
-  // _getServerChannel = (params: Partial<Params> = {}) => {
-  //   const host = getHost(params.host || 'localhost');
-  //   const port = `:${params.port || 7007}`;
-  //   const query = params.query || '';
-  //   const websocketType = params.secured ? 'wss' : 'ws';
-  //   const url = `${websocketType}://${host}${port}/${query}`;
-  //   return createWebSocketChannel({
-  //     url,
-  //     async: true,
-  //     onError: async () => {},
-  //   });
-  // };
+  _getServerChannel = (params = {}) => {
+    const host = getHost(params.host || "localhost");
+    const port = `:${params.port || 7007}`;
+    const query = params.query || "";
+    const websocketType = params.secured ? "wss" : "ws";
+    const url = `${websocketType}://${host}${port}/${query}`;
+    return (0, import_channels.createWebSocketChannel)({
+      url,
+      async: true,
+      onError: async () => {
+      }
+    });
+  };
   getStorybookUI = (params = {}) => {
-    const {
-      shouldPersistSelection = true,
-      onDeviceUI = true
-      /* enableWebsockets = false  */
-    } = params;
+    const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
     const initialStory = this._getInitialStory(params);
+    if (enableWebsockets) {
+      console.log("websockets enabled");
+      const channel = this._getServerChannel(params);
+      import_manager_api2.addons.setChannel(channel);
+      import_preview_api2.addons.setChannel(channel);
+      this._channel = channel;
+      this._preview.channel = channel;
+      this._preview.setupListeners();
+      channel.emit(import_core_events2.default.CHANNEL_CREATED);
+      this._preview.initializeWithStoryIndex(this._storyIndex);
+    }
     import_manager_api2.addons.loadAddons({
       store: () => ({
         fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -2052,7 +2136,7 @@ function prepareStories({
   };
   let importMap = {};
   const makeTitle = (fileName, userTitle) => {
-    const title = (0, import_preview_api.userOrAutoTitle)(fileName, storyEntries, userTitle);
+    const title = (0, import_preview_api3.userOrAutoTitle)(fileName, storyEntries, userTitle);
     if (title) {
       return title.replace("./", "");
     } else {
@@ -2112,9 +2196,9 @@ function start({
   storyEntries
 }) {
   const { index, importMap } = prepareStories({ storyEntries });
-  const channel = (0, import_channels.createBrowserChannel)({ page: "preview" });
+  const channel = (0, import_channels2.createBrowserChannel)({ page: "preview" });
   import_manager_api3.addons.setChannel(channel);
-  import_preview_api.addons.setChannel(channel);
+  import_preview_api3.addons.setChannel(channel);
   const previewView = {
     prepareForStory: () => {
       return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, {});
@@ -2155,7 +2239,7 @@ function start({
     global.__STORYBOOK_PREVIEW__ = preview;
     global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  const getProjectAnnotations = async () => (0, import_preview_api.composeConfigs)([
+  const getProjectAnnotations = async () => (0, import_preview_api3.composeConfigs)([
     {
       renderToCanvas: (context) => {
         view._setStory(context.storyContext);

package/dist/preview.d.ts

@@ -1,10 +1,11 @@
-import { R as Renderer, d as StoryContextForEnhancers, e as StrictArgTypes, A as Args } from './index.d-680e82dc.js';
+import * as _storybook_docs_tools from '@storybook/docs-tools';
+import { R as Renderer, d as StoryContextForEnhancers, A as Args, e as StrictArgTypes } from './index.d-82fc9196.js';
 
 declare const _default: {
-    argTypesEnhancers: (<TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer>) => StrictArgTypes<Args>)[];
+    argTypesEnhancers: (<TRenderer extends Renderer>(context: StoryContextForEnhancers<TRenderer, Args>) => StrictArgTypes<Args>)[];
     parameters: {
         docs: {
-            extractArgTypes: any;
+            extractArgTypes: _storybook_docs_tools.ArgTypesExtractor;
         };
     };
 };

package/dist/preview.js

@@ -22,13 +22,13 @@ __export(preview_exports, {
   default: () => preview_default
 });
 module.exports = __toCommonJS(preview_exports);
-var import_config = require("@storybook/react/dist/config");
+var import_entry_preview_docs = require("@storybook/react/dist/entry-preview-docs");
 var import_docs_tools = require("@storybook/docs-tools");
 var preview_default = {
   argTypesEnhancers: [import_docs_tools.enhanceArgTypes],
   parameters: {
     docs: {
-      extractArgTypes: import_config.parameters?.docs?.extractArgTypes
+      extractArgTypes: import_entry_preview_docs.parameters.docs.extractArgTypes
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.0.0-alpha.8",
+  "version": "7.6.8-alpha.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -51,20 +51,20 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/channel-websocket": "7.6.0-alpha.2",
-    "@storybook/channels": "7.6.0-alpha.2",
-    "@storybook/client-logger": "7.6.0-alpha.2",
-    "@storybook/core-client": "7.6.0-alpha.2",
-    "@storybook/core-common": "7.6.0-alpha.2",
-    "@storybook/core-events": "7.6.0-alpha.2",
+    "@storybook/channel-websocket": "7.6.8",
+    "@storybook/channels": "7.6.8",
+    "@storybook/client-logger": "7.6.8",
+    "@storybook/core-client": "7.6.8",
+    "@storybook/core-common": "7.6.8",
+    "@storybook/core-events": "7.6.8",
     "@storybook/csf": "^0.1.1",
-    "@storybook/docs-tools": "7.6.0-alpha.2",
+    "@storybook/docs-tools": "7.6.8",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.6.0-alpha.2",
-    "@storybook/preview-api": "7.6.0-alpha.2",
-    "@storybook/preview-web": "7.6.0-alpha.2",
-    "@storybook/react": "7.6.0-alpha.2",
-    "@storybook/react-native-theming": "^7.0.0-alpha.8",
+    "@storybook/manager-api": "7.6.8",
+    "@storybook/preview-api": "7.6.8",
+    "@storybook/preview-web": "7.6.8",
+    "@storybook/react": "7.6.8",
+    "@storybook/react-native-theming": "^7.6.8-alpha.0",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "deepmerge": "^4.3.0",
@@ -74,7 +74,7 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@storybook/types": "7.6.0-alpha.2",
+    "@storybook/types": "7.6.8",
     "@types/jest": "^29.4.3",
     "@types/react": "~18.2.14",
     "babel-jest": "^29.4.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "c3837299ea85337f08cba55abb896bec7eb6e4ab"
+  "gitHead": "1fd96da743fbaf0da60d5b1080892c877044d374"
 }

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

@@ -24,7 +24,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -54,7 +54,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -84,7 +84,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "
@@ -114,7 +114,7 @@ import "@storybook/addon-ondevice-actions/register";
   global.STORIES = normalizedStories;
 
   export const view = start({
-    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/dist/preview')],
+    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
     storyEntries: normalizedStories
   });
 "

package/scripts/generate.js

@@ -53,7 +53,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   // TODO: implement presets or something similar
   const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions')
-    ? "require('@storybook/addon-actions/dist/preview')"
+    ? "require('@storybook/addon-actions/preview')"
     : '';
 
   const previewExists = getPreviewExists({ configPath });