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

package/dist/hooks.d.ts

@@ -1,4 +1,5 @@
 import type { StoryContext } from '@storybook/csf';
+import type { Theme } from './preview/components/Shared/theme';
 import type { ReactNativeFramework } from './types/types-6.0';
 /**
  * Hook that returns a function to set the current story context.
@@ -20,3 +21,7 @@ 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 gets the current theme values.
+ */
+export declare function useTheme(): Theme;

package/dist/hooks.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { atom, useAtomValue, useSetAtom } from 'jotai';
+import { useTheme as useEmotionTheme } from 'emotion-theming';
 const storyContextAtom = atom(null);
 /**
  * Hook that returns a function to set the current story context.
@@ -18,18 +19,24 @@ export function useStoryContext() {
  */
 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]);
+    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]));
+    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]));
+    return useAtomValue(useMemo(() => atom((get) => { var _a; return ((_a = get(storyContextAtom)) === null || _a === void 0 ? void 0 : _a.title) === title; }), [title]));
+}
+/**
+ * Hook that gets the current theme values.
+ */
+export function useTheme() {
+    return useEmotionTheme();
 }

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { StoryIndex, SelectionSpecifier } from '@storybook/store';
 import { StoryContext } from '@storybook/csf';
-import { theme } from './components/Shared/theme';
+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,10 @@ declare type InitialSelection = `${StoryKind}--${StoryName}` | {
      */
     name: StoryName;
 };
