@storybook/react-native 6.0.1-beta.7 → 6.0.1-canary.0

package/dist/document-polyfill/DOM/Document.d.ts

@@ -0,0 +1,14 @@
+export default Document;
+declare class Document extends Element {
+    constructor();
+    body: Element;
+    documentElement: Element;
+    readyState: string;
+    createElement(tagName: any): Element;
+    createElementNS(tagName: any): Element;
+    getElementById(id: any): Element;
+    location: {
+        search: string;
+    };
+}
+import Element from "./Element";

package/dist/document-polyfill/DOM/Document.js

@@ -0,0 +1,37 @@
+import Element from './Element';
+import HTMLVideoElement from './HTMLVideoElement';
+import HTMLImageElement from './HTMLImageElement';
+import HTMLCanvasElement from './HTMLCanvasElement';
+class Document extends Element {
+    constructor() {
+        super('#document');
+        this.location = { search: '' };
+        this.body = new Element('BODY');
+        this.documentElement = new Element('HTML');
+        this.readyState = 'complete';
+    }
+    createElement(tagName) {
+        switch ((tagName || '').toLowerCase()) {
+            case 'video':
+                return new HTMLVideoElement(tagName);
+            case 'img':
+                return new HTMLImageElement(tagName);
+            case 'canvas':
+                return new HTMLCanvasElement(tagName);
+            case 'iframe':
+                // Return nothing to keep firebase working.
+                return null;
+            default:
+                return new Element(tagName);
+        }
+    }
+    createElementNS(tagName) {
+        const element = this.createElement(tagName);
+        element.toDataURL = () => ({});
+        return element;
+    }
+    getElementById(id) {
+        return new Element('div');
+    }
+}
+export default Document;

package/dist/document-polyfill/DOM/Element.d.ts

@@ -0,0 +1,37 @@
+export default Element;
+declare class Element extends Node {
+    doc: {
+        body: {
+            innerHTML: string;
+        };
+    };
+    get tagName(): any;
+    get clientWidth(): number;
+    get clientHeight(): number;
+    get offsetWidth(): number;
+    get offsetHeight(): number;
+    get innerWidth(): number;
+    get innerHeight(): number;
+    getContext(contextType: any, contextOptions: any, context: any): {
+        fillText: (text: any, x: any, y: any, maxWidth: any) => {};
+        measureText: (text: any) => {
+            width: number;
+            height: number;
+        };
+        fillRect: () => {};
+        drawImage: () => {};
+        getImageData: () => {
+            data: Uint8ClampedArray;
+        };
+        getContextAttributes: () => {
+            stencil: boolean;
+        };
+        getExtension: () => {
+            loseContext: () => void;
+        };
+        putImageData: () => {};
+        createImageData: () => {};
+    };
+    get ontouchstart(): {};
+}
+import Node from "./Node";

package/dist/document-polyfill/DOM/Element.js

@@ -0,0 +1,58 @@
+import Node from './Node';
+class Element extends Node {
+    constructor(tagName) {
+        return super(tagName.toUpperCase());
+        // eslint-disable-next-line no-unreachable
+        this.doc = {
+            body: {
+                innerHTML: '',
+            },
+        };
+    }
+    get tagName() {
+        return this.nodeName;
+    }
+    setAttributeNS() { }
+    get clientWidth() {
+        return this.innerWidth;
+    }
+    get clientHeight() {
+        return this.innerHeight;
+    }
+    get offsetWidth() {
+        return this.innerWidth;
+    }
+    get offsetHeight() {
+        return this.innerHeight;
+    }
+    get innerWidth() {
+        return window.innerWidth;
+    }
+    get innerHeight() {
+        return window.innerHeight;
+    }
+    getContext(contextType, contextOptions, context) {
+        return {
+            fillText: (text, x, y, maxWidth) => ({}),
+            measureText: (text) => ({
+                width: (text || '').split('').length * 6,
+                height: 24,
+            }),
+            fillRect: () => ({}),
+            drawImage: () => ({}),
+            getImageData: () => ({ data: new Uint8ClampedArray([255, 0, 0, 0]) }),
+            getContextAttributes: () => ({
+                stencil: true,
+            }),
+            getExtension: () => ({
+                loseContext: () => { },
+            }),
+            putImageData: () => ({}),
+            createImageData: () => ({}),
+        };
+    }
+    get ontouchstart() {
+        return {};
+    }
+}
+export default Element;

