@storybook/react-native 6.5.0-rc.3 → 6.5.0-rc.5

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Duration for a typical transition animation, such as rescaling the preview
+ * UI.
+ */
+export declare const ANIMATION_DURATION_TRANSITION = 400;

package/dist/constants.js

@@ -0,0 +1,5 @@
+/**
+ * Duration for a typical transition animation, such as rescaling the preview
+ * UI.
+ */
+export const ANIMATION_DURATION_TRANSITION = 400;

package/dist/hooks.d.ts

@@ -21,7 +21,46 @@ export declare function useIsStorySelected(storyId: string): boolean;
  * Hook that indicates if `title` is the currently selected story section.
  */
 export declare function useIsStorySectionSelected(title: string): boolean;
+/**
+ * Hook that causes a re-render when the currently selected story is changed.
+ */
+export declare function useUpdateOnStoryChanged(): void;
 /**
  * Hook that gets the current theme values.
  */
 export declare function useTheme(): Theme;
+/**
+ * A boolean atom creator for an atom that can only be toggled between
+ * true/false.
+ *
+ * @see {@link https://jotai.org/docs/recipes/atom-creators#atomwithtoggle}
+ */
+export declare function atomWithToggle(initialValue?: boolean): import("jotai").WritableAtom<boolean, [nextValue?: boolean], void> & {
+    init: boolean;
+};
+/**
+ * Hook that retrieves the current state, and a setter, for the `isUIVisible`
+ * atom.
+ */
+export declare function useIsUIVisible(): [boolean, (nextValue?: boolean) => void];
+/**
+ * Hook that retrieves the current state, and a setter, for the
+ * `isSplitPanelVisibleAtom` atom.
+ */
+export declare function useIsSplitPanelVisible(): [boolean, (nextValue?: boolean) => void];
+interface SyncExternalUIParams {
+    isUIVisible?: boolean;
+    isSplitPanelVisible?: boolean;
+}
+/**
+ * Sync the UI atom states with external values, such as from Story parameters.
+ */
+export declare function syncExternalUI({ isUIVisible, isSplitPanelVisible }: SyncExternalUIParams): void;
+/**
+ * Hook that manages the state for the currently selected addon.
+ *
+ * This value persists across stories, so that the same addon will be selected
+ * when switching stories.
+ */
+export declare function useSelectedAddon(initialValue?: string): [string, (args_0: string | ((prev: string) => string)) => void];
+export {};

package/dist/hooks.js