-export declare type Params = {
+type DeepPartial<T> = T extends object ? {
+    [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+export type Params = {
     onDeviceUI?: boolean;
     enableWebsockets?: boolean;
     query?: string;
@@ -29,8 +32,7 @@ export declare type Params = {
     isUIHidden?: boolean;
     shouldDisableKeyboardAvoidingView?: boolean;
     keyboardAvoidingViewVerticalOffset?: number;
-} & {
-    theme?: typeof theme;
+    theme: DeepPartial<Theme>;
 };
 export declare class View {
     _storyIndex: StoryIndex;

package/dist/preview/View.js

@@ -20,6 +20,7 @@ import StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
     constructor(preview) {
@@ -65,6 +66,7 @@ export class View {
             });
         };
         this.getStorybookUI = (params = {}) => {
+            var _a;
             const { shouldPersistSelection = true, onDeviceUI = true, enableWebsockets = false } = params;
             const initialStory = this._getInitialStory(params);
             if (enableWebsockets) {
@@ -87,7 +89,7 @@ export class View {
             });
             // eslint-disable-next-line consistent-this
             const self = this;
-            const appliedTheme = Object.assign(Object.assign({}, theme), params.theme);
+            const appliedTheme = deepmerge(theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
             return () => {
                 const setContext = useSetStoryContext();
                 const [, forceUpdate] = useReducer((x) => x + 1, 0);

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

@@ -1,18 +1,18 @@
 import styled from '@emotion/native';
 import React, { useState, useRef } from 'react';
-import { Animated, Dimensions, Keyboard, KeyboardAvoidingView, Platform, SafeAreaView, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
-import { useStoryContextParam } from '../../../hooks';
+import { Animated, Dimensions, Easing, Keyboard, KeyboardAvoidingView, Platform, TouchableOpacity, StatusBar, StyleSheet, View, } from 'react-native';
+import { useStoryContextParam, useTheme } 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;
@@ -20,28 +20,22 @@ 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,
-    borderRadius: disabled ? 0 : 12,
-    overflow: 'hidden',
-}));
-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.preview.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 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 [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
-    const [slideBetweenAnimation, setSlideBetweenAnimation] = useState(false);
+    const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
@@ -54,14 +48,14 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
         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();
@@ -70,35 +64,62 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     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,
+    };
+    // The panels always apply the safe area, regardless of the story parameters.
+    const panelSafeAreaMargins = {
+        paddingBottom: insets.bottom + navBarHeight,
+        paddingTop: insets.top,
+    };
+    // 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);
     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(Container, null,
+            React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || tabOpen !== PREVIEW, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, 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, null))),
-                            tabOpen !== PREVIEW ? (React.createElement(TouchableOpacity, { style: absolutePosition, onPress: () => handleToggleTab(PREVIEW) })) : null)),
-                    React.createElement(Panel, { style: getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide) },
+                        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, { edge: "right", style: [
+                            getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            panelSafeAreaMargins,
+                        ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),
-                    React.createElement(Panel, { style: [
+                    React.createElement(Panel, { edge: "left", style: [
                             getAddonPanelPosition(animatedValue.current, previewDimensions.width, wide),
-                            wrapperMargin,
+                            panelSafeAreaMargins,
                         ] },
                         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/Panel.d.ts

@@ -1,7 +1,9 @@
-import React, { ReactNode } from 'react';
-interface Props {
-    style: any[];
-    children: ReactNode;
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+interface PanelProps {
+    edge: 'left' | 'right';
+    style: StyleProp<Animated.AnimatedProps<ViewStyle>>;
+    children: React.ReactNode;
 }
-declare const _default: React.MemoExoticComponent<({ children, style }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ edge, children, style }: PanelProps) => JSX.Element>;
 export default _default;

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

@@ -1,9 +1,14 @@
 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',
+const Container = styled(Animated.View)(({ theme, edge }) => ({
+    backgroundColor: theme.panel.backgroundColor,
+    borderStartWidth: edge === 'left' ? theme.panel.borderWidth : undefined,
+    borderEndWidth: edge === 'right' ? theme.panel.borderWidth : undefined,
+    borderColor: theme.panel.borderColor,
 }));
-const Panel = ({ children, style }) => (React.createElement(Container, { style: [StyleSheet.absoluteFillObject, ...style] }, children));
+const Panel = ({ edge, children, style }) => {
+    const containerStyle = StyleSheet.flatten([StyleSheet.absoluteFillObject, style]);
+    return (React.createElement(Container, { edge: edge, style: containerStyle }, children));
+};
 export default React.memo(Panel);

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/addons/Addons.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-declare const _default: React.MemoExoticComponent<({ active }: {
+interface AddonsProps {
     active: boolean;
-}) => JSX.Element>;
+}
+declare const _default: React.MemoExoticComponent<({ active }: AddonsProps) => JSX.Element>;
 export default _default;

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

@@ -1,33 +1,18 @@
 import React, { useState } from 'react';
-import { SafeAreaView, StyleSheet } from 'react-native';
-import styled from '@emotion/native';
+import { Text } from 'react-native';
 import { addons } from '@storybook/addons';
 import AddonsList from './List';
 import AddonWrapper from './Wrapper';
-import { Label } from '../../Shared/text';
-const NoAddonContainer = styled.View({
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-});
-const Container = styled.View(({ theme }) => ({
-    flex: 1,
-    backgroundColor: theme.backgroundColor,
-}));
+import { Box } from '../../Shared/layout';
 const Addons = ({ active }) => {
     const panels = addons.getElements('panel');
     const [addonSelected, setAddonSelected] = useState(Object.keys(panels)[0] || null);
     if (Object.keys(panels).length === 0) {
-        return (React.createElement(SafeAreaView, { style: styles.container },
-            React.createElement(NoAddonContainer, null,
-                React.createElement(Label, null, "No addons loaded."))));
+        return (React.createElement(Box, { alignItems: "center", justifyContent: "center" },
+            React.createElement(Text, null, "No addons loaded.")));
     }
-    return (React.createElement(Container, null,
-        React.createElement(SafeAreaView, { style: styles.container },
-            React.createElement(AddonsList, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
-            React.createElement(AddonWrapper, { addonSelected: active ? addonSelected : null, panels: panels }))));
+    return (React.createElement(Box, { flex: true },
+        React.createElement(AddonsList, { onPressAddon: setAddonSelected, panels: panels, addonSelected: active ? addonSelected : null }),
+        React.createElement(AddonWrapper, { addonSelected: active ? addonSelected : null, panels: panels })));
 };
-const styles = StyleSheet.create({
-    container: { flex: 1 },
-});
 export default React.memo(Addons);

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

@@ -1,20 +1,11 @@
 import React from 'react';
-import { ScrollView } from 'react-native';
-import styled from '@emotion/native';
-import Button from '../navigation/Button';
-const Container = styled.View(({ theme }) => ({
-    flexDirection: 'row',
-    borderBottomWidth: 1,
-    borderBottomColor: theme.borderColor || '#e6e6e6',
-}));
+import { TabBar, TabButton } from '../../Shared/tabs';
 const AddonList = ({ panels, addonSelected, onPressAddon }) => {
     const addonKeys = Object.keys(panels);
-    const renderTab = (id, title) => (React.createElement(Button, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, title.toUpperCase()));
-    return (React.createElement(Container, null,
-        React.createElement(ScrollView, { showsHorizontalScrollIndicator: false, horizontal: true }, addonKeys.map((id) => {
-            const { title } = panels[id];
-            const resolvedTitle = typeof title === 'function' ? title() : title;
-            return renderTab(id, resolvedTitle);
-        }))));
+    return (React.createElement(TabBar, { scrollable: true }, addonKeys.map((id) => {
+        const { title } = panels[id];
+        const resolvedTitle = typeof title === 'function' ? title() : title;
+        return (React.createElement(TabButton, { active: id === addonSelected, key: id, id: id, onPress: () => onPressAddon(id) }, resolvedTitle.toUpperCase()));
+    })));
 };
 export default React.memo(AddonList);

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

@@ -1,22 +1,18 @@
 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
-const style = StyleSheet.create({
-    invisible: {
-        height: 0,
-        width: 0,
-        opacity: 0,
-        position: 'absolute',
-    },
-    flex: {
-        flex: 1,
-    },
-});
+import { ScrollView } from 'react-native';
+import styled from '@emotion/native';
+import { useTheme } from '../../../../hooks';
+const Container = styled.View(({ selected }) => ({
+    display: selected ? 'flex' : 'none',
+    flex: 1,
+}));
 const Wrapper = ({ panels, addonSelected }) => {
+    const theme = useTheme();
     const addonKeys = Object.keys(panels);
     const content = addonKeys.map((id) => {
         const selected = addonSelected === id;
-        return (React.createElement(View, { key: id, style: selected ? style.flex : style.invisible },
-            React.createElement(ScrollView, null, panels[id].render({ active: selected, key: id }))));
+        return (React.createElement(Container, { key: id, selected: selected },
+            React.createElement(ScrollView, { contentContainerStyle: { padding: theme.panel.paddingHorizontal } }, panels[id].render({ active: selected, key: id }))));
     });
     return React.createElement(React.Fragment, null, content);
 };

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;