package/dist/document-polyfill/DOM/HTMLCanvasElement.d.ts

@@ -0,0 +1,4 @@
+export default HTMLCanvasElement;
+declare class HTMLCanvasElement extends Element {
+}
+import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLCanvasElement.js

@@ -0,0 +1,4 @@
+import Element from './Element';
+class HTMLCanvasElement extends Element {
+}
+export default HTMLCanvasElement;

package/dist/document-polyfill/DOM/HTMLImageElement.d.ts

@@ -0,0 +1,4 @@
+export default HTMLImageElement;
+declare class HTMLImageElement extends Element {
+}
+import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLImageElement.js

@@ -0,0 +1,4 @@
+import Element from './Element';
+class HTMLImageElement extends Element {
+}
+export default HTMLImageElement;

package/dist/document-polyfill/DOM/HTMLVideoElement.d.ts

@@ -0,0 +1,4 @@
+export default HTMLVideoElement;
+declare class HTMLVideoElement extends Element {
+}
+import Element from "./Element";

package/dist/document-polyfill/DOM/HTMLVideoElement.js

@@ -0,0 +1,4 @@
+import Element from './Element';
+class HTMLVideoElement extends Element {
+}
+export default HTMLVideoElement;

package/dist/document-polyfill/DOM/Node.d.ts