@@ -1,5 +1,5 @@
-import { useMemo } from 'react';
-import { atom, useAtomValue, useSetAtom } from 'jotai';
+import React, { useMemo } from 'react';
+import { atom, useAtom, useAtomValue, useSetAtom, getDefaultStore } from 'jotai';
 import { useTheme as useEmotionTheme } from 'emotion-theming';
 const storyContextAtom = atom(null);
 /**
@@ -34,9 +34,77 @@ export function useIsStorySelected(storyId) {
 export function useIsStorySectionSelected(title) {
     return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
 }
+/**
+ * Hook that causes a re-render when the currently selected story is changed.
+ */
+export function useUpdateOnStoryChanged() {
+    useAtomValue(useMemo(() => atom((get) => { var _a; return (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id; }), []));
+}
 /**
  * Hook that gets the current theme values.
  */
 export function useTheme() {
     return useEmotionTheme();
 }
+/**
+ * A boolean atom creator for an atom that can only be toggled between
+ * true/false.
+ *
+ * @see {@link https://jotai.org/docs/recipes/atom-creators#atomwithtoggle}
+ */
+export function atomWithToggle(initialValue) {
+    const anAtom = atom(initialValue, (get, set, nextValue) => {
+        const update = nextValue !== null && nextValue !== void 0 ? nextValue : !get(anAtom);
+        set(anAtom, update);
+    });
+    return anAtom;
+}
+const isUIVisibleAtom = atomWithToggle(true);
+/**
+ * Hook that retrieves the current state, and a setter, for the `isUIVisible`
+ * atom.
+ */
+export function useIsUIVisible() {
+    return useAtom(isUIVisibleAtom);
+}
+const isSplitPanelVisibleAtom = atomWithToggle(false);
+/**
+ * Hook that retrieves the current state, and a setter, for the
+ * `isSplitPanelVisibleAtom` atom.
+ */
+export function useIsSplitPanelVisible() {
+    return useAtom(isSplitPanelVisibleAtom);
+}
+/**
+ * Sync the UI atom states with external values, such as from Story parameters.
+ */
+export function syncExternalUI({ isUIVisible, isSplitPanelVisible }) {
+    const jotaiStore = getDefaultStore();
+    if (isUIVisible !== undefined) {
+        jotaiStore.set(isUIVisibleAtom, isUIVisible);
+    }
+    if (isSplitPanelVisible !== undefined) {
+        jotaiStore.set(isSplitPanelVisibleAtom, isSplitPanelVisible);
+    }
+}
+const selectedAddonAtom = atom(undefined);
+/**
+ * Hook that manages the state for the currently selected addon.
+ *
+ * This value persists across stories, so that the same addon will be selected
+ * when switching stories.
+ */
+export function useSelectedAddon(initialValue) {
+    const result = useAtom(selectedAddonAtom);
+    const set = result[1];
+    React.useEffect(() => {
+        const jotaiStore = getDefaultStore();
+        // Only apply the initial value once, and only if the atom doesn't have a
+        // value yet.
+        if (jotaiStore.get(selectedAddonAtom) === undefined) {
+            set(initialValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return result;
+}

package/dist/preview/View.d.ts

@@ -30,6 +30,7 @@ export type Params = {
     shouldPersistSelection?: boolean;
     tabOpen?: number;
     isUIHidden?: boolean;
+    isSplitPanelVisible?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
     theme: DeepPartial<Theme>;

package/dist/preview/View.js

@@ -13,7 +13,7 @@ import { toId } from '@storybook/csf';
 import { addons } from '@storybook/addons';
 import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
-import { useSetStoryContext } from '../hooks';
+import { useSetStoryContext, syncExternalUI } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
@@ -90,6 +90,11 @@ export class View {
             // eslint-disable-next-line consistent-this
             const self = this;
             const appliedTheme = deepmerge(theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
+            // Sync the Storybook parameters (external) with app UI state (internal), to initialise them.
+            syncExternalUI({
+                isUIVisible: params.isUIHidden !== undefined ? !params.isUIHidden : undefined,
+                isSplitPanelVisible: params.isSplitPanelVisible,
+            });
             return () => {
                 const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);
@@ -112,7 +117,7 @@ export class View {
                 if (onDeviceUI) {
                     return (React.createElement(SafeAreaProvider, null,
                         React.createElement(ThemeProvider, { theme: appliedTheme },
-                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
+                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
                 }
                 else {
                     return React.createElement(StoryView, null);

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

@@ -5,9 +5,8 @@ interface OnDeviceUIProps {
     storyIndex: StoryIndex;
     url?: string;
     tabOpen?: number;
-    isUIHidden?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
 export default _default;

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

@@ -1,18 +1,19 @@
 import styled from '@emotion/native';
 import React, { useState, useRef } from 'react';
 import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useStoryContextParam, useTheme } from '../../../hooks';
+import { useIsSplitPanelVisible, useIsUIVisible, useStoryContextParam, useTheme, } from '../../../hooks';
+import { ANIMATION_DURATION_TRANSITION } from '../../../constants';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
 import Addons from './addons/Addons';
+import { AddonsSkeleton } from './addons/AddonsSkeleton';
 import { getAddonPanelPosition, getNavigatorPanelPosition, getPreviewShadowStyle, getPreviewStyle, } from './animation';
 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 = 400;
 const IS_IOS = Platform.OS === 'ios';
 // @ts-ignore: Property 'Expo' does not exist on type 'Global'
 const getExpoRoot = () => global.Expo || global.__expo || global.__exponent;
@@ -33,7 +34,7 @@ const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
 const Container = styled.View(({ theme }) => (Object.assign(Object.assign({ flex: 1, backgroundColor: theme.preview.containerBackgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined)), Platform.select({ web: { overflow: 'hidden' } }))));
-const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
+const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
     const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
     const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
@@ -43,7 +44,6 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     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 = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
@@ -51,7 +51,7 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
         lastTabOpen.current = tabOpen;
         Animated.timing(animatedValue.current, {
             toValue: newTabOpen,
-            duration: ANIMATION_DURATION,
+            duration: ANIMATION_DURATION_TRANSITION,
             easing: Easing.inOut(Easing.cubic),
             useNativeDriver: true,
         }).start();
@@ -73,6 +73,7 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
             lastTabOpen: lastTabOpen.current,
         }),
     ];
+    const [isUIVisible] = useIsUIVisible();
     // The initial value is just a guess until the layout calculation has been done.
     const [navBarHeight, setNavBarHeight] = React.useState(insets.bottom + 40);
     const measureNavigation = React.useCallback(({ nativeEvent }) => {
@@ -93,6 +94,7 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     const safeAreaMargins = {
         paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
         paddingTop: !noSafeArea ? insets.top : 0,
+        overflow: 'hidden',
     };
     // The panels always apply the safe area, regardless of the story parameters.
     const panelSafeAreaMargins = {
@@ -102,14 +104,19 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     // Adjust the keyboard offset (possibly in a negative direction) to account
     // for the safe area and navigation bar.
     const keyboardVerticalOffset = -panelSafeAreaMargins.paddingBottom + (keyboardAvoidingViewVerticalOffset !== null && keyboardAvoidingViewVerticalOffset !== void 0 ? keyboardAvoidingViewVerticalOffset : 0);
+    const [isSplitPanelVisible] = useIsSplitPanelVisible();
+    const isPreviewInactive = tabOpen !== PREVIEW;
     return (React.createElement(React.Fragment, null,
         React.createElement(Container, null,
-            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
+            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
                 React.createElement(AbsolutePositionedKeyboardAwareView, { onLayout: setPreviewDimensions, previewDimensions: previewDimensions },
                     React.createElement(Animated.View, { style: previewWrapperStyles },
                         React.createElement(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
-                            React.createElement(StoryView, null)),
-                        tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(PREVIEW) })) : null),
+                            React.createElement(StoryView, null),
+                            isSplitPanelVisible ? (React.createElement(Panel, { edge: "top", style: { flex: 1 } },
+                                React.createElement(Addons, { active: true }),
+                                React.createElement(AddonsSkeleton, { visible: isPreviewInactive }))) : null),
+                        isPreviewInactive ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(PREVIEW) })) : null),
                     React.createElement(Panel, { edge: "right", style: [
                             getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
                             panelSafeAreaMargins,
@@ -120,6 +127,6 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
                             panelSafeAreaMargins,
                         ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
-            React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
+            React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab }))));
 };
 export default React.memo(OnDeviceUI);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Animated, StyleProp, ViewStyle } from 'react-native';
 interface PanelProps {
-    edge: 'left' | 'right';
+    edge: 'left' | 'right' | 'top';
     style: StyleProp<Animated.AnimatedProps<ViewStyle>>;
     children: React.ReactNode;
 }

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

@@ -3,12 +3,16 @@ import { StyleSheet, Animated } from 'react-native';
 import styled from '@emotion/native';
 const Container = styled(Animated.View)(({ theme, edge }) => ({
     backgroundColor: theme.panel.backgroundColor,
+    borderTopWidth: edge === 'top' ? theme.panel.borderWidth : undefined,
     borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
     borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
     borderColor: theme.panel.borderColor,
 }));
 const Panel = ({ edge, children, style }) => {
-    const containerStyle = StyleSheet.flatten([StyleSheet.absoluteFillObject, style]);
+    const containerStyle = StyleSheet.flatten([
+        edge === 'top' ? undefined : StyleSheet.absoluteFillObject,
+        style,
+    ]);
     return (React.createElement(Container, { edge: edge, style: containerStyle }, children));
 };
 export default React.memo(Panel);

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

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Text } from 'react-native';
 import { addons } from '@storybook/addons';
+import { useSelectedAddon } from '../../../../hooks';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
 import { Box } from '../../Shared/layout';
 const Addons = ({ active }) => {
     const panels = addons.getElements('panel');
-    const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0] || null);
+    const [addonSelected, setAddonSelected] = useSelectedAddon(Object.keys(panels)[0]);
     if (Object.keys(panels).length === 0) {
         return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
             React.createElement(Text, null, "No addons loaded.")));

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

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Component that mimics the addons panel.
+ *
+ * The main reason this exists is that the scaled addons view feels more
+ * cluttered than a more abstract skeleton view, which allows users to focus
+ * on the story content rather than become distracted by the addons UI in an
+ * already small view.
+ */
+export declare const AddonsSkeleton: React.NamedExoticComponent<AddonsSkeletonProps>;
+interface AddonsSkeletonProps {
+    visible: boolean;
+}
+export {};

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

@@ -0,0 +1,59 @@
+import React from 'react';
+import styled from '@emotion/native';
+import { Animated, Easing, StyleSheet, View } from 'react-native';
+import { ANIMATION_DURATION_TRANSITION } from '../../../../constants';
+/**
+ * Component that mimics the addons panel.
+ *
+ * The main reason this exists is that the scaled addons view feels more
+ * cluttered than a more abstract skeleton view, which allows users to focus
+ * on the story content rather than become distracted by the addons UI in an
+ * already small view.
+ */
+export const AddonsSkeleton = React.memo(function AddonsSkeleton({ visible }) {
+    const progress = React.useRef(new Animated.Value(visible ? 1 : 0));
+    React.useEffect(() => {
+        Animated.timing(progress.current, {
+            toValue: visible ? 1 : 0,
+            duration: ANIMATION_DURATION_TRANSITION,
+            useNativeDriver: true,
+            easing: Easing.inOut(Easing.cubic),
+        }).start();
+    }, [visible]);
+    return (React.createElement(AddonsSkeletonContainer, { pointerEvents: "none", opacity: progress.current },
+        React.createElement(TabsSkeleton, null),
+        React.createElement(AddonsContentSkeleton, null)));
+});
+const TabSkeleton = styled.View(({ theme, active }) => ({
+    opacity: active ? 1 : 0.5,
+    backgroundColor: active ? theme.tabs.activeBackgroundColor : theme.tokens.color.grey200,
+    borderRadius: theme.tokens.borderRadius.round,
+    width: active ? 100 : 70,
+    height: 30,
+    marginRight: 12,
+}));
+const BoxSkeleton = styled.View(({ theme, width, height }) => ({
+    backgroundColor: theme.tokens.color.blue200,
+    borderRadius: theme.tokens.borderRadius.large,
+    height,
+    width,
+}));
+function AddonsFieldSkeleton({ long = false }) {
+    return (React.createElement(View, { style: { marginBottom: 32 } },
+        React.createElement(BoxSkeleton, { width: 75, height: 10, marginBottom: 12 }),
+        React.createElement(BoxSkeleton, { width: long ? 200 : 120, height: 15 })));
+}
+function AddonsContentSkeleton() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AddonsFieldSkeleton, { long: true }),
+        React.createElement(AddonsFieldSkeleton, { long: true }),
+        React.createElement(AddonsFieldSkeleton, null),
+        React.createElement(AddonsFieldSkeleton, null)));
+}
+function TabsSkeleton() {
+    return (React.createElement(View, { style: { flexDirection: 'row', marginBottom: 16 } },
+        React.createElement(TabSkeleton, null),
+        React.createElement(TabSkeleton, { active: true }),
+        React.createElement(TabSkeleton, null)));
+}
+const AddonsSkeletonContainer = styled(Animated.View)(({ theme }) => (Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { flex: 1, backgroundColor: theme.panel.backgroundColor, borderTopWidth: theme.panel.borderWidth, borderColor: theme.panel.borderColor, padding: theme.panel.paddingHorizontal, overflow: 'hidden' })));

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

