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

package/dist/hooks.d.ts

@@ -0,0 +1,22 @@
+import type { StoryContext } from '@storybook/csf';
+import type { ReactNativeFramework } from './types/types-6.0';
+/**
+ * Hook that returns a function to set the current story context.
+ */
+export declare function useSetStoryContext(): (args_0: StoryContext<ReactNativeFramework, import("@storybook/csf").Args> | ((prev: StoryContext<ReactNativeFramework, import("@storybook/csf").Args>) => StoryContext<ReactNativeFramework, import("@storybook/csf").Args>)) => void;
+/**
+ * Hook to read the current story context.
+ */
+export declare function useStoryContext(): StoryContext<ReactNativeFramework, import("@storybook/csf").Args>;
+/**
+ * Hook that reads the value of a specific story context parameter.
+ */
+export declare function useStoryContextParam<T = any>(name: string, defaultValue?: T): T;
+/**
+ * Hook that indicates if `storyId` is the currently selected story.
+ */
+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;

package/dist/hooks.js

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { atom, useAtomValue, useSetAtom } from 'jotai';
+const storyContextAtom = atom(null);
+/**
+ * Hook that returns a function to set the current story context.
+ */
+export function useSetStoryContext() {
+    return useSetAtom(storyContextAtom);
+}
+/**
+ * Hook to read the current story context.
+ */
+export function useStoryContext() {
+    return useAtomValue(storyContextAtom);
+}
+/**
+ * Hook that reads the value of a specific story context parameter.
+ */
+export function useStoryContextParam(name, defaultValue) {
+    var _a;
+    const paramAtom = useMemo(() => atom(get => { var _a, _b; return (_b = (_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.parameters) === null || _b === void 0 ? void 0 : _b[name]; }), [name]);
+    return (_a = useAtomValue(paramAtom)) !== null && _a !== void 0 ? _a : defaultValue;
+}
+/**
+ * Hook that indicates if `storyId` is the currently selected story.
+ */
+export function useIsStorySelected(storyId) {
+    return useAtomValue(useMemo(() => atom(get => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.id) === storyId; }), [storyId]));
+}
+/**
+ * Hook that indicates if `title` is the currently selected story section.
+ */
+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]));
+}

package/dist/index.d.ts

@@ -6,7 +6,7 @@ import { ReactNode } from 'react';
 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>;
+type C = ClientApi<ReactNativeFramework>;
 export declare const setAddon: C['setAddon'];
 export declare const addDecorator: C['addDecorator'];
 export declare const addParameters: C['addParameters'];

package/dist/preview/View.d.ts

