@storybook/react-native 6.0.1-canary.2 → 6.5.0-rc.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export declare const setAddon: C['setAddon'];
 export declare const addDecorator: C['addDecorator'];
 export declare const addParameters: C['addParameters'];
 export declare const addArgsEnhancer: C['addArgsEnhancer'];
+export declare const addArgTypesEnhancer: C['addArgTypesEnhancer'];
 export declare const clearDecorators: C['clearDecorators'];
 export declare const getStorybook: C['getStorybook'];
 export declare const raw: C['raw'];

package/dist/index.js

@@ -6,6 +6,7 @@ export const setAddon = clientApi.setAddon.bind(clientApi);
 export const addDecorator = clientApi.addDecorator.bind(clientApi);
 export const addParameters = clientApi.addParameters.bind(clientApi);
 export const addArgsEnhancer = clientApi.addArgsEnhancer.bind(clientApi);
+export const addArgTypesEnhancer = clientApi.addArgTypesEnhancer.bind(clientApi);
 export const clearDecorators = clientApi.clearDecorators.bind(clientApi);
 export const getStorybook = clientApi.getStorybook.bind(clientApi);
 export const raw = clientApi.raw.bind(clientApi);

package/dist/preview/View.d.ts

@@ -17,6 +17,12 @@ declare type InitialSelection = `${StoryKind}--${StoryName}` | {
     name: StoryName;
 };
 export declare type Params = {
+    onDeviceUI?: boolean;
+    enableWebsockets?: boolean;
+    query?: string;
+    host?: string;
+    port?: number;
+    secured?: boolean;
     initialSelection?: InitialSelection;
     shouldPersistSelection?: boolean;
     tabOpen?: number;
@@ -33,8 +39,10 @@ export declare class View {
     _ready: boolean;
     _preview: PreviewWeb<ReactNativeFramework>;
     _asyncStorageStoryId: string;
+    _webUrl: string;
     constructor(preview: PreviewWeb<ReactNativeFramework>);
     _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<SelectionSpecifier>;
+    _getServerChannel: (params?: Partial<Params>) => import("@storybook/channels").Channel;
     getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
 }
 export {};

package/dist/preview/View.js

@@ -15,6 +15,10 @@ import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
+import StoryView from './components/StoryView';
+import createChannel from '@storybook/channel-websocket';
+import getHost from './rn-host-detect';
+import events from '@storybook/core-events';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -47,9 +51,30 @@ export class View {
             }
             return { storySpecifier: '*', viewMode: 'story' };
         });