@@ -1,12 +1,15 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
 import styled from '@emotion/native';
-import { useTheme } from '../../../../hooks';
+import { useTheme, useUpdateOnStoryChanged } from '../../../../hooks';
 const Container = styled.View(({ selected }) => ({
     display: selected ? 'flex' : 'none',
     flex: 1,
 }));
 const Wrapper = ({ panels, addonSelected }) => {
+    // Force a re-render when the current story changes, to ensure that the addon
+    // panels state is not desynced.
+    useUpdateOnStoryChanged();
     const theme = useTheme();
     const addonKeys = Object.keys(panels);
     const content = addonKeys.map((id) => {

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

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

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

@@ -2,8 +2,9 @@ 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 { useIsUIVisible } from '../../../../hooks';
 import { NavigationBar } from './NavigationBar';
-import VisibilityButton from './VisibilityButton';
+import { VisibilityButton, AddonsSplitButton } from './NavigationButton';
 const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
     directionalOffsetThreshold: 80,
@@ -14,11 +15,8 @@ const navStyle = {
     right: 0,
     bottom: 0,
 };
-const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayout }) => {
+const Navigation = ({ tabOpen, onChangeTab, onLayout }) => {
     const insets = useSafeAreaInsets();
-    const handleToggleUI = () => {
-        setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
-    };
     const handleSwipeLeft = () => {
         if (tabOpen < 1) {
             onChangeTab(tabOpen + 1);
@@ -29,9 +27,25 @@ const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayou
             onChangeTab(tabOpen - 1);
         }
     };
+    const [isUIVisible] = useIsUIVisible();
     return (React.createElement(View, { style: navStyle, onLayout: onLayout },
-        isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-            React.createElement(NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } }))),
-        React.createElement(VisibilityButton, { onPress: handleToggleUI, style: { paddingBottom: insets.bottom } })));
+        React.createElement(View, null, isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
+            React.createElement(NavigationBar, { index: tabOpen, onPress: onChangeTab, style: { paddingBottom: insets.bottom } })))),
+        React.createElement(NavigationShortcuts, null,
+            React.createElement(VisibilityButton, null),
+            React.createElement(AddonsSplitButton, null))));
 };
 export default React.memo(Navigation);
