@storybook/react-native 7.6.15 → 7.6.16

package/dist/V6.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as Params } from './View-425d6066.js';
+import { P as Params } from './View-f2383eb1.js';
 import { ClientApi } from '@storybook/preview-api';
-import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-5b1baa07.js';
+import { L as LoaderFunction, A as Addon_StoryApi } from './index.d-7581c6d0.js';
 import { ReactNode } from 'react';
 import { ReactRenderer } from '@storybook/react';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';

package/dist/{View-425d6066.d.ts → View-f2383eb1.d.ts}

@@ -3,7 +3,7 @@ import { StoryContext } from '@storybook/csf';
 import { PreviewWithSelection } from '@storybook/preview-web';
 import { ReactRenderer } from '@storybook/react';
 import { Theme } from '@storybook/react-native-theming';
-import { a as StoryIndex, P as PreparedStory } from './index.d-5b1baa07.js';
+import { a as StoryIndex, b as PreparedStory } from './index.d-7581c6d0.js';
 import { Channel } from '@storybook/channels';
 
 interface Storage {

package/dist/{index.d-5b1baa07.d.ts → index.d-7581c6d0.d.ts}

@@ -22,6 +22,90 @@ declare global {
 	}
 }
 
+/**
+@see Simplify
+*/
+interface SimplifyOptions {
+	/**
+	Do the simplification recursively.
+
+	@default false
+	*/
+	deep?: boolean;
+}
+
+// Flatten a type without worrying about the result.
+type Flatten<
+	AnyType,
+	Options extends SimplifyOptions = {},
+> = Options['deep'] extends true
+	? {[KeyType in keyof AnyType]: Simplify<AnyType[KeyType], Options>}
+	: {[KeyType in keyof AnyType]: AnyType[KeyType]};
+
+/**
+Useful to flatten the type output to improve type hints shown in editors. And also to transform an interface into a type to aide with assignability.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+type PositionProps = {
+	top: number;
+	left: number;
+};
+
+type SizeProps = {
+	width: number;
+	height: number;
+};
+
+// In your editor, hovering over `Props` will show a flattened object with all the properties.
+type Props = Simplify<PositionProps & SizeProps>;
+```
+
+Sometimes it is desired to pass a value as a function argument that has a different type. At first inspection it may seem assignable, and then you discover it is not because the `value`'s type definition was defined as an interface. In the following example, `fn` requires an argument of type `Record<string, unknown>`. If the value is defined as a literal, then it is assignable. And if the `value` is defined as type using the `Simplify` utility the value is assignable.  But if the `value` is defined as an interface, it is not assignable because the interface is not sealed and elsewhere a non-string property could be added to the interface.
+
+If the type definition must be an interface (perhaps it was defined in a third-party npm package), then the `value` can be defined as `const value: Simplify<SomeInterface> = ...`. Then `value` will be assignable to the `fn` argument.  Or the `value` can be cast as `Simplify<SomeInterface>` if you can't re-declare the `value`.
+
+@example
+```
+import type {Simplify} from 'type-fest';
+
+interface SomeInterface {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+}
+
+type SomeType = {
+	foo: number;
+	bar?: string;
+	baz: number | undefined;
+};
+
+const literal = {foo: 123, bar: 'hello', baz: 456};
+const someType: SomeType = literal;
+const someInterface: SomeInterface = literal;
+
+function fn(object: Record<string, unknown>): void {}
+
+fn(literal); // Good: literal object type is sealed
+fn(someType); // Good: type is sealed
+fn(someInterface); // Error: Index signature for type 'string' is missing in type 'someInterface'. Because `interface` can be re-opened
+fn(someInterface as Simplify<SomeInterface>); // Good: transform an `interface` into a `type`
+```
+
+@link https://github.com/microsoft/TypeScript/issues/15300
+
+@category Object
+*/
+type Simplify<
+	AnyType,
+	Options extends SimplifyOptions = {},
+> = Flatten<AnyType> extends AnyType
+	? Flatten<AnyType, Options>
+	: AnyType;
+
 /**
 Allows creating a union type by combining primitive types and literal types without sacrificing auto-completion in IDEs for the literal type part of the union.
 
@@ -802,12 +886,18 @@ interface StrictInputType extends InputType {
 interface Args {
     [name: string]: any;
 }
+type ArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: InputType;
+};
 type StrictArgTypes<TArgs = Args> = {
     [name in keyof TArgs]: StrictInputType;
 };
 interface Globals {
     [name: string]: any;
 }
+interface GlobalTypes {
+    [name: string]: InputType;
+}
 type Renderer = {
     /** What is the type of the `component` annotation in this renderer? */
     component: unknown;
