@storybook/react-native 6.5.0-rc.8 → 6.5.0

package/dist/constants.d.ts

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

package/dist/constants.js

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

package/dist/index.d.ts

@@ -18,3 +18,4 @@ export declare const raw: C['raw'];
 export declare const storiesOf: (kind: string, _module: NodeModule) => StoryApi<ReactNode>;
 export declare const getStorybookUI: (params?: Partial<import("./preview/View").Params>) => () => JSX.Element;
 export * from './types/types-6.0';
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/index.js

@@ -20,3 +20,4 @@ export * from './types/types-6.0';
 global.__STORYBOOK_STORY_STORE__ = {
     initializationPromise: (_a = clientApi.storyStore) === null || _a === void 0 ? void 0 : _a.initializationPromise,
 };
+export { theme, darkTheme } from './preview/components/Shared/theme';

package/dist/preview/View.js

@@ -15,11 +15,12 @@ import { ThemeProvider } from 'emotion-theming';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useSetStoryContext, syncExternalUI } from '../hooks';
 import OnDeviceUI from './components/OnDeviceUI';
-import { theme } from './components/Shared/theme';
+import { darkTheme, theme } from './components/Shared/theme';
 import StoryView from './components/StoryView';
 import createChannel from '@storybook/channel-websocket';
 import getHost from './rn-host-detect';
 import events from '@storybook/core-events';
+import { Appearance } from 'react-native';
 import deepmerge from 'deepmerge';
 const STORAGE_KEY = 'lastOpenedStory';
 export class View {
@@ -89,7 +90,7 @@ export class View {
             });
             // eslint-disable-next-line consistent-this
             const self = this;
-            const appliedTheme = deepmerge(theme, (_a = params.theme) !== null && _a !== void 0 ? _a : {});
+            const appliedTheme = deepmerge(Appearance.getColorScheme() === 'dark' ? darkTheme : 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,

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

@@ -8,9 +8,9 @@ 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 { getAddonPanelPosition, getSidebarPanelPosition, getPreviewShadowStyle, getPreviewStyle, } from './animation';
 import Navigation from './navigation';
-import { PREVIEW, ADDONS } from './navigation/constants';
+import { CANVAS, ADDONS } from './navigation/constants';
 import Panel from './Panel';
 import { useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -35,7 +35,7 @@ const styles = StyleSheet.create({
 });
 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, shouldDisableKeyboardAvoidingView, keyboardAvoidingViewVerticalOffset, tabOpen: initialTabOpen, }) => {
-    const [tabOpen, setTabOpen] = useState(initialTabOpen || PREVIEW);
+    const [tabOpen, setTabOpen] = useState(initialTabOpen || CANVAS);
     const lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
@@ -57,7 +57,7 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
         }).start();
         setTabOpen(newTabOpen);
         // close the keyboard opened from a TextInput from story list or knobs
-        if (newTabOpen === PREVIEW) {
+        if (newTabOpen === CANVAS) {
             Keyboard.dismiss();
         }
     }, [tabOpen]);
@@ -105,7 +105,7 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
     // 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;