+function NavigationShortcuts({ children }) {
+    const insets = useSafeAreaInsets();
+    return (React.createElement(View, { style: {
+            zIndex: 100,
+            alignSelf: 'center',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexDirection: 'row-reverse',
+            position: 'absolute',
+            bottom: insets.bottom + 14,
+            right: 8,
+        } }, children));
+}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function VisibilityButton(): JSX.Element;
+export declare function AddonsSplitButton(): JSX.Element;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TouchableWithoutFeedback } from 'react-native';
+import { useIsSplitPanelVisible, useIsUIVisible } from '../../../../hooks';
+import { Icon } from '../../Shared/icons';
+import { Box } from '../../Shared/layout';
+const hitSlop = { top: 5, left: 5, right: 5, bottom: 5 };
+function NavigationButton({ iconName, inverseIconName, active, toggle }) {
+    return (React.createElement(TouchableWithoutFeedback, { onPress: toggle, hitSlop: hitSlop },
+        React.createElement(Box, { marginHorizontal: 8 },
+            React.createElement(Icon, { flex: 1, background: true, name: inverseIconName, opacity: 0.8, pointerEvents: "none" },
+                React.createElement(Icon, { name: iconName, opacity: active ? 0.6 : 0.25 })))));
+}
+export function VisibilityButton() {
+    const [active, toggle] = useIsUIVisible();
+    return (React.createElement(NavigationButton, { iconName: "layout-bottom", inverseIconName: "layout-bottom-inverse", active: active, toggle: () => toggle() }));
+}
+export function AddonsSplitButton() {
+    const [active, toggle] = useIsSplitPanelVisible();
+    return (React.createElement(NavigationButton, { iconName: "layout-split", inverseIconName: "layout-split-inverse", active: active, toggle: () => toggle() }));
+}

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