@@ -828,6 +918,10 @@ interface StoryContextForEnhancers<TRenderer extends Renderer = Renderer, TArgs
     initialArgs: TArgs;
     argTypes: StrictArgTypes<TArgs>;
 }
+type ArgsEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: StoryContextForEnhancers<TRenderer, TArgs>) => TArgs;
+type ArgTypesEnhancer<TRenderer extends Renderer = Renderer, TArgs = Args> = ((context: StoryContextForEnhancers<TRenderer, TArgs>) => StrictArgTypes<TArgs>) & {
+    secondPass?: boolean;
+};
 interface StoryContextUpdate<TArgs = Args> {
     args?: TArgs;
     globals?: Globals;
@@ -845,6 +939,12 @@ interface StoryContext<TRenderer extends Renderer = Renderer, TArgs = Args> exte
     abortSignal: AbortSignal;
     canvasElement: TRenderer['canvasElement'];
 }
+type StepLabel = string;
+type StepFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>) => Promise<void> | void;
+type PlayFunctionContext<TRenderer extends Renderer = Renderer, TArgs = Args> = StoryContext<TRenderer, TArgs> & {
+    step: StepFunction<TRenderer, TArgs>;
+};
+type PlayFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void> | void;
 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 & {
@@ -852,6 +952,49 @@ type ArgsStoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = (args: T
 })['storyResult'];
 type StoryFn<TRenderer extends Renderer = Renderer, TArgs = Args> = LegacyStoryFn<TRenderer, TArgs> | ArgsStoryFn<TRenderer, TArgs>;
 type DecoratorFunction<TRenderer extends Renderer = Renderer, TArgs = Args> = (fn: PartialStoryFn<TRenderer, TArgs>, c: StoryContext<TRenderer, TArgs>) => TRenderer['storyResult'];