+        this._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 createChannel({
+                url,
+                async: true,
+                onError: () => __awaiter(this, void 0, void 0, function* () { }),
+            });
+        };
         this.getStorybookUI = (params = {}) => {
-            const { shouldPersistSelection = true } = params;
+            const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
             const initialStory = this._getInitialStory(params);
+            if (enableWebsockets) {
+                const channel = this._getServerChannel(params);
+                addons.setChannel(channel);
+                // TODO: check this with someone who knows what they're doing
+                this._preview.channel = channel;
+                this._preview.setupListeners();
+                channel.emit(events.CHANNEL_CREATED);
+                this._preview.initializeWithStoryIndex(this._storyIndex);
+            }
             addons.loadAddons({
                 store: () => ({
                     fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
@@ -80,9 +105,14 @@ export class View {
                         self._preview.selectSpecifiedStory();
                     });
                 }, []);
-                return (React.createElement(SafeAreaProvider, null,
-                    React.createElement(ThemeProvider, { theme: appliedTheme },
-                        React.createElement(OnDeviceUI, { context: context, storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                if (onDeviceUI) {
+                    return (React.createElement(SafeAreaProvider, null,
+                        React.createElement(ThemeProvider, { theme: appliedTheme },
+                            React.createElement(OnDeviceUI, { context: context, storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                }
+                else {
+                    return React.createElement(StoryView, { context: context });
+                }
             };
         };
         this._preview = preview;

package/dist/preview/components/OnDeviceUI/OnDeviceUI.js

@@ -65,12 +65,19 @@ const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoi
             Keyboard.dismiss();
         }
     };
+    const noSafeArea = (_b = (_a = context === null || context === void 0 ? void 0 : context.parameters) === null || _a === void 0 ? void 0 : _a.noSafeArea) !== null && _b !== void 0 ? _b : false;
     const previewWrapperStyles = [
         flex,
-        getPreviewPosition(animatedValue.current, previewDimensions, slideBetweenAnimation, wide),
+        getPreviewPosition({
+            animatedValue: animatedValue.current,
+            previewDimensions,
+            slideBetweenAnimation,
+            wide,
+            noSafeArea,
+            insets,
+        }),
     ];
     const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation, wide)];
-    const noSafeArea = (_b = (_a = context === null || context === void 0 ? void 0 : context.parameters) === null || _a === void 0 ? void 0 : _a.noSafeArea) !== null && _b !== void 0 ? _b : false;
     const WrapperView = noSafeArea ? View : SafeAreaView;
     const wrapperMargin = { marginBottom: isUIVisible ? insets.bottom + 40 : 0 };
     return (React.createElement(React.Fragment, null,
@@ -85,7 +92,10 @@ const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoi
                             tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
                     React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
                         React.createElement(StoryListView, { storyIndex: storyIndex, selectedStoryContext: context })),
-                    React.createElement(Panel, { style: getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide) },
+                    React.createElement(Panel, { style: [
+                            getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            wrapperMargin,
+                        ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
             React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
 };

package/dist/preview/components/OnDeviceUI/animation.d.ts

@@ -1,4 +1,5 @@
 import { Animated } from 'react-native';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
 export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
@@ -12,7 +13,15 @@ export declare const getAddonPanelPosition: (animatedValue: Animated.Value, prev
     }[];
     width: number;
 }[];
-export declare const getPreviewPosition: (animatedValue: Animated.Value, { width: previewWidth, height: previewHeight }: PreviewDimens, slideBetweenAnimation: boolean, wide: boolean) => {
+declare type PreviewPositionArgs = {
+    animatedValue: Animated.Value;
+    previewDimensions: PreviewDimens;
+    slideBetweenAnimation: boolean;
+    wide: boolean;
+    noSafeArea: boolean;
+    insets: EdgeInsets;
+};
+export declare const getPreviewPosition: ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide, noSafeArea, insets, }: PreviewPositionArgs) => {
     transform: ({
         translateX: Animated.AnimatedInterpolation<string | number>;
         translateY?: undefined;
@@ -26,3 +35,4 @@ export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetwe
         scale: Animated.AnimatedInterpolation<string | number>;
     }[];
 };
+export {};

package/dist/preview/components/OnDeviceUI/animation.js

@@ -1,4 +1,6 @@
+import { I18nManager } from 'react-native';
 import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
+const RTL_SCALE = I18nManager.isRTL ? -1 : 1;
 const PREVIEW_SCALE = 0.3;
 const PREVIEW_WIDE_SCREEN = 0.7;
 const SCALE_OFFSET = 0.025;
@@ -15,7 +17,7 @@ export const getNavigatorPanelPosition = (animatedValue, previewWidth, wide) =>
                 {
                     translateX: animatedValue.interpolate({
                         inputRange: [NAVIGATOR, PREVIEW],
-                        outputRange: [0, -panelWidth(previewWidth, wide) - 1],
+                        outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
                     }),
                 },
             ],
@@ -30,7 +32,7 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
                 {
                     translateX: animatedValue.interpolate({
                         inputRange: [PREVIEW, ADDONS],
-                        outputRange: [previewWidth, previewWidth - panelWidth(previewWidth, wide)],
+                        outputRange: [previewWidth * RTL_SCALE, (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE],
                     }),
                 },
             ],
@@ -38,10 +40,11 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
         },
     ];
 };
-export const getPreviewPosition = (animatedValue, { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide) => {
+export const getPreviewPosition = ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide, noSafeArea, insets, }) => {
     const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
-    const translateX = previewWidth / 2 - (previewWidth * scale) / 2 - TRANSLATE_X_OFFSET;
-    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET);
+    const translateX = (previewWidth / 2 - (previewWidth * scale) / 2 - TRANSLATE_X_OFFSET) * RTL_SCALE;
+    const marginTop = noSafeArea ? 0 : insets.top;
+    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET) + marginTop;
     return {
         transform: [
             {
@@ -53,7 +56,7 @@ export const getPreviewPosition = (animatedValue, { width: previewWidth, height:
             {
                 translateY: animatedValue.interpolate({
                     inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-                    outputRange: [translateY, slideBetweenAnimation ? translateY : 0, translateY],
+                    outputRange: [translateY, slideBetweenAnimation ? translateY : marginTop, translateY],
                 }),
             },
         ],

package/dist/preview/components/StoryListView/StoryListView.js

@@ -43,7 +43,7 @@ const ItemTouchable = styled.TouchableOpacity({
     paddingLeft: 40,
     flexDirection: 'row',
     alignItems: 'center',
-}, ({ selected, theme }) => (selected ? { backgroundColor: theme.listItemActiveColor } : {}));
+}, ({ selected, theme }) => { var _a; return (selected ? { backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd' } : {}); });
 const ListItem = React.memo(({ kind, title, selected, onPress }) => (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected },
     React.createElement(StoryIcon, { selected: selected }),
     React.createElement(Name, { selected: selected }, title))), (prevProps, nextProps) => prevProps.selected === nextProps.selected);

package/dist/preview/executeLoadable.js

@@ -13,7 +13,7 @@ export function executeLoadable(loadable) {
         reqs = loadable;
     }
     else if (loadable.keys) {
-        reqs = [loadable];
+        reqs = [loadable]; // todo: test with metro require context
     }
     let exportsMap = new Map();
     if (reqs) {
@@ -32,17 +32,10 @@ export function executeLoadable(loadable) {
     }
     else {
         const exported = loadable();
-        if (Array.isArray(exported) /*FIXME && exported.every((obj) => obj.default != null)*/) {
-            const csfExports = exported.filter((obj) => obj.default != null);
-            exportsMap = new Map(csfExports.map((fileExports, index) => [`exports-map-${index}`, fileExports]));
+        if (typeof exported === 'object') {
+            const csfExports = Object.entries(exported).filter(([_key, value]) => value.default != null);
+            exportsMap = new Map(csfExports.map(([filePath, fileExports]) => [filePath, fileExports]));
         }
-        //  else if (exported) {
-        //   logger.warn(
-        //     `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
-        //       exported
-        //     )}`
-        //   );
-        // }
     }
     return exportsMap;
 }
@@ -56,7 +49,10 @@ global.lastExportsMap = new Map();
  * @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
  */
 export function executeLoadableForChanges(loadable, m) {
-    m.hot.accept();
+    var _a;
+    if ((_a = m === null || m === void 0 ? void 0 : m.hot) === null || _a === void 0 ? void 0 : _a.accept) {
+        m.hot.accept();
+    }
     const lastExportsMap = global.lastExportsMap;
     const exportsMap = executeLoadable(loadable);
     const added = new Map();

package/dist/preview/rn-host-detect.js

@@ -4,9 +4,8 @@
  * When __DEV__ === false, we can't use window.require('NativeModules')
  */
 function getByRemoteConfig(hostname) {
-    var remoteModuleConfig = typeof window !== 'undefined' &&
-        window.__fbBatchedBridgeConfig &&
-        window.__fbBatchedBridgeConfig.remoteModuleConfig;
+    var _a;
+    var remoteModuleConfig = (_a = window === null || window === void 0 ? void 0 : window.__fbBatchedBridgeConfig) === null || _a === void 0 ? void 0 : _a.remoteModuleConfig;
     if (!Array.isArray(remoteModuleConfig) ||
         (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
         return { hostname: hostname, passed: false };

package/dist/preview/start.d.ts

@@ -5,7 +5,6 @@ import { PreviewWeb } from '@storybook/preview-web';
 import { ClientApi } from '@storybook/client-api';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { View } from './View';
-import '../document-polyfill';
 import type { ArgsStoryFn } from '@storybook/csf';
 export declare const render: ArgsStoryFn<ReactNativeFramework>;
 export declare function start(): {

package/dist/preview/start.js

@@ -6,7 +6,6 @@ import { PreviewWeb } from '@storybook/preview-web';
 import { ClientApi, setGlobalRender } from '@storybook/client-api';
 import { View } from './View';
 import { executeLoadableForChanges } from './executeLoadable';
-import '../document-polyfill';
 export const render = (args, context) => {
     const { id, component: Component } = context;
     if (!Component) {
@@ -15,14 +14,32 @@ export const render = (args, context) => {
     return React.createElement(Component, Object.assign({}, args));
 };
 export function start() {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    // TODO: can we get settings from main.js and set the channel here?
     const channel = new Channel({ async: true });
     addons.setChannel(channel);
     const clientApi = new ClientApi();
-    const preview = new PreviewWeb();
-    clientApi.storyStore = preview.storyStore;
-    setGlobalRender(render);
-    preview.urlStore = {
+    const previewView = {
+        prepareForStory: () => null,
+        showNoPreview: () => { },
+        showPreparingStory: () => { },
+        applyLayout: () => { },
+        showErrorDisplay: (e) => {
+            console.log(e);
+        },
+        showStoryDuringRender: () => { },
+        showMain: () => { },
+        checkIfLayoutExists: () => { },
+        showStory: () => { },
+        docsRoot: null,
+        prepareForDocs: () => null,
+        showDocs: () => { },
+        preparingTimeout: setTimeout(() => { }, 0),
+        showMode: () => { },
+        showPreparingDocs: () => { },
+        storyRoot: null,
+        testing: false,
+    };
+    const urlStore = {
         selection: { storyId: '', viewMode: 'story' },
         selectionSpecifier: null,
         setQueryParams: () => { },
@@ -30,11 +47,9 @@ export function start() {
             preview.urlStore.selection = selection;
         },
     };
-    preview.view = Object.assign(Object.assign({}, preview.view), { prepareForStory: () => null, showNoPreview: () => { }, showPreparingStory: () => { }, applyLayout: () => { }, showErrorDisplay: (e) => {
-            console.log(e);
-        }, showStoryDuringRender: () => { }, showMain: () => { }, 
-        // these are just to make typescript happy
-        showDocs: (_a = preview.view) === null || _a === void 0 ? void 0 : _a.showDocs, storyRoot: (_b = preview.view) === null || _b === void 0 ? void 0 : _b.storyRoot, prepareForDocs: (_c = preview.view) === null || _c === void 0 ? void 0 : _c.prepareForDocs, docsRoot: (_d = preview.view) === null || _d === void 0 ? void 0 : _d.docsRoot, checkIfLayoutExists: (_e = preview.view) === null || _e === void 0 ? void 0 : _e.checkIfLayoutExists, showMode: (_f = preview.view) === null || _f === void 0 ? void 0 : _f.showMode, showPreparingDocs: (_g = preview.view) === null || _g === void 0 ? void 0 : _g.showPreparingDocs, showStory: (_h = preview.view) === null || _h === void 0 ? void 0 : _h.showStory });
+    const preview = new PreviewWeb(urlStore, previewView);
+    clientApi.storyStore = preview.storyStore;
+    setGlobalRender(render);
     let initialized = false;
     function onStoriesChanged() {
         const storyIndex = clientApi.getStoryIndex();
@@ -48,7 +63,7 @@ export function start() {
         clientApi,
         preview,
         // This gets called each time the user calls configure (i.e. once per HMR)
-        // The first time, it constructs the preview, subsequently it updates it
+        // The first time, it constructs thecurrentSelection preview, subsequently it updates it
         configure(loadable, m) {
             clientApi.addParameters({ framework: 'react-native' });
             // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations

package/dist/types/types-6.0.d.ts

@@ -1,38 +1,72 @@
-import { Annotations, Args as DefaultArgs, BaseMeta, BaseStory } from '@storybook/addons';
 import { ComponentProps, ComponentType, JSXElementConstructor, ReactElement } from 'react';
+import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
 export declare type StoryFnReactReturnType = ReactElement<unknown>;
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-declare type ReactComponent = ComponentType<any>;
-declare type ReactReturnType = StoryFnReactReturnType;
 export declare type ReactNativeFramework = {
     component: ComponentType<any>;
     storyResult: StoryFnReactReturnType;
 };
 /**
- * Metadata to configure the stories for a component.
+ * For the common case where a component's stories are simple components that receives args as props:
  *
- * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ * ```tsx
+ * export default { ... } as ComponentMeta<typeof Button>;
+ * ```
  */
-export declare type Meta<Args = DefaultArgs> = BaseMeta<ReactComponent> & Annotations<Args, ReactReturnType>;
+export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
 /**
- * Story function that represents a component example.
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
- * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ * ```tsx
+ * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
+ * ```
  */
-export declare type Story<Args = DefaultArgs> = BaseStory<Args, ReactReturnType> & Annotations<Args, ReactReturnType>;
+export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
 /**
- * For the common case where a component's stories are simple components that receives args as props:
+ * For the common case where a (CSFv3) story is a simple component that receives args as props:
  *
  * ```tsx
- * export default { ... } as ComponentMeta<typeof Button>;
+ * const MyStory: ComponentStory<typeof Button> = {
+ *   args: { buttonArg1: 'val' },
+ * }
  * ```
  */
-export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
+export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
 /**
- * For the common case where a story is a simple component that receives args as props:
+ * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
  * ```tsx
  * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
  * ```
+ *
+ * NOTE: this is an alias for `ComponentStoryFn`.
+ * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
  */
 export declare type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
+/**
+ * Metadata to configure the stories for a component.
+ *
+ * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
+ */
+export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv3 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ */
+export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
+/**
+ * Story function that represents a CSFv2 component example.
+ *
+ * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
+ *
+ * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
+ *
+ */
+export declare type Story<TArgs = Args> = StoryFn<TArgs>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.0.1-canary.2",
+  "version": "6.5.0-rc.0",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -28,7 +28,8 @@
     "README.md",
     "*.js",
     "*.d.ts",
-    "scripts/*"
+    "scripts/*",
+    "template/**/*"
   ],
   "scripts": {
     "preprepare": "rm -rf dist/",
@@ -49,15 +50,15 @@
   "dependencies": {
     "@emotion/core": "^10.0.20",
     "@emotion/native": "^10.0.14",
-    "@storybook/addons": "^6.5",
-    "@storybook/channel-websocket": "^6.5",
-    "@storybook/channels": "^6.5",
-    "@storybook/client-api": "^6.5",
-    "@storybook/client-logger": "^6.5",
-    "@storybook/core-client": "^6.5",
-    "@storybook/core-events": "^6.5",
-    "@storybook/csf": "0.0.2--canary.7c6c115.0",
-    "@storybook/preview-web": "^6.5",
+    "@storybook/addons": "^6.5.14",
+    "@storybook/channel-websocket": "^6.5.14",
+    "@storybook/channels": "^6.5.14",
+    "@storybook/client-api": "^6.5.14",
+    "@storybook/client-logger": "^6.5.14",
+    "@storybook/core-client": "^6.5.14",
+    "@storybook/core-events": "^6.5.14",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/preview-web": "^6.5.14",
     "chokidar": "^3.5.1",
     "commander": "^8.2.0",
     "emotion-theming": "^10.0.19",
@@ -85,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "52a7417c1da6d6056924a03882eb82f592d88678"
+  "gitHead": "9ce9d2794c2b7f1f3c177efb8563862255389f07"
 }