@@ -4,9 +4,9 @@ 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}` | {
+type StoryKind = string;
+type StoryName = string;
+type InitialSelection = `${StoryKind}--${StoryName}` | {
     /**
      * Kind is the default export name or the storiesOf("name") name
      */
@@ -16,7 +16,7 @@ declare type InitialSelection = `${StoryKind}--${StoryName}` | {
      */
     name: StoryName;
 };
-export declare type Params = {
+export type Params = {
     onDeviceUI?: boolean;
     enableWebsockets?: boolean;
     query?: string;

package/dist/preview/View.js

@@ -7,12 +7,13 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import React, { useEffect, useState, useReducer } from 'react';
+import React, { useEffect, 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 { useSetStoryContext } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
 import { theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
@@ -88,7 +89,7 @@ export class View {
             const self = this;
             const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
             return () => {
-                const [context, setContext] = useState();
+                const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);
                 useEffect(() => {
                     self._setStory = (newStory) => {
@@ -104,14 +105,15 @@ export class View {
                         self._preview.urlStore.selectionSpecifier = story;
                         self._preview.selectSpecifiedStory();
                     });
+                    // eslint-disable-next-line react-hooks/exhaustive-deps
                 }, []);
                 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 }))));
+                            React.createElement(OnDeviceUI, { storyIndex: self._storyIndex, isUIHidden: params.isUIHidden, tabOpen: params.tabOpen, shouldDisableKeyboardAvoidingView: params.shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset: params.keyboardAvoidingViewVerticalOffset }))));
                 }
                 else {
-                    return React.createElement(StoryView, { context: context });
+                    return React.createElement(StoryView, null);
                 }
             };
         };

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

@@ -1,10 +1,7 @@
 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 {
-    context: StoryContext<ReactNativeFramework>;
     storyIndex: StoryIndex;
     url?: string;
     tabOpen?: number;
@@ -12,5 +9,5 @@ interface OnDeviceUIProps {
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
 }
-declare const _default: React.MemoExoticComponent<({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }: OnDeviceUIProps) => JSX.Element>;
 export default _default;

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

@@ -1,17 +1,19 @@
 import styled from '@emotion/native';
+import { useTheme } from 'emotion-theming';
 import React, { useState, useRef } from 'react';
-import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
+import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
+import { useStoryContextParam } from '../../../hooks';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 import AbsolutePositionedKeyboardAwareView from './absolute-positioned-keyboard-aware-view';
 import Addons from './addons/Addons';
-import { getAddonPanelPosition, getNavigatorPanelPosition, getPreviewPosition, getPreviewScale, } from './animation';
+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 = 300;
+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;
@@ -19,84 +21,100 @@ export const IS_EXPO = getExpoRoot() !== undefined;
 const IS_ANDROID = Platform.OS === 'android';
 const BREAKPOINT = 1024;
 const flex = { flex: 1 };
-const Preview = styled.View(flex, ({ disabled, theme }) => ({
-    borderLeftWidth: disabled ? 0 : 1,
-    borderTopWidth: disabled ? 0 : 1,
-    borderRightWidth: disabled ? 0 : 1,
-    borderBottomWidth: disabled ? 0 : 1,
-    borderColor: disabled ? 'transparent' : theme.previewBorderColor,
-}));
-const absolutePosition = {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0,
-};
+/**
+ * Story preview container.
+ */
+function Preview({ animatedValue, style, children }) {
+    const theme = useTheme();
+    const containerStyle = Object.assign({ backgroundColor: theme.backgroundColor }, getPreviewShadowStyle(animatedValue));
+    return (React.createElement(Animated.View, { style: [flex, containerStyle] },
+        React.createElement(View, { style: [flex, style] }, children)));
+}
 const styles = StyleSheet.create({
     expoAndroidContainer: { paddingTop: StatusBar.currentHeight },
 });
-const OnDeviceUI = ({ context, storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
-    var _a, _b;
+const Container = styled.View(({ theme }) => (Object.assign({ flex: 1, backgroundColor: theme.backgroundColor }, (IS_ANDROID && IS_EXPO ? styles.expoAndroidContainer : undefined))));
+const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
     const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
-    const [slideBetweenAnimation, setSlideBetweenAnimation] = useState(false);
-    const [previewDimensions, setPreviewDimensions] = useState({
+    const lastTabOpen = React.useRef(tabOpen);
+    const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
-    });
+    }));
     const animatedValue = useRef(new Animated.Value(tabOpen));
     const wide = useWindowDimensions().width >= BREAKPOINT;
     const insets = useSafeAreaInsets();
+    const theme = useTheme();
     const [isUIVisible, setIsUIVisible] = useState(isUIHidden !== undefined ? !isUIHidden : true);
-    const handleToggleTab = (newTabOpen) => {
+    const handleToggleTab = React.useCallback((newTabOpen) => {
         if (newTabOpen === tabOpen) {
             return;
         }
+        lastTabOpen.current = tabOpen;
         Animated.timing(animatedValue.current, {
             toValue: newTabOpen,
             duration: ANIMATION_DURATION,
+            easing: Easing.inOut(Easing.cubic),
             useNativeDriver: true,
         }).start();
         setTabOpen(newTabOpen);
-        const isSwipingBetweenNavigatorAndAddons = tabOpen + newTabOpen === PREVIEW;
-        setSlideBetweenAnimation(isSwipingBetweenNavigatorAndAddons);
         // close the keyboard opened from a TextInput from story list or knobs
         if (newTabOpen === PREVIEW) {
             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;
+    }, [tabOpen]);
+    const noSafeArea = useStoryContextParam('noSafeArea', false);
     const previewWrapperStyles = [
         flex,
-        getPreviewPosition({
+        getPreviewStyle({
             animatedValue: animatedValue.current,
             previewDimensions,
-            slideBetweenAnimation,
             wide,
-            noSafeArea,
             insets,
+            tabOpen,
+            lastTabOpen: lastTabOpen.current,
         }),
     ];
-    const previewStyles = [flex, getPreviewScale(animatedValue.current, slideBetweenAnimation, wide)];
-    const WrapperView = noSafeArea ? View : SafeAreaView;
-    const wrapperMargin = { marginBottom: isUIVisible ? insets.bottom + 40 : 0 };
+    // 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 }) => {
+        const inset = insets.bottom;
+        setNavBarHeight(isUIVisible ? nativeEvent.layout.height - inset : 0);
+    }, [isUIVisible, insets]);
+    // There are 4 cases for the additional UI margin:
+    //   1. Storybook UI is visible, and `noSafeArea` is false: Include top and
+    //      bottom safe area insets, and also include the navigation bar height.
+    //
+    //   2. Storybook UI is not visible, and `noSafeArea` is false: Include top
+    //      and bottom safe area insets.
+    //
+    //   3. Storybook UI is visible, and `noSafeArea` is true: Include only the
+    //      bottom safe area inset and the navigation bar height.
+    //
+    //   4. Storybook UI is not visible, and `noSafeArea` is true: No margin.
+    const safeAreaMargins = {
+        paddingBottom: isUIVisible ? insets.bottom + navBarHeight : noSafeArea ? 0 : insets.bottom,
+        paddingTop: !noSafeArea ? insets.top : 0,
+    };
     return (React.createElement(React.Fragment, null,
-        React.createElement(View, { style: [flex, IS_ANDROID && IS_EXPO && styles.expoAndroidContainer] },
+        React.createElement(Container, null,
             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(Preview, { style: safeAreaMargins, animatedValue: animatedValue.current },
+                            React.createElement(StoryView, null)),
+                        tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(PREVIEW) })) : null),
+                    React.createElement(Panel, { style: [
+                            getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            safeAreaMargins,
+                            { backgroundColor: theme.storyListBackgroundColor },
+                        ] },
+                        React.createElement(StoryListView, { storyIndex: storyIndex })),
                     React.createElement(Panel, { style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            wrapperMargin,
+                            safeAreaMargins,
                         ] },
                         React.createElement(Addons, { active: tabOpen === ADDONS })))),
-            React.createElement(Navigation, { tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
+            React.createElement(Navigation, { onLayout: measureNavigation, tabOpen: tabOpen, onChangeTab: handleToggleTab, isUIVisible: isUIVisible, setIsUIVisible: setIsUIVisible }))));
 };
 export default React.memo(OnDeviceUI);

package/dist/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.d.ts

@@ -3,7 +3,7 @@ export interface PreviewDimens {
     width: number;
     height: number;
 }
-declare type Props = {
+type Props = {
     onLayout: (dimens: PreviewDimens) => void;
     previewDimensions: PreviewDimens;
     children: ReactNode;

package/dist/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.js

@@ -4,10 +4,13 @@ import { View, StyleSheet } from 'react-native';
 // To avoid issues we use absolute positioned element with predefined screen size
 const AbsolutePositionedKeyboardAwareView = ({ onLayout, previewDimensions: { width, height }, children, }) => {
     const onLayoutHandler = ({ nativeEvent }) => {
-        onLayout({
-            height: nativeEvent.layout.height,
-            width: nativeEvent.layout.width,
-        });
+        const { height: layoutHeight, width: layoutWidth } = nativeEvent.layout;
+        if (layoutHeight !== height || layoutWidth !== width) {
+            onLayout({
+                height: layoutHeight,
+                width: layoutWidth,
+            });
+        }
     };
     return (React.createElement(View, { style: styles.container, onLayout: onLayoutHandler },
         React.createElement(View, { style: width === 0

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

@@ -1,5 +1,4 @@
-import { Animated } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
+import { Animated, Insets } from 'react-native';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
 export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
@@ -13,26 +12,50 @@ export declare const getAddonPanelPosition: (animatedValue: Animated.Value, prev
     }[];
     width: number;
 }[];
-declare type PreviewPositionArgs = {
+type PreviewPositionArgs = {
     animatedValue: Animated.Value;
     previewDimensions: PreviewDimens;
-    slideBetweenAnimation: boolean;
     wide: boolean;
-    noSafeArea: boolean;
-    insets: EdgeInsets;
+    insets: Insets;
+    tabOpen: number;
+    lastTabOpen: number;
 };
-export declare const getPreviewPosition: ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide, noSafeArea, insets, }: PreviewPositionArgs) => {
+/**
+ * Build the animated style for the preview container view.
+ *
+ * When the navigator or addons panel is focused, the preview container is
+ * scaled down and translated to the left (or right) of the panel.
+ */
+export declare const getPreviewStyle: ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, wide, insets, tabOpen, lastTabOpen, }: PreviewPositionArgs) => {
     transform: ({
         translateX: Animated.AnimatedInterpolation<string | number>;
         translateY?: undefined;
+        scale?: undefined;
     } | {
         translateY: Animated.AnimatedInterpolation<string | number>;
         translateX?: undefined;
+        scale?: undefined;
+    } | {
+        scale: Animated.AnimatedInterpolation<string | number>;
+        translateX?: undefined;
+        translateY?: undefined;
     })[];
 };
-export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetweenAnimation: boolean, wide: boolean) => {
-    transform: {
-        scale: Animated.AnimatedInterpolation<string | number>;
-    }[];
+/**
+ * Build the animated shadow style for the preview.
+ *
+ * When the navigator or addons panel are visible the scaled preview will have
+ * a shadow, and when going to the preview tab the shadow will be invisible.
+ */
+export declare const getPreviewShadowStyle: (animatedValue: Animated.Value) => {
+    elevation: number;
+    shadowColor: string;
+    shadowOpacity: Animated.AnimatedInterpolation<string | number>;
+    shadowRadius: number;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    overflow: "visible";
 };
 export {};

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

@@ -1,13 +1,17 @@
 import { I18nManager } from 'react-native';
 import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
+// Factor that will flip the animation orientation in RTL locales.
 const RTL_SCALE = I18nManager.isRTL ? -1 : 1;
+// Percentage to scale the preview area by when opening a panel.
 const PREVIEW_SCALE = 0.3;
-const PREVIEW_WIDE_SCREEN = 0.7;
+// Percentage to scale the preview area by when opening a panel, on wide screens.
+const PREVIEW_SCALE_WIDE = 0.7;
+// Percentage to shrink the visible preview by, without affecting the panel size.
+const PREVIEW_SCALE_SHRINK = 0.9;
 const SCALE_OFFSET = 0.025;
-const TRANSLATE_X_OFFSET = 6;
 const TRANSLATE_Y_OFFSET = 12;
 const panelWidth = (width, wide) => {
-    const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
+    const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
     return width * (1 - scale - SCALE_OFFSET);
 };
 export const getNavigatorPanelPosition = (animatedValue, previewWidth, wide) => {
@@ -32,7 +36,10 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
                 {
                     translateX: animatedValue.interpolate({
                         inputRange: [PREVIEW, ADDONS],
-                        outputRange: [previewWidth * RTL_SCALE, (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE],
+                        outputRange: [
+                            previewWidth * RTL_SCALE,
+                            (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
+                        ],
                     }),
                 },
             ],
@@ -40,11 +47,25 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, 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) * RTL_SCALE;
-    const marginTop = noSafeArea ? 0 : insets.top;
-    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET) + marginTop;
+/**
+ * Build the animated style for the preview container view.
+ *
+ * When the navigator or addons panel is focused, the preview container is
+ * scaled down and translated to the left (or right) of the panel.
+ */
+export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, wide, insets, tabOpen, lastTabOpen, }) => {
+    const scale = (wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE) * PREVIEW_SCALE_SHRINK;
+    const scaledPreviewWidth = previewWidth * scale;
+    const scaledPreviewHeight = previewHeight * scale;
+    // Horizontally center the scaled preview in the available space beside the panel.
+    const nonPanelWidth = previewWidth - panelWidth(previewWidth, wide);
+    const translateXOffset = (nonPanelWidth - scaledPreviewWidth) / 2;
+    const translateX = (previewWidth / 2 - (previewWidth * scale) / 2 - translateXOffset) * RTL_SCALE;
+    // Translate the preview to the top edge of the screen, move it down by the
+    // safe area inset, then by the preview Y offset.
+    const translateY = -(previewHeight / 2 - scaledPreviewHeight / 2) + insets.top + TRANSLATE_Y_OFFSET;
+    // Is navigation moving from one panel to another, skipping preview?
+    const skipPreview = lastTabOpen !== PREVIEW && tabOpen !== PREVIEW;
     return {
         transform: [
             {
@@ -56,22 +77,32 @@ export const getPreviewPosition = ({ animatedValue, previewDimensions: { width:
             {
                 translateY: animatedValue.interpolate({
                     inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-                    outputRange: [translateY, slideBetweenAnimation ? translateY : marginTop, translateY],
+                    outputRange: [translateY, skipPreview ? translateY : 0, translateY],
                 }),
             },
-        ],
-    };
-};
-export const getPreviewScale = (animatedValue, slideBetweenAnimation, wide) => {
-    const scale = wide ? PREVIEW_WIDE_SCREEN : PREVIEW_SCALE;
-    return {
-        transform: [
             {
                 scale: animatedValue.interpolate({
                     inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-                    outputRange: [scale, slideBetweenAnimation ? scale : 1, scale],
+                    outputRange: [scale, skipPreview ? scale : 1, scale],
                 }),
             },
         ],
     };
 };
+/**
+ * Build the animated shadow style for the preview.
+ *
+ * When the navigator or addons panel are visible the scaled preview will have
+ * a shadow, and when going to the preview tab the shadow will be invisible.
+ */
+export const getPreviewShadowStyle = (animatedValue) => ({
+    elevation: 8,
+    shadowColor: '#000',
+    shadowOpacity: animatedValue.interpolate({
+        inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+        outputRange: [0.25, 0, 0.25],
+    }),
+    shadowRadius: 8,
+    shadowOffset: { width: 0, height: 0 },
+    overflow: 'visible',
+});

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

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

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

@@ -14,7 +14,7 @@ const navStyle = {
     right: 0,
     bottom: 0,
 };
-const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
+const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible, onLayout }) => {
     const insets = useSafeAreaInsets();
     const handleToggleUI = () => {
         setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
@@ -29,7 +29,7 @@ const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (React.createElement(View, { style: navStyle },
+    return (React.createElement(View, { style: navStyle, onLayout: onLayout },
         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 } })));

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

@@ -3,3 +3,4 @@ export declare const GridIcon: () => JSX.Element;
 export declare const StoryIcon: ({ selected }: {
     selected: boolean;
 }) => JSX.Element;
+export declare const SearchIcon: () => JSX.Element;