+type DecoratorApplicator<TRenderer extends Renderer = Renderer, TArgs = Args> = (storyFn: LegacyStoryFn<TRenderer, TArgs>, decorators: DecoratorFunction<TRenderer, TArgs>[]) => LegacyStoryFn<TRenderer, TArgs>;
+type StepRunner<TRenderer extends Renderer = Renderer, TArgs = Args> = (label: StepLabel, play: PlayFunction<TRenderer, TArgs>, context: PlayFunctionContext<TRenderer, TArgs>) => Promise<void>;
+type BaseAnnotations<TRenderer extends Renderer = Renderer, TArgs = Args> = {
+    /**
+     * Wrapper components or Storybook decorators that wrap a story.
+     *
+     * Decorators defined in Meta will be applied to every story variation.
+     * @see [Decorators](https://storybook.js.org/docs/addons/introduction/#1-decorators)
+     */
+    decorators?: DecoratorFunction<TRenderer, Simplify<TArgs>>[] | DecoratorFunction<TRenderer, Simplify<TArgs>>;
+    /**
+     * Custom metadata for a story.
+     * @see [Parameters](https://storybook.js.org/docs/basics/writing-stories/#parameters)
+     */
+    parameters?: Parameters;
+    /**
+     * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
+     * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
+     */
+    args?: Partial<TArgs>;
+    /**
+     * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
+     * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
+     */
+    argTypes?: Partial<ArgTypes<TArgs>>;
+    /**
+     * Asynchronous functions which provide data for a story.
+     * @see [Loaders](https://storybook.js.org/docs/react/writing-stories/loaders)
+     */
+    loaders?: LoaderFunction<TRenderer, TArgs>[] | LoaderFunction<TRenderer, TArgs>;
+    /**
+     * Define a custom render function for the story(ies). If not passed, a default render function by the renderer will be used.
+     */
+    render?: ArgsStoryFn<TRenderer, TArgs>;
+};
+type ProjectAnnotations$1<TRenderer extends Renderer = Renderer, TArgs = Args> = BaseAnnotations<TRenderer, TArgs> & {
+    argsEnhancers?: ArgsEnhancer<TRenderer, Args>[];
+    argTypesEnhancers?: ArgTypesEnhancer<TRenderer, Args>[];
+    globals?: Globals;
+    globalTypes?: GlobalTypes;
+    applyDecorators?: DecoratorApplicator<TRenderer, Args>;
+    runStep?: StepRunner<TRenderer, TArgs>;
+};
 
 interface Plugin {
     (module: Program): Program;
@@ -3256,6 +3399,13 @@ interface Addon_StoryApi<StoryFnReturnType = unknown> {
 }
 type Path = string;
 type ModuleExport = any;
+type MaybePromise<T> = Promise<T> | T;
+type TeardownRenderToCanvas = () => MaybePromise<void>;
+type RenderToCanvas<TRenderer extends Renderer> = (context: RenderContext<TRenderer>, element: TRenderer['canvasElement']) => MaybePromise<void | TeardownRenderToCanvas>;
+type ProjectAnnotations<TRenderer extends Renderer> = ProjectAnnotations$1<TRenderer> & {
+    renderToCanvas?: RenderToCanvas<TRenderer>;
+    renderToDOM?: RenderToCanvas<TRenderer>;
+};
 type PreparedStory<TRenderer extends Renderer = Renderer> = StoryContextForEnhancers<TRenderer> & {
     moduleExport: ModuleExport;
     originalStoryFn: StoryFn<TRenderer>;
@@ -3266,5 +3416,17 @@ type PreparedStory<TRenderer extends Renderer = Renderer> = StoryContextForEnhan
     }>;
     playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
 };
+declare type RenderContext<TRenderer extends Renderer = Renderer> = StoryIdentifier & {
+    showMain: () => void;
+    showError: (error: {
+        title: string;
+        description: string;
+    }) => void;
+    showException: (err: Error) => void;
+    forceRemount: boolean;
+    storyContext: StoryContext<TRenderer>;
+    storyFn: PartialStoryFn<TRenderer>;
+    unboundStoryFn: LegacyStoryFn<TRenderer>;
+};
 
-export { Addon_StoryApi as A, LoaderFunction as L, NormalizedStoriesSpecifier as N, PreparedStory as P, Renderer as R, StorybookConfig as S, StoryIndex as a, StoryContextForEnhancers as b, Args as c, StrictArgTypes as d };
+export { Addon_StoryApi as A, LoaderFunction as L, NormalizedStoriesSpecifier as N, ProjectAnnotations as P, Renderer as R, StorybookConfig as S, StoryIndex as a, PreparedStory as b, StoryContextForEnhancers as c, Args as d, StrictArgTypes as e };

package/dist/index.d.ts

@@ -1,15 +1,27 @@
-import { N as NormalizedStoriesSpecifier, S as StorybookConfig$1 } from './index.d-5b1baa07.js';
+import { N as NormalizedStoriesSpecifier, P as ProjectAnnotations, S as StorybookConfig$1 } from './index.d-7581c6d0.js';
 export { Theme, darkTheme, theme } from '@storybook/react-native-theming';
