@storybook/react-native 6.0.1-beta.1 → 6.0.1-beta.11

package/dist/index.d.ts

@@ -3,16 +3,18 @@
 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'];
-export declare const storiesOf: (kind: string, module: NodeModule) => StoryApi<ReactNode>;
-export * from './types-6.0';
+import type { ReactNativeFramework } from './types/types-6.0';
+declare const configure: (loadable: import("@storybook/core-client").Loadable, m: NodeModule) => 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 addArgTypesEnhancer: C['addArgTypesEnhancer'];
+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 declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
+export * from './types/types-6.0';

package/dist/index.js

@@ -1,18 +1,17 @@
-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);
-export const storiesOf = (kind, module) => rawStoriesOf(kind, module).addParameters({ framework: 'react-native' });
-export * from './types-6.0';
+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 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);
+export const storiesOf = (kind, _module) => rawStoriesOf(kind, { hot: () => { } }).addParameters({
+    framework: 'react-native',
+});
+export const getStorybookUI = view.getStorybookUI;
+export * from './types/types-6.0';

package/dist/preview/View.d.ts

@@ -0,0 +1,48 @@
+/// <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 = {
+    onDeviceUI?: boolean;
+    enableWebsockets?: boolean;
+    query?: string;
+    host?: string;
+    port?: number;
+    secured?: boolean;
+    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;
+    _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

@@ -0,0 +1,120 @@
+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';
+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) {
+        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 !== null && value !== void 0 ? value : '*', viewMode: 'story' };
+                }
+                catch (e) {
+                    console.warn('storybook-log: error reading from async storage', e);
+                }
+            }
+            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, 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)),
+                    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();
+                    });
+                }, []);
+                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.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,18 @@ 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 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;
@@ -82,23 +65,38 @@ const OnDeviceUI = ({ storyStore, isUIHidden, shouldDisableKeyboardAvoidingView,
             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)];
-    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 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),
+                            wrapperMargin,
+                        ] },
+                        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

@@ -1,28 +1,38 @@
 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: {
-        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) => {
+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;
+        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>;
     }[];
 };
+export {};

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

@@ -38,10 +38,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 marginTop = noSafeArea ? 0 : insets.top;
+    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET) + marginTop;
     return {
         transform: [
             {
@@ -53,7 +54,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/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;

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

@@ -10,7 +10,7 @@ const Container = styled.View(({ theme }) => ({
     borderBottomWidth: 1,
     borderColor: theme.borderColor || '#e6e6e6',
 }));
-const Bar = ({ index, onPress }) => (React.createElement(Container, null,
+const Bar = ({ index, onPress, style }) => (React.createElement(Container, { style: style },
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));

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

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Dispatch, SetStateAction } from 'react';
 interface Props {
-    initialUiVisible?: boolean;
     tabOpen: number;
     onChangeTab: (index: number) => void;
+    isUIVisible: boolean;
+    setIsUIVisible: Dispatch<SetStateAction<boolean>>;
 }
-declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, initialUiVisible }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }: Props) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { View, SafeAreaView } from 'react-native';
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import Bar from './Bar';
 import VisibilityButton from './VisibilityButton';
@@ -7,8 +8,14 @@ const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
     directionalOffsetThreshold: 80,
 };
-const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
-    const [isUIVisible, setIsUIVisible] = useState(initialUiVisible !== undefined ? initialUiVisible : true);
+const navStyle = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
+    const insets = useSafeAreaInsets();
     const handleToggleUI = () => {
         setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
     };
@@ -22,11 +29,9 @@ const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (React.createElement(View, null,
-        React.createElement(SafeAreaView, null,
-            isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-                React.createElement(Bar, { index: tabOpen, onPress: onChangeTab }))),
-            React.createElement(View, null,
-                React.createElement(VisibilityButton, { onPress: handleToggleUI })))));
+    return (React.createElement(View, { style: navStyle },
+        isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
+            React.createElement(Bar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
+        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { marginBottom: insets.bottom } })));
 };
 export default React.memo(Navigation);

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

@@ -1,6 +1,8 @@
 import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
 interface Props {
     onPress: () => void;
+    style?: StyleProp<ViewStyle>;
 }
-declare const _default: React.MemoExoticComponent<({ onPress }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ onPress, style }: Props) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
+import { View } from 'react-native';
 const Touchable = styled.TouchableOpacity({
     backgroundColor: 'transparent',
     position: 'absolute',
@@ -7,10 +8,38 @@ const Touchable = styled.TouchableOpacity({
     bottom: 12,
     zIndex: 100,
 });
-const HideIcon = styled.Text(({ theme }) => ({
-    fontSize: 14,
-    color: theme.buttonTextColor || '#999999',
+const HIDE_ICON_SIZE = 14;
+const HIDE_ICON_BORDER_WIDTH = 1;
+const Inner = styled.View(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: theme.buttonTextColor || '#999999',
+    borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
-const VisibilityButton = ({ onPress }) => (React.createElement(Touchable, { onPress: onPress, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
-    React.createElement(HideIcon, null, "\u25A1")));
+const Outer = styled.View({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: 'white',
+    borderWidth: HIDE_ICON_BORDER_WIDTH,
+});
+const hideIconStyles = {
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    marginRight: 4,
+};
+const HideIcon = () => (React.createElement(View, { style: hideIconStyles },
+    React.createElement(Inner, null),
+    React.createElement(Outer, null)));
+const VisibilityButton = ({ onPress, style }) => (React.createElement(Touchable, { onPress: onPress, style: style, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
+    React.createElement(HideIcon, null)));
 export default React.memo(VisibilityButton);

package/dist/preview/components/Shared/icons.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const GridIcon: () => JSX.Element;
+export declare const StoryIcon: ({ selected }: {
+    selected: boolean;
+}) => JSX.Element;