@@ -0,0 +1,26 @@
+export default Node;
+declare class Node {
+    constructor(nodeName: any);
+    addEventListener(_eventName: any, _listener: any): void;
+    removeEventListener(_eventName: any, _listener: any): void;
+    style: {};
+    className: {
+        baseVal: string;
+    };
+    nodeName: any;
+    get ownerDocument(): Document;
+    appendChild(): void;
+    insertBefore(): void;
+    removeChild(): void;
+    setAttributeNS(): void;
+    getBoundingClientRect(): {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}

package/dist/document-polyfill/DOM/Node.js

@@ -0,0 +1,33 @@
+class Node {
+    constructor(nodeName) {
+        this.addEventListener = this.addEventListener.bind(this);
+        this.removeEventListener = this.removeEventListener.bind(this);
+        this.style = {};
+        this.className = {
+            baseVal: '',
+        };
+        this.nodeName = nodeName;
+    }
+    get ownerDocument() {
+        return window.document;
+    }
+    addEventListener(_eventName, _listener) { }
+    removeEventListener(_eventName, _listener) { }
+    appendChild() { }
+    insertBefore() { }
+    removeChild() { }
+    setAttributeNS() { }
+    getBoundingClientRect() {
+        return {
+            left: 0,
+            top: 0,
+            right: window.innerWidth,
+            bottom: window.innerHeight,
+            x: 0,
+            y: 0,
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+    }
+}
+export default Node;

package/dist/document-polyfill/index.js

@@ -0,0 +1,3 @@
+// this is temporary until we can solve the preview web crashing the app by accessing document
+// adjusted from expo/browser-polyfill to not require external dependencies https://github.com/expo/browser-polyfill
+import './module';

package/dist/document-polyfill/module.js

@@ -0,0 +1 @@
+// do nothing

package/dist/document-polyfill/module.native.js

@@ -0,0 +1,2 @@
+import Document from './DOM/Document';
+window.document = window.document || new Document();

package/dist/index.d.ts

@@ -3,16 +3,17 @@
 import { StoryApi } from '@storybook/addons';
 import { ClientApi } from '@storybook/client-api';
 import { ReactNode } from 'react';
-import Preview from './preview';
-export declare const preview: Preview;
-export declare const setAddon: ClientApi['setAddon'];
-export declare const addDecorator: ClientApi['addDecorator'];
-export declare const addParameters: ClientApi['addParameters'];
-export declare const addArgsEnhancer: ClientApi['addArgsEnhancer'];
-export declare const clearDecorators: ClientApi['clearDecorators'];
-export declare const configure: (loadable: import("@storybook/core-client").Loadable, m: NodeModule, showDeprecationWarning: boolean) => void;
-export declare const getStorybook: ClientApi['getStorybook'];
-export declare const getStorybookUI: (params?: Partial<import("./preview/Preview").Params>) => () => JSX.Element;
-export declare const raw: ClientApi['raw'];
+import type { ReactNativeFramework } from './types/types-6.0';
+declare const configure: (loadable: import("@storybook/core-client").Loadable) => void;
+export { configure };
+declare type C = ClientApi<ReactNativeFramework>;
+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 clearDecorators: C['clearDecorators'];
+export declare const getStorybook: C['getStorybook'];
+export declare const raw: C['raw'];
 export declare const storiesOf: (kind: string, module: NodeModule) => StoryApi<ReactNode>;
-export * from './types-6.0';
+export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
+export * from './types/types-6.0';

package/dist/index.js

@@ -1,18 +1,14 @@
-import Preview from './preview';
-export const preview = new Preview();
-const rawStoriesOf = preview.api().storiesOf.bind(preview);
-export const setAddon = preview.api().setAddon.bind(preview);
-export const addDecorator = preview.api().addDecorator.bind(preview);
-export const addParameters = preview.api().addParameters.bind(preview);
-export const addArgsEnhancer = preview
-    .api()
-    .addArgsEnhancer.bind(preview);
-export const clearDecorators = preview
-    .api()
-    .clearDecorators.bind(preview);
-export const configure = preview.configure;
-export const getStorybook = preview.api().getStorybook.bind(preview);
-export const getStorybookUI = preview.getStorybookUI;
-export const raw = preview.api().raw.bind(preview);
+import { start } from './preview/start';
+const { clientApi, configure, view } = start();
+export { configure };
+const rawStoriesOf = clientApi.storiesOf.bind(clientApi);
+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 clearDecorators = clientApi.clearDecorators.bind(clientApi);
+export const getStorybook = clientApi.getStorybook.bind(clientApi);
+export const raw = clientApi.raw.bind(clientApi);
 export const storiesOf = (kind, module) => rawStoriesOf(kind, module).addParameters({ framework: 'react-native' });
-export * from './types-6.0';
+export const getStorybookUI = view.getStorybookUI;
+export * from './types/types-6.0';

package/dist/preview/View.d.ts

@@ -0,0 +1,40 @@
+/// <reference types="react" />
+import { StoryIndex, SelectionSpecifier } from '@storybook/store';
+import { StoryContext } from '@storybook/csf';
+import { theme } from './components/Shared/theme';
+import type { ReactNativeFramework } from '../types/types-6.0';
+import { PreviewWeb } from '@storybook/preview-web';
+declare type StoryKind = string;
+declare type StoryName = string;
+declare type InitialSelection = `${StoryKind}--${StoryName}` | {
+    /**
+     * Kind is the default export name or the storiesOf("name") name
+     */
+    kind: StoryKind;
+    /**
+     * Name is the named export or the .add("name") name
+     */
+    name: StoryName;
+};
+export declare type Params = {
+    initialSelection?: InitialSelection;
+    shouldPersistSelection?: boolean;
+    tabOpen?: number;
+    isUIHidden?: boolean;
+    shouldDisableKeyboardAvoidingView?: boolean;
+    keyboardAvoidingViewVerticalOffset?: number;
+} & {
+    theme?: typeof theme;
+};
+export declare class View {
+    _storyIndex: StoryIndex;
+    _setStory: (story: StoryContext<ReactNativeFramework>) => void;
+    _forceRerender: () => void;
+    _ready: boolean;
+    _preview: PreviewWeb<ReactNativeFramework>;
+    _asyncStorageStoryId: string;
+    constructor(preview: PreviewWeb<ReactNativeFramework>);
+    _getInitialStory: ({ initialSelection, shouldPersistSelection, }?: Partial<Params>) => Promise<SelectionSpecifier>;
+    getStorybookUI: (params?: Partial<Params>) => () => JSX.Element;
+}
+export {};

package/dist/preview/View.js

@@ -0,0 +1,90 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import React, { useEffect, useState, useReducer } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { toId } from '@storybook/csf';
+import { addons } from '@storybook/addons';
+import { ThemeProvider } from 'emotion-theming';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import OnDeviceUI from './components/OnDeviceUI';
+import { theme } from './components/Shared/theme';
+const STORAGE_KEY = 'lastOpenedStory';
+export class View {
+    constructor(preview) {
+        this._setStory = () => { };
+        this._ready = false;
+        this._getInitialStory = ({ initialSelection, shouldPersistSelection = true, } = {}) => __awaiter(this, void 0, void 0, function* () {
+            if (initialSelection) {
+                if (typeof initialSelection === 'string') {
+                    return { storySpecifier: initialSelection, viewMode: 'story' };
+                }
+                else {
+                    return {
+                        storySpecifier: toId(initialSelection.kind, initialSelection.name),
+                        viewMode: 'story',
+                    };
+                }
+            }
+            if (shouldPersistSelection) {
+                try {
+                    let value = this._asyncStorageStoryId;
+                    if (!value) {
+                        value = yield AsyncStorage.getItem(STORAGE_KEY);
+                        this._asyncStorageStoryId = value;
+                    }
+                    return { storySpecifier: value, viewMode: 'story' };
+                }
+                catch (e) {
+                    console.warn('storybook-log: error reading from async storage', e);
+                }
+            }
+            return { storySpecifier: '*', viewMode: 'story' };
+        });
+        this.getStorybookUI = (params = {}) => {
+            const { shouldPersistSelection = true } = params;
+            const initialStory = this._getInitialStory(params);
+            addons.loadAddons({
+                store: () => ({
+                    fromId: (id) => this._preview.storyStore.getStoryContext(this._preview.storyStore.fromId(id)),
+                    getSelection: () => {
+                        return this._preview.currentSelection;
+                    },
+                    _channel: this._preview.channel,
+                }),
+            });
+            // eslint-disable-next-line consistent-this
+            const self = this;
+            const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
+            return () => {
+                const [context, setContext] = useState();
+                const [, forceUpdate] = useReducer((x) => x + 1, 0);
+                useEffect(() => {
+                    self._setStory = (newStory) => {
+                        setContext(newStory);
+                        if (shouldPersistSelection) {
+                            AsyncStorage.setItem(STORAGE_KEY, newStory.id).catch((e) => {
+                                console.warn('storybook-log: error writing to async storage', e);
+                            });
+                        }
+                    };
+                    self._forceRerender = () => forceUpdate();
+                    initialStory.then((story) => {
+                        self._preview.urlStore.selectionSpecifier = story;
+                        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 }))));
+            };
+        };
+        this._preview = preview;
+    }
+}

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

@@ -1,13 +1,16 @@
-import { StoryStore } from '@storybook/client-api';
+import { StoryIndex } from '@storybook/client-api';
 import React from 'react';
+import { StoryContext } from '@storybook/csf';
+import { ReactNativeFramework } from 'src/types/types-6.0';
 export declare const IS_EXPO: boolean;
 interface OnDeviceUIProps {
-    storyStore: StoryStore;
+    context: StoryContext<ReactNativeFramework>;
+    storyIndex: StoryIndex;
     url?: string;
     tabOpen?: number;
     isUIHidden?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
 export default _default;

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

@@ -1,8 +1,6 @@
 import styled from '@emotion/native';
-import { addons } from '@storybook/addons';
-import React, { useState, useEffect, useRef, useReducer } from 'react';
-import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, } from 'react-native';
-import Events from '@storybook/core-events';
+import React, { useState, useRef } from 'react';
+import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
@@ -12,6 +10,7 @@ import Navigation from './navigation';
 import { PREVIEW, ADDONS } from './navigation/constants';
 import Panel from './Panel';
 import { useWindowDimensions } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 const ANIMATION_DURATION = 300;
 const IS_IOS = Platform.OS === 'ios';
 // @ts-ignore: Property 'Expo' does not exist on type 'Global'
@@ -37,34 +36,19 @@ const absolutePosition = {
 const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
-const useSelectedStory = (storyStore) => {
-    var _a;
-    const [storyId, setStoryId] = useState(((_a = storyStore.getSelection()) === null || _a === void 0 ? void 0 : _a.storyId) || '');
-    const [, forceUpdate] = useReducer((x) => x + 1, 0);
-    const channel = useRef(addons.getChannel());
-    useEffect(() => {
-        const handleStoryWasSet = ({ id: newStoryId }) => setStoryId(newStoryId);
-        const currentChannel = channel.current;
-        channel.current.on(Events.SELECT_STORY, handleStoryWasSet);
-        //TODO: update preview without force
-        channel.current.on(Events.FORCE_RE_RENDER, forceUpdate);
-        return () => {
-            currentChannel.removeListener(Events.SELECT_STORY, handleStoryWasSet);
-            currentChannel.removeListener(Events.FORCE_RE_RENDER, forceUpdate);
-        };
-    }, []);
-    return storyStore.fromId(storyId);
-};
-const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
+const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
+    var _a, _b;
     const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
     const [slideBetweenAnimation, setSlideBetweenAnimation] = useState(false);
     const [previewDimensions, setPreviewDimensions] = useState({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
     });
-    const story = useSelectedStory(storyStore);
+    // const story = useSelectedStory(storyStore);
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
+    const insets = useSafeAreaInsets();
+    const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
     const handleToggleTab = (newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
@@ -87,18 +71,23 @@ const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView,
         getPreviewPosition(animatedValue.current, previewDimensions, slideBetweenAnimation, wide),
     ];
     const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation, wide)];
-    return (React.createElement(SafeAreaView, { style: [flex, IS_ANDROID && IS_EXPO && styles.expoAndroidContainer] },
-        React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex },
-            React.createElement(AbsolutePositionedKeyboardAwareView, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
-                React.createElement(Animated.View, { style: previewWrapperStyles },
-                    React.createElement(Animated.View, { style: previewStyles },
-                        React.createElement(Preview, { disabled: tabOpen === PREVIEW },
-                            React.createElement(StoryView, { story: story })),
-                        tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
-                React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
-                    React.createElement(StoryListView, { storyStore: storyStore, selectedStory: story })),
-                React.createElement(Panel, { style: getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide) },
-                    React.createElement(Addons, { active: tabOpen === ADDONS }))),
-            React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, initialUiVisible: !isUIHidden }))));
+    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,
+        React.createElement(View, { style: [flex, IS_ANDROID && IS_EXPO && styles.expoAndroidContainer] },
+            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardAvoidingViewVerticalOffset, style: flex },
+                React.createElement(AbsolutePositionedKeyboardAwareView, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
+                    React.createElement(Animated.View, { style: previewWrapperStyles },
+                        React.createElement(Animated.View, { style: previewStyles },
+                            React.createElement(Preview, { disabled: tabOpen === PREVIEW },
+                                React.createElement(WrapperView, { style: [flex, wrapperMargin] },
+                                    React.createElement(StoryView, { context: context }))),
+                            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(Addons, { active: tabOpen === ADDONS })))),
+            React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
 };
 export default React.memo(OnDeviceUI);

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
+// @ts-ignore styled is being weird ;(
 const Container = styled(Animated.View)(({ theme }) => ({
     backgroundColor: theme.backgroundColor || 'white',
 }));

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

@@ -2,27 +2,27 @@ import { Animated } from 'react-native';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
 export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
     width: number;
 }[];
 export declare const getAddonPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
     width: number;
 }[];
 export declare const getPreviewPosition: (animatedValue: Animated.Value, { width: previewWidth, height: previewHeight }: PreviewDimens, slideBetweenAnimation: boolean, wide: boolean) => {
     transform: ({
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
         translateY?: undefined;
     } | {
-        translateY: Animated.AnimatedInterpolation;
+        translateY: Animated.AnimatedInterpolation<string | number>;
         translateX?: undefined;
     })[];
 };
 export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetweenAnimation: boolean, wide: boolean) => {
     transform: {
-        scale: Animated.AnimatedInterpolation;
+        scale: Animated.AnimatedInterpolation<string | number>;
     }[];
 };

package/dist/preview/components/OnDeviceUI/navigation/Bar.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { ViewStyle } from 'react-native';
 export interface Props {
     index: number;
     onPress: (id: number) => void;
+    style: ViewStyle;
 }
-declare const _default: React.MemoExoticComponent<({ index, onPress }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ index, onPress, style }: Props) => JSX.Element>;
 export default _default;