-import { V as View } from './View-425d6066.js';
+import { V as View } from './View-f2383eb1.js';
+import { ReactRenderer } from '@storybook/react';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';
 import 'react/jsx-runtime';
 import '@storybook/csf';
 import '@storybook/preview-web';
-import '@storybook/react';
 import '@storybook/channels';
 
+declare function prepareStories({ storyEntries, }: {
+    storyEntries: Array<NormalizedStoriesSpecifier & {
+        req: any;
+    }>;
+}): {
+    index: {
+        v: number;
+        entries: {};
+    };
+    importMap: {};
+};
+declare const getProjectAnnotations: (view: View, annotations: any[]) => () => Promise<ProjectAnnotations<ReactRenderer>>;
 declare function start({ annotations, storyEntries, }: {
     storyEntries: Array<NormalizedStoriesSpecifier & {
         req: any;
@@ -22,4 +34,4 @@ interface StorybookConfig {
     addons: string[];
 }
 
-export { StorybookConfig, start };
+export { StorybookConfig, getProjectAnnotations, prepareStories, start };

package/dist/index.js

@@ -59,6 +59,8 @@ var require_dist = __commonJS({
 var src_exports = {};
 __export(src_exports, {
   darkTheme: () => import_react_native_theming13.darkTheme,
+  getProjectAnnotations: () => getProjectAnnotations,
+  prepareStories: () => prepareStories,
   start: () => start,
   theme: () => import_react_native_theming13.theme
 });
@@ -2258,6 +2260,23 @@ function prepareStories({
   });
   return { index, importMap };
 }
+var getProjectAnnotations = (view, annotations) => async () => (0, import_preview_api3.composeConfigs)([
+  {
+    renderToCanvas: (context) => {
+      view._setStory(context.storyContext);
+    },
+    render: (args, context) => {
+      const { id, component: Component } = context;
+      if (!Component) {
+        throw new Error(
+          `Unable to render story ${id} as the component annotation is missing from the default export`
+        );
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
+    }
+  },
+  ...annotations
+]);
 function start({
   annotations,
   storyEntries
@@ -2307,26 +2326,9 @@ function start({
     global.__STORYBOOK_PREVIEW__ = preview;
     global.__STORYBOOK_STORY_STORE__ = preview.storyStore;
   }
-  const getProjectAnnotations = async () => (0, import_preview_api3.composeConfigs)([
-    {
-      renderToCanvas: (context) => {
-        view._setStory(context.storyContext);
-      },
-      render: (args, context) => {
-        const { id, component: Component } = context;
-        if (!Component) {
-          throw new Error(
-            `Unable to render story ${id} as the component annotation is missing from the default export`
-          );
-        }
-        return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Component, { ...args });
-      }
-    },
-    ...annotations
-  ]);
   preview.initialize({
     importFn: async (importPath) => importMap[importPath],
-    getProjectAnnotations,
+    getProjectAnnotations: getProjectAnnotations(view, annotations),
     getStoryIndex: () => index
   });
   view._storyIndex = index;
@@ -2335,6 +2337,8 @@ function start({
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   darkTheme,
+  getProjectAnnotations,
+  prepareStories,
   start,
   theme
 });

package/dist/preview.d.ts

@@ -1,5 +1,5 @@
 import * as _storybook_docs_tools from '@storybook/docs-tools';
-import { R as Renderer, b as StoryContextForEnhancers, c as Args, d as StrictArgTypes } from './index.d-5b1baa07.js';
+import { R as Renderer, c as StoryContextForEnhancers, d as Args, e as StrictArgTypes } from './index.d-7581c6d0.js';
 import 'file-system-cache';
 import '@babel/core';
 import 'http';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "7.6.15",
+  "version": "7.6.16",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -64,7 +64,7 @@
     "@storybook/preview-api": "^7.6.13",
     "@storybook/preview-web": "^7.6.13",
     "@storybook/react": "^7.6.13",
-    "@storybook/react-native-theming": "^7.6.15",
+    "@storybook/react-native-theming": "^7.6.16",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "dedent": "^1.5.1",
@@ -98,5 +98,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "92d1598f2141dfe424426aa24b09744813551735"
+  "gitHead": "4864c24036a7c7f5703269172560be553d297831"
 }

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

@@ -3,8 +3,8 @@
 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -18,23 +18,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -48,23 +73,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./components', true, /^\\.(?:(?:^|\\/|(?:(?:(?!(?:^|\\/)\\.).)*?)\\/)(?!\\.)(?=.)[^/]*?\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -78,23 +128,48 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const 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 } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   import "@storybook/addon-ondevice-notes/register";
 import "@storybook/addon-ondevice-controls/register";
@@ -108,14 +183,39 @@ import "@storybook/addon-ondevice-actions/register";
       importPathMatcher: /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/,
       // @ts-ignore
       req: require.context('./', false, /^\\.[\\\\/](?:FakeStory\\.stories\\.tsx)$/)
-    }]
+    }];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  
+
+  const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
 
-  export const view = start({
-    annotations: [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')],
-    storyEntries: normalizedStories
-  });
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 "
 `;

package/scripts/generate.js

@@ -59,25 +59,52 @@ function generate({ configPath, absolute = false, useJs = false }) {
 
   const annotations = `[${previewExists ? "require('./preview')," : ''}${doctools}, ${enhancer}]`;
 
+  const globalTypes = `
+    declare global {
+      var view: ReturnType<typeof start>;
+      var STORIES: typeof normalizedStories;
+    }
+  `;
+
   const fileContent = `
   /* do not change this file, it is auto generated by storybook. */
-
-  import { start } from '@storybook/react-native';
+  
+  import { start, prepareStories, getProjectAnnotations } from '@storybook/react-native';
   
   ${registerAddons}
 
-  const normalizedStories = [${normalizedStories.join(',')}]
+  const normalizedStories = [${normalizedStories.join(',')}];
 
-  // @ts-ignore
-  global.STORIES = normalizedStories;
+  ${useJs ? '' : globalTypes}
 
-  export const view = start({
-    annotations: ${annotations},
-    storyEntries: normalizedStories
-  });
+  const annotations = ${annotations};
+
+  global.STORIES = normalizedStories;
+  
+  // @ts-ignore
+  module?.hot?.accept?.();
+
+  if (!global.view) {
+    global.view = start({
+      annotations,
+      storyEntries: normalizedStories
+    });
+  } else {
+    const { importMap } = prepareStories({ storyEntries: normalizedStories });
+    
+    global.view._preview.onStoriesChanged({
+      importFn: async (importPath: string) => importMap[importPath],
+    });
+
+    global.view._preview.onGetProjectAnnotationsChanged({
+      getProjectAnnotations: getProjectAnnotations(global.view, annotations),
+    });
+  }
+
+  export const view = global.view;
 `;
 
-  const formattedFileContent = prettier.format(fileContent, { parser: 'babel' });
+  const formattedFileContent = prettier.format(fileContent, { parser: 'babel-ts' });
 
   fs.writeFileSync(storybookRequiresLocation, formattedFileContent, {
     encoding: 'utf8',
@@ -88,16 +115,3 @@ function generate({ configPath, absolute = false, useJs = false }) {
 module.exports = {
   generate,
 };
-
-// TODO evaluate if this is needed
-// if (import.meta.webpackHot) {
-//   import.meta.webpackHot.accept('./{{storiesFilename}}', () => {
-//     // importFn has changed so we need to patch the new one in
-//     preview.onStoriesChanged({ importFn });
-//   });
-
-//   import.meta.webpackHot.accept([{{#each previewAnnotations}}'{{this}}',{{/each}}], () => {
-//     // getProjectAnnotations has changed so we need to patch the new one in
-//     preview.onGetProjectAnnotationsChanged({ getProjectAnnotations });
-//   });
-// }