@@ -1,6 +1,35 @@
-/// <reference types="react" />
-export declare const GridIcon: () => JSX.Element;
-export declare const StoryIcon: ({ selected }: {
-    selected: boolean;
-}) => JSX.Element;
-export declare const SearchIcon: () => JSX.Element;
+import React from 'react';
+declare const iconSources: {
+    grid: {
+        uri: string;
+    };
+    'story-white': {
+        uri: string;
+    };
+    'story-blue': {
+        uri: string;
+    };
+    search: {
+        uri: string;
+    };
+    'layout-bottom': {
+        uri: string;
+    };
+    'layout-bottom-inverse': {
+        uri: string;
+    };
+    'layout-split': {
+        uri: string;
+    };
+    'layout-split-inverse': {
+        uri: string;
+    };
+};
+export type IconName = keyof typeof iconSources;
+declare const StyledImage: any;
+interface IconProps extends React.ComponentProps<typeof StyledImage> {
+    name: IconName;
+    background?: boolean;
+}
+export declare function Icon({ name, background, ...props }: IconProps): JSX.Element;
+export {};

package/dist/preview/components/Shared/icons.js

@@ -1,34 +1,47 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
-import { Image, StyleSheet } from 'react-native';
+import { Image, ImageBackground } from 'react-native';
+import styled from '@emotion/native';
 const iconSources = {
-    grid: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==' },
-    storyWhite: { uri: 'data:image/png;base64,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' },
-    storyBlue: { uri: 'data:image/png;base64,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' },
-    search: { uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kd8rg1EYxz/baGLy88KFsjSuTEyJG2USamnNlOFme+2H2ubtfbe03Cq3K0rc+HXBX8Ctcq0UkZJbrokb1ut5t9Uke07PeT7ne87zdM5zwBpMKim9ZgBS6YwWmPI6F0KLTvsLVlqw00VrWNHVcb/fR1X7vMdixlu3Wav6uX+tYSWqK2CpEx5TVC0jPC3sW8+oJu8ItyuJ8IrwmXCfJhcUvjP1SIlfTY6X+NtkLRiYAGuzsDP+iyO/WEloKWF5Oa5UMquU72O+xBFNz89J7BbvRCfAFF6czDDJBMMMMirzMG489MuKKvkDxfxZ1iRXkVklh8YqcRJk6BM1K9WjEmOiR2UkyZn9/9tXPTbkKVV3eKH22TDee8C+DYW8YXwdGUbhGGxPcJmu5K8dwsiH6PmK5jqApk04v6pokV242IKORzWshYuSTdwai8HbKTSGoO0G6pdKPSvvc/IAwQ35qmvY24deOd+0/AMfDGfFB6WkFAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAqNJREFUWIXF2DmIFFEQBuBvVh3FC0EFdT3QaDORTUTFI9hQPAIRQxE0ETXwQBADD7zAaBEDTQxlIxExE4VFjTzYxQNFERUTr/VCvII3Q78Ze2Z6drvZH5ppmqq//q73XnXVlGRHFzZgJeZiDibjLd7gMa7gOr62wdsWStiEAfzNeH3HhYroXNGNu02CPsN9vMOfBjZHUc5DzBb8qAtwG7uxMMW+jB704kOd3w3MGImYg3WEQ9jehn8nrtVxPMeC4YjZ4v+3S8tIFmzD54jrnnAIMqNbWPcqwRFhU48EC/A04uzLyllSu4Fv5CCmimX4HXGvzeK0Se2eGe4yNcLpiH8QY1s5xHVmR85iYEJFSDXG5mbGXZHhnQLEVLEqinO5meGByHBPgYJKeF2J80XIWirimrGoQEFwLoq1PM2gQyhkhMr8vGBBg9H9nFaC3hYshtAVVNGZZtAhqZ5DhcupjTE+zaBDkplZhcthdnQ/kGbQIUnjTDm1Ck0QL9ODRoKeVO5LQjdYJFZXfj/hVSOjjZKj2FugmGn4WYlzq5nhJMlX/oMGxzEHHJa8+MlWxhcj46sFiFkiyc57TG/lME9tL7Q1RzFlYQNXuXdmdTweOX3C/JwEHYt4BzAuq2MZNyPnx1g6AiFlYer4FXH2tEsyEy8igl84of36tFgYkepHo2F1EwvxsI7oIVZk8J2KQ5INnHbta0bQqG+egktYV/f8lTAuDwoVfkj4HHRijVD44mw+ErLShbPR8/041UxYI7HrK6RZx+jq9RG71G7gvdrIVDOMFea1PuFPhEYiPqMfZ4S9mIaWotoddSYK81unUNHHC0f5AV5WgrTCXrXLNazlyxu5LV+eSBU1ZhQF9eObpFj2CIdh1BFn6s1oZqiKfqHtWYLz/wAUO/neFu9thgAAAABJRU5ErkJggg==' },
-};
-export const GridIcon = () => {
-    return (React.createElement(Image, { source: iconSources.grid, style: styles.sectionIcon }));
-};
-export const StoryIcon = ({ selected }) => {
-    return (React.createElement(Image, { source: selected ? iconSources.storyWhite : iconSources.storyBlue, style: styles.storyIcon }));
-};
-export const SearchIcon = () => {
-    return (React.createElement(Image, { source: iconSources.search, style: styles.searchIcon }));
+    grid: {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==',
+    },
+    'story-white': {
+        uri: 'data:image/png;base64,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',
+    },
+    'story-blue': {
+        uri: 'data:image/png;base64,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',
+    },
+    search: {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAABgWlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kd8rg1EYxz/baGLy88KFsjSuTEyJG2USamnNlOFme+2H2ubtfbe03Cq3K0rc+HXBX8Ctcq0UkZJbrokb1ut5t9Uke07PeT7ne87zdM5zwBpMKim9ZgBS6YwWmPI6F0KLTvsLVlqw00VrWNHVcb/fR1X7vMdixlu3Wav6uX+tYSWqK2CpEx5TVC0jPC3sW8+oJu8ItyuJ8IrwmXCfJhcUvjP1SIlfTY6X+NtkLRiYAGuzsDP+iyO/WEloKWF5Oa5UMquU72O+xBFNz89J7BbvRCfAFF6czDDJBMMMMirzMG489MuKKvkDxfxZ1iRXkVklh8YqcRJk6BM1K9WjEmOiR2UkyZn9/9tXPTbkKVV3eKH22TDee8C+DYW8YXwdGUbhGGxPcJmu5K8dwsiH6PmK5jqApk04v6pokV242IKORzWshYuSTdwai8HbKTSGoO0G6pdKPSvvc/IAwQ35qmvY24deOd+0/AMfDGfFB6WkFAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAqNJREFUWIXF2DmIFFEQBuBvVh3FC0EFdT3QaDORTUTFI9hQPAIRQxE0ETXwQBADD7zAaBEDTQxlIxExE4VFjTzYxQNFERUTr/VCvII3Q78Ze2Z6drvZH5ppmqq//q73XnXVlGRHFzZgJeZiDibjLd7gMa7gOr62wdsWStiEAfzNeH3HhYroXNGNu02CPsN9vMOfBjZHUc5DzBb8qAtwG7uxMMW+jB704kOd3w3MGImYg3WEQ9jehn8nrtVxPMeC4YjZ4v+3S8tIFmzD54jrnnAIMqNbWPcqwRFhU48EC/A04uzLyllSu4Fv5CCmimX4HXGvzeK0Se2eGe4yNcLpiH8QY1s5xHVmR85iYEJFSDXG5mbGXZHhnQLEVLEqinO5meGByHBPgYJKeF2J80XIWirimrGoQEFwLoq1PM2gQyhkhMr8vGBBg9H9nFaC3hYshtAVVNGZZtAhqZ5DhcupjTE+zaBDkplZhcthdnQ/kGbQIUnjTDm1Ck0QL9ODRoKeVO5LQjdYJFZXfj/hVSOjjZKj2FugmGn4WYlzq5nhJMlX/oMGxzEHHJa8+MlWxhcj46sFiFkiyc57TG/lME9tL7Q1RzFlYQNXuXdmdTweOX3C/JwEHYt4BzAuq2MZNyPnx1g6AiFlYer4FXH2tEsyEy8igl84of36tFgYkepHo2F1EwvxsI7oIVZk8J2KQ5INnHbta0bQqG+egktYV/f8lTAuDwoVfkj4HHRijVD44mw+ErLShbPR8/041UxYI7HrK6RZx+jq9RG71G7gvdrIVDOMFea1PuFPhEYiPqMfZ4S9mIaWotoddSYK81unUNHHC0f5AV5WgrTCXrXLNazlyxu5LV+eSBU1ZhQF9eObpFj2CIdh1BFn6s1oZqiKfqHtWYLz/wAUO/neFu9thgAAAABJRU5ErkJggg==',
+    },
+    'layout-bottom': {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEzSURBVHgB7ZjhDYIwEIWfTsAIjOAIHYGNZANwAnQi3KBu4AhYIiYNNHCF0ivxvuR+mHjNe70eyR0gCIKQOspEZUKb6CJFa6IxkWMD2SC8Y45q0OItvgXALd6uiJeJFG7eVQkSuSNZ49sL3qVcSQF3zylKcoOp+FjCbTJMTdSUxPHbL8CHwvQyFxmXjZMMC3pOjqSO8J+YzOo54+CIAW7EADdigBsxwI0Y4EYMcLPWwNXEG+HGxf4s8si4xNI8sOe8XK7Q450Q8uZdlfDS85c9cMN+PBAAypvrtwOhm7jcoGc2gWOlYuPdA6/R7wv4GK90niDQPw/bsUY6i62GkqgwLVt/UKwFVzZo0A4dOfWQGvt969cGaa1o38Kh1+s/EylUosbGHsxN3BG3InoQriAIgpA0H3BBw2jFymiHAAAAAElFTkSuQmCC',
+    },
+    'layout-bottom-inverse': {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFgSURBVHgB7ZjhcYMwDIXlTEA2YISOYDbIRmSD0AloJ+kIyQbuBskGqnz4R+OYw7jYchN9dzouwYIn2+LgAQiCIFQNImqKE4XBcpwpRooWUqHkxgnnxmpo5nSqOfF0+KJ4gzq4UHRKqZt/YjeT0EM94i1WSx81kma/DSyjwakXGigA3eeA4Z7TMcljQHwR4Z6OJlDEEJN49pIOwIRb9bvJ9MeoQBLeDSCACbfy19//+XqqLsCypGcH/xwpgBspgBspgBspgBspgBspgJukAugFsae44nbYa51gC/wrB87ndCqOa/Ws/h6ws0WHXJ+YN7rdHlboeckeeId8fMJfWdpzbsyA2zfxMUXPYg8Q+5AjVoqUHvj2frM5dPho6VxikgZv1QzWY2yNMYk6sEcNFjK4nHCNYWuxjb3IgPURtBWf0153AzvI+8yPxWrokp+EONntH/ho+ubE4LSNNQiCIFTND53ElQfvR3pDAAAAAElFTkSuQmCC',
+    },
+    'layout-split': {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADxSURBVHgB7ZjhCcIwFITP4gAdISM4QkZwI0doNqgb1Q3iJjU/Imga5YVK3yveB/ejkJa7vgTCAYQQYh2fNCTFpHkjTUljksMK+mx8VtaQvTSbnwBom3+dSFMIC3++NgkRDlA3+0m+NNtVAlxgl7NkkaW9XyqWZg+VADNs8+a5w85hAG0YQBsG0IYBtNl9gKNgzQG6fL3acAtpwwDaMIA2DKDNXwRorvW2pBbgXjyfoEfZA90gIGDZxWhMoceyER8lL3rUCyVRK/YD+uwhVnw46UcC7LVyAQ3svl5/hrAwiYCVZ9AlXbHtRGI27kEIIaZ5ALildIGPrcQbAAAAAElFTkSuQmCC',
+    },
+    'layout-split-inverse': {
+        uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAEaSURBVHgB7ZntDYJADIaLcQBGYARHgAl0I0YQJ8BNdAPZ4BzBDWov8ENrkYuJtJA+SUO4D/K+1yaQAuA4jmMaRCwpjhQB5+NG0VIU8Cu0OR+EaxM15GM6szHxdLlQ7MAGHUWVZdmDT2xGNtRgR3wkaqmliY8MYF93AWwSs3B9HZAyUINdDnxAMmCpdDh7PiCVEIJhqITeNG9g4bgBbdyANm5AGzegzeINbKcW8Ff33Ex92ngJaeMGtHED2rgBbdZv4FtbzwKSgTu7V2uz0OHxPlCXsqlhzdWgkQXsm8uBaWlTNpZChzgIp/EXBuElyu38IvUhDdqjkbSus70+LKwoTqBP1CCKT4KyUVCcsf/tMxcB+zIuwXEcxzRPpfGo9y3IYogAAAAASUVORK5CYII=',
+    },
 };
-const styles = StyleSheet.create({
-    sectionIcon: {
-        width: 10,
-        height: 10,
-        marginRight: 6,
-    },
-    storyIcon: {
-        width: 12,
-        height: 12,
-        marginRight: 6,
-    },
-    searchIcon: {
-        opacity: 0.5,
-        width: 16,
-        height: 16,
-    },
-});
+const StyledImage = styled(Image)();
+const StyledImageBackground = styled(ImageBackground)();
+export function Icon(_a) {
+    var { name, background = false } = _a, props = __rest(_a, ["name", "background"]);
+    const IconComponent = background ? StyledImageBackground : StyledImage;
+    return React.createElement(IconComponent, Object.assign({ source: iconSources[name], width: 16, height: 16 }, props));
+}

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

@@ -3,7 +3,7 @@ import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import React, { useMemo, useState } from 'react';
 import { SectionList, StyleSheet } from 'react-native';
-import { GridIcon, SearchIcon, StoryIcon } from '../Shared/icons';
+import { Icon } from '../Shared/icons';
 import { Box } from '../Shared/layout';
 import { useIsStorySelected, useIsStorySectionSelected, useTheme } from '../../../hooks';
 const SectionHeaderText = styled.Text(({ theme }) => ({
@@ -36,7 +36,7 @@ const SearchContainer = styled.View(({ theme }) => ({
 const SearchBar = (props) => {
     const theme = useTheme();
     return (React.createElement(SearchContainer, null,
-        React.createElement(SearchIcon, null),
+        React.createElement(Icon, { name: "search", opacity: 0.5 }),
         React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: theme.storyList.search.placeholderTextColor, returnKeyType: "search" }))));
 };
 const HeaderContainer = styled.TouchableOpacity({
@@ -53,7 +53,7 @@ const HeaderContainer = styled.TouchableOpacity({
 const SectionHeader = React.memo(({ title, onPress }) => {
     const selected = useIsStorySectionSelected(title);
     return (React.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
-        React.createElement(GridIcon, null),
+        React.createElement(Icon, { name: "grid", width: 10, height: 10, marginRight: 6 }),
         React.createElement(SectionHeaderText, { selected: selected }, title)));
 });
 const ItemTouchable = styled.TouchableOpacity({
@@ -74,7 +74,7 @@ const ListItem = React.memo(({ storyId, kind, title, isLastItem, onPress }) => {
     const selected = useIsStorySelected(storyId);
     const sectionSelected = useIsStorySectionSelected(kind);
     return (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected, sectionSelected: sectionSelected, isLastItem: isLastItem },
-        React.createElement(StoryIcon, { selected: selected }),
+        React.createElement(Icon, { name: selected ? 'story-white' : 'story-blue', marginRight: 6 }),
         React.createElement(StoryNameText, { selected: selected }, title)));
 }, (prevProps, nextProps) => prevProps.storyId === nextProps.storyId);
 const getStories = (storyIndex) => {

package/dist/preview/components/StoryView/StoryView.js

@@ -1,24 +1,30 @@
 import React from 'react';
-import { Text, View, StyleSheet } from 'react-native';
+import { Text, Keyboard } from 'react-native';
 import { useStoryContext } from '../../../hooks';
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-    helpContainer: {
-        flex: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-});
+import { Box } from '../Shared/layout';
+/**
+ * This is a handler for `onStartShouldSetResponder`, which dismisses the
+ * keyboard as a side effect but then responds with `false` to the responder
+ * system, so as not to start actually handling the touch.
+ *
+ * The objective here is to dismiss the keyboard when the story view is tapped,
+ * but in a way that won't interfere with presses or swipes. Using a
+ * `Touchable...` component as a wrapper will start to handle the touch, which
+ * will swallow swipe gestures that should have gone on to a child view, such
+ * as `ScrollView`.
+ */
+function dismissOnStartResponder() {
+    Keyboard.dismiss();
+    return false;
+}
 const StoryView = () => {
     const context = useStoryContext();
     const id = context === null || context === void 0 ? void 0 : context.id;
     if (context && context.unboundStoryFn) {
         const { unboundStoryFn: StoryComponent } = context;
-        return (React.createElement(View, { key: id, testID: id, style: styles.container }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
+        return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
-    return (React.createElement(View, { style: styles.helpContainer },
+    return (React.createElement(Box, { flex: true, padding: 16, alignItems: "center", justifyContent: "center" },
         React.createElement(Text, null, "Please open navigator and select a story to preview.")));
 };
 export default React.memo(StoryView);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.3",
+  "version": "6.5.0-rc.5",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -87,5 +87,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f2a1a9100ba5ddf37fa59b58518751a525eb4788"
+  "gitHead": "5bc5a1f17cbca33fba28f8cce57d7d49ee80c689"
 }

package/readme.md

@@ -227,6 +227,8 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
         -- additional query string to pass to websockets
     isUIHidden: Boolean (false)
         -- should the ui be closed initially.
+    isSplitPanelVisible: Boolean (false)
+        -- should the split panel (addons on the bottom) be visible initially.
     tabOpen: Number (0)
         -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
     initialSelection: Object (null)

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

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

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import styled from '@emotion/native';
-import { View } from 'react-native';
-const Touchable = styled.TouchableOpacity(({ theme }) => ({
-    backgroundColor: 'transparent',
-    position: 'absolute',
-    right: theme.tokens.spacing2,
-    bottom: theme.tokens.spacing4,
-    zIndex: 100,
-}));
-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: theme.navigation.visibilityBorderRadius,
-    overflow: 'hidden',
-    borderColor: theme.navigation.visibilityInnerBorderColor,
-    borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
-}));
-const Outer = styled.View(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: HIDE_ICON_SIZE,
-    height: HIDE_ICON_SIZE,
-    borderRadius: theme.navigation.visibilityBorderRadius,
-    overflow: 'hidden',
-    borderColor: theme.navigation.visibilityOuterBorderColor,
-    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);