+    const isPreviewInactive = tabOpen !== CANVAS;
     return (React.createElement(React.Fragment, null,
         React.createElement(Container, null,
             React.createElement(KeyboardAvoidingView, { enabled: !shouldDisableKeyboardAvoidingView || isPreviewInactive, behavior: IS_IOS ? 'padding' : null, keyboardVerticalOffset: keyboardVerticalOffset, style: flex },
@@ -116,9 +116,9 @@ const OnDeviceUI = ({ storyIndex, shouldDisableKeyboardAvoidingView, keyboardAvo
                             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),
+                        isPreviewInactive ? (React.createElement(TouchableOpacity, { style: StyleSheet.absoluteFillObject, onPress: () => handleToggleTab(CANVAS) })) : null),
                     React.createElement(Panel, { edge: "right", style: [
-                            getNavigatorPanelPosition(animatedValue.current, previewDimensions.width, wide),
+                            getSidebarPanelPosition(animatedValue.current, previewDimensions.width, wide),
                             panelSafeAreaMargins,
                         ] },
                         React.createElement(StoryListView, { storyIndex: storyIndex })),

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

@@ -1,6 +1,6 @@
 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) => {
+export declare const getSidebarPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
         translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
@@ -23,7 +23,7 @@ type PreviewPositionArgs = {
 /**
  * Build the animated style for the preview container view.
  *
- * When the navigator or addons panel is focused, the preview container is
+ * When the sidebar 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) => {
@@ -44,7 +44,7 @@ export declare const getPreviewStyle: ({ animatedValue, previewDimensions: { wid
 /**
  * Build the animated shadow style for the preview.
  *
- * When the navigator or addons panel are visible the scaled preview will have
+ * When the sidebar 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) => {

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

@@ -1,5 +1,5 @@
 import { I18nManager } from 'react-native';
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
+import { SIDEBAR, CANVAS, 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.
@@ -14,13 +14,13 @@ const panelWidth = (width, wide) => {
     const scale = wide ? PREVIEW_SCALE_WIDE : PREVIEW_SCALE;
     return width * (1 - scale - SCALE_OFFSET);
 };
-export const getNavigatorPanelPosition = (animatedValue, previewWidth, wide) => {
+export const getSidebarPanelPosition = (animatedValue, previewWidth, wide) => {
     return [
         {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [NAVIGATOR, PREVIEW],
+                        inputRange: [SIDEBAR, CANVAS],
                         outputRange: [0, (-panelWidth(previewWidth, wide) - 1) * RTL_SCALE],
                     }),
                 },
@@ -35,7 +35,7 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
             transform: [
                 {
                     translateX: animatedValue.interpolate({
-                        inputRange: [PREVIEW, ADDONS],
+                        inputRange: [CANVAS, ADDONS],
                         outputRange: [
                             previewWidth * RTL_SCALE,
                             (previewWidth - panelWidth(previewWidth, wide)) * RTL_SCALE,
@@ -50,7 +50,7 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
 /**
  * Build the animated style for the preview container view.
  *
- * When the navigator or addons panel is focused, the preview container is
+ * When the sidebar 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, }) => {
@@ -65,24 +65,24 @@ export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: pre
     // 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;
+    const skipPreview = lastTabOpen !== CANVAS && tabOpen !== CANVAS;
     return {
         transform: [
             {
                 translateX: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [translateX, 0, -translateX],
                 }),
             },
             {
                 translateY: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [translateY, skipPreview ? translateY : 0, translateY],
                 }),
             },
             {
                 scale: animatedValue.interpolate({
-                    inputRange: [NAVIGATOR, PREVIEW, ADDONS],
+                    inputRange: [SIDEBAR, CANVAS, ADDONS],
                     outputRange: [scale, skipPreview ? scale : 1, scale],
                 }),
             },
@@ -92,14 +92,14 @@ export const getPreviewStyle = ({ animatedValue, previewDimensions: { width: pre
 /**
  * Build the animated shadow style for the preview.
  *
- * When the navigator or addons panel are visible the scaled preview will have
+ * When the sidebar 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],
+        inputRange: [SIDEBAR, CANVAS, ADDONS],
         outputRange: [0.25, 0, 0.25],
     }),
     shadowRadius: 8,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
-import { NAVIGATOR, PREVIEW, ADDONS } from './constants';
+import { SIDEBAR, CANVAS, ADDONS } from './constants';
 import { TabBar, TabButton } from '../../Shared/tabs';
 const NavigationTabBar = styled(TabBar)(({ theme }) => ({
     paddingHorizontal: theme.tokens.spacing2,
@@ -9,6 +9,6 @@ const NavigationTabBar = styled(TabBar)(({ theme }) => ({
     borderTopWidth: theme.navigation.borderWidth,
 }));
 export const NavigationBar = React.memo(({ index, onPress, style }) => (React.createElement(NavigationTabBar, { style: style },
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
-    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Sidebar", id: SIDEBAR, active: index === SIDEBAR }, "SIDEBAR"),
+    React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Canvas", id: CANVAS, active: index === CANVAS }, "CANVAS"),
     React.createElement(TabButton, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS"))));

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

@@ -1,3 +1,3 @@
-export declare const NAVIGATOR = -1;
-export declare const PREVIEW = 0;
+export declare const SIDEBAR = -1;
+export declare const CANVAS = 0;
 export declare const ADDONS = 1;

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

@@ -1,3 +1,3 @@
-export const NAVIGATOR = -1;
-export const PREVIEW = 0;
+export const SIDEBAR = -1;
+export const CANVAS = 0;
 export const ADDONS = 1;

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

@@ -20,10 +20,13 @@ interface ThemeTokens {
         normal: number;
     };
     color: {
+        navy: string;
+        offBlack: string;
         black: string;
         white: string;
         grey200: string;
         grey700: string;
+        grey800: string;
         red500: string;
         blue100: string;
         blue200: string;
@@ -182,4 +185,5 @@ export interface Theme {
     };
 }
 export declare const theme: Theme;
+export declare const darkTheme: Theme;
 export {};

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

@@ -11,10 +11,13 @@ const tokens = {
         normal: 16,
     },
     color: {
-        black: '#001a23',
+        navy: '#001a23',
+        black: '#000',
+        offBlack: '#222',
         white: '#ffffff',
         grey200: '#dee2e3',
         grey700: '#859499',
+        grey800: '#575757',
         red500: '#ff4400',
         blue100: '#f6f9fc',
         blue200: '#e0eaf5',
@@ -42,10 +45,15 @@ const tokens = {
     },
 };
 const text = {
-    primaryColor: tokens.color.black,
+    primaryColor: tokens.color.navy,
     secondaryColor: tokens.color.grey700,
     linkColor: '#0000ff',
 };
+const textOnDark = {
+    primaryColor: tokens.color.white,
+    secondaryColor: tokens.color.grey200,
+    linkColor: tokens.color.blue600,
+};
 export const theme = {
     tokens,
     text,
@@ -177,3 +185,134 @@ export const theme = {
         },
     },
 };
+export const darkTheme = {
+    tokens,
+    text: textOnDark,
+    backgroundColor: tokens.color.offBlack,
+    preview: {
+        containerBackgroundColor: tokens.color.black,
+        backgroundColor: tokens.color.offBlack,
+    },
+    navigation: {
+        backgroundColor: tokens.color.offBlack,
+        borderColor: tokens.color.grey800,
+        borderWidth: tokens.borderWidthNormal,
+        visibilityBorderRadius: tokens.borderRadius.small,
+        visibilityInnerBorderColor: tokens.color.navy,
+        visibilityOuterBorderColor: tokens.color.navy,
+    },
+    panel: {
+        backgroundColor: tokens.color.offBlack,
+        borderWidth: tokens.borderWidthNormal,
+        borderColor: tokens.color.grey800,
+        paddingVertical: 0,
+        paddingHorizontal: tokens.spacing2,
+    },
+    storyList: {
+        fontSize: tokens.fontSize.normal,
+        headerPaddingHorizontal: tokens.spacing2,
+        headerPaddingVertical: tokens.spacing2,
+        headerTextColor: textOnDark.primaryColor,
+        headerFontWeight: '500',
+        storyPaddingHorizontal: tokens.spacing2,
+        storyPaddingVertical: tokens.spacing1 * 1.5,
+        storyIndent: tokens.spacing6,
+        storyTextColor: textOnDark.primaryColor,
+        storyFontWeight: '400',
+        storySelectedBackgroundColor: tokens.color.navy,
+        storySelectedTextColor: tokens.color.white,
+        storySelectedFontWeight: '700',
+        sectionSpacing: tokens.spacing2,
+        sectionActiveBackgroundColor: tokens.color.grey800,
+        sectionBorderRadius: tokens.borderRadius.medium,
+        search: {
+            fontSize: tokens.fontSize.normal,
+            textColor: textOnDark.primaryColor,
+            placeholderTextColor: textOnDark.secondaryColor,
+            borderRadius: tokens.borderRadius.round,
+            borderColor: tokens.color.grey800,
+            borderWidth: tokens.borderWidthNormal,
+            backgroundColor: tokens.color.grey800,
+            paddingVertical: tokens.spacing2,
+            paddingHorizontal: tokens.spacing3,
+        },
+    },
+    button: {
+        fontSize: tokens.fontSize.smaller,
+        fontWeight: '600',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing5,
+        primary: {
+            textColor: textOnDark.primaryColor,
+            backgroundColor: tokens.color.black,
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+        secondary: {
+            textColor: textOnDark.primaryColor,
+            backgroundColor: 'transparent',
+            borderColor: tokens.color.blue300,
+            borderWidth: tokens.borderWidthNormal,
+            borderRadius: tokens.borderRadius.medium,
+        },
+    },
+    tabs: {
+        fontSize: tokens.fontSize.small,
+        fontWeight: '500',
+        paddingVertical: tokens.spacing2,
+        paddingHorizontal: tokens.spacing2 * 1.25,
+        borderWidth: tokens.borderWidthNormal,
+        borderRadius: tokens.borderRadius.round,
+        activeBorderColor: tokens.color.blue300,
+        activeBackgroundColor: tokens.color.navy,
+        activeTextColor: textOnDark.primaryColor,
+        inactiveBorderColor: 'transparent',
+        inactiveBackgroundColor: 'transparent',
+        inactiveTextColor: textOnDark.secondaryColor,
+    },
+    inputs: {
+        errorTextColor: tokens.color.red500,
+        labelFontSize: tokens.fontSize.smaller,
+        labelTextColor: textOnDark.primaryColor,
+        text: {
+            fontSize: tokens.fontSize.smaller,
+            textColor: textOnDark.primaryColor,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.black,
+            borderRadius: tokens.borderRadius.medium,
+            paddingVertical: tokens.spacing1 * 1.5,
+            paddingHorizontal: tokens.spacing1 * 1.5,
+        },
+        radio: {
+            fontSize: tokens.fontSize.smaller,
+            height: 20,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.black,
+            paddingVertical: 3,
+            paddingHorizontal: 3,
+            activeBackgroundColor: tokens.color.green500,
+            itemSpacing: tokens.spacing1,
+            labelSpacing: tokens.spacing2,
+        },
+        swatch: {
+            fontSize: tokens.fontSize.smaller,
+            height: 40,
+            borderWidth: tokens.borderWidthNormal,
+            borderColor: tokens.color.blue400,
+            backgroundColor: tokens.color.navy,
+            outerBorderRadius: tokens.borderRadius.medium,
+            innerBorderRadius: tokens.borderRadius.small,
+            paddingVertical: tokens.spacing1,
+            paddingHorizontal: tokens.spacing1,
+            nameTextWeight: '600',
+        },
+        slider: {
+            fontSize: tokens.fontSize.smaller,
+            labelTextColor: textOnDark.secondaryColor,
+            valueTextColor: textOnDark.primaryColor,
+        },
+    },
+};

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

@@ -36,7 +36,7 @@ const SearchContainer = styled.View(({ theme }) => ({
 const SearchBar = (props) => {
     const theme = useTheme();
     return (React.createElement(SearchContainer, null,
-        React.createElement(Icon, { name: "search", opacity: 0.5 }),
+        React.createElement(Icon, { name: "search", opacity: 0.5, color: 'white' }),
         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(Icon, { name: "grid", width: 10, height: 10, marginRight: 6 }),
+        React.createElement(Icon, { name: "grid", width: 12, height: 12, 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(Icon, { name: selected ? 'story-white' : 'story-blue', marginRight: 6 }),
+        React.createElement(Icon, { width: 14, height: 14, 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,6 +1,6 @@
 import React from 'react';
 import { Text, Keyboard } from 'react-native';
-import { useStoryContext } from '../../../hooks';
+import { useStoryContext, useTheme } from '../../../hooks';
 import { Box } from '../Shared/layout';
 /**
  * This is a handler for `onStartShouldSetResponder`, which dismisses the
@@ -20,11 +20,12 @@ function dismissOnStartResponder() {
 const StoryView = () => {
     const context = useStoryContext();
     const id = context === null || context === void 0 ? void 0 : context.id;
+    const { backgroundColor } = useTheme();
     if (context && context.unboundStoryFn) {
         const { unboundStoryFn: StoryComponent } = context;
-        return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
+        return (React.createElement(Box, { flex: true, key: id, testID: id, onStartShouldSetResponder: dismissOnStartResponder, backgroundColor: backgroundColor }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
     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.")));
+        React.createElement(Text, null, "Please open the sidebar and select a story to preview.")));
 };
 export default React.memo(StoryView);

package/dist/preview/start.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="webpack-env" />
 /// <reference types="node" />
+import { ClientApi } from '@storybook/client-api';
 import { Loadable } from '@storybook/core-client';
+import type { ArgsStoryFn } from '@storybook/csf';
 import { PreviewWeb } from '@storybook/preview-web';
-import { ClientApi } from '@storybook/client-api';
 import type { ReactNativeFramework } from '../types/types-6.0';
 import { View } from './View';
-import type { ArgsStoryFn } from '@storybook/csf';
 export declare const render: ArgsStoryFn<ReactNativeFramework>;
 export declare function start(): {
     view: View;

package/dist/preview/start.js

@@ -1,11 +1,11 @@
-import React from 'react';
-import Channel from '@storybook/channels';
 import { addons } from '@storybook/addons';
+import Channel from '@storybook/channels';
+import { ClientApi, setGlobalRender } from '@storybook/client-api';
 import Events from '@storybook/core-events';
 import { PreviewWeb } from '@storybook/preview-web';
-import { ClientApi, setGlobalRender } from '@storybook/client-api';
-import { View } from './View';
+import React from 'react';
 import { executeLoadableForChanges } from './executeLoadable';
+import { View } from './View';
 export const render = (args, context) => {
     const { id, component: Component } = context;
     if (!Component) {

package/package.json

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

package/readme.md

@@ -199,7 +199,7 @@ You can pass these parameters to getStorybookUI call in your storybook entry poi
 ```
 {
     tabOpen: Number (0)
-        -- which tab should be open. -1 Navigator, 0 Preview, 1 Addons
+        -- which tab should be open. -1 SideBar, 0 Canvas, 1 Addons
     initialSelection: string | Object (undefined)
         -- initialize storybook with a specific story.  eg: `mybutton--largebutton` or `{ kind: 'MyButton', name: 'LargeButton' }`
     shouldDisableKeyboardAvoidingView: Boolean (false)

package/dist/types/emotion-native.d.js

@@ -1,4 +0,0 @@
-"use strict";
-
-var _css2 = _interopRequireDefault(require("@emotion/css"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }