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

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/components/OnDeviceUI/OnDeviceUI.js

@@ -1,18 +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;
@@ -20,28 +21,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.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({ 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 lastTabOpen = React.useRef(tabOpen);
     const [previewDimensions, setPreviewDimensions] = useState(() => ({
         width: Dimensions.get('window').width,
         height: Dimensions.get('window').height,
@@ -49,19 +44,20 @@ const OnDeviceUI = ({ storyIndex, isUIHidden, shouldDisableKeyboardAvoidingView,
     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 = 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();
@@ -70,35 +66,55 @@ 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,
+    };
     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, 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, { 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/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/StoryListView/StoryListView.js

@@ -2,11 +2,10 @@ import styled from '@emotion/native';
 import { addons } from '@storybook/addons';
 import Events from '@storybook/core-events';
 import React, { useMemo, useState } from 'react';
-import { SectionList, StyleSheet, View, } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SectionList, StyleSheet } from 'react-native';
+import { useIsStorySectionSelected, useIsStorySelected } from '../../../hooks';
 import { GridIcon, SearchIcon, StoryIcon } from '../Shared/icons';
 import { Header, Name } from '../Shared/text';
-import { useIsStorySelected, useIsStorySectionSelected } from '../../../hooks';
 const SearchInput = styled.TextInput(Object.assign({ fontSize: 16, padding: 0, paddingHorizontal: 36 }, StyleSheet.absoluteFillObject), ({ theme }) => ({
     color: theme.buttonActiveTextColor,
 }));
@@ -26,7 +25,7 @@ const SearchContainer = styled.View({
 const SearchBar = (props) => {
     return (React.createElement(SearchContainer, null,
         React.createElement(SearchIcon, null),
-        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: 'none', autoComplete: 'off', autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: "#666", returnKeyType: "search" }))));
+        React.createElement(SearchInput, Object.assign({}, props, { autoCapitalize: "none", autoComplete: "off", autoCorrect: false, spellCheck: false, clearButtonMode: "while-editing", disableFullscreenUI: true, placeholderTextColor: "#666", returnKeyType: "search" }))));
 };
 const HeaderContainer = styled.TouchableOpacity({
     marginTop: 8,
@@ -40,17 +39,12 @@ const HeaderContainer = styled.TouchableOpacity({
 }, ({ selected, theme }) => ({
     backgroundColor: selected ? theme.sectionActiveColor : undefined,
 }));
-const StoryListContainer = styled.View(({ theme }) => (Object.assign(Object.assign({ top: 0 }, StyleSheet.absoluteFillObject), { 
-    // for this to work I need to get the top margin from safeareview context
-    // shadowColor: '#000',
-    // shadowOffset: {
-    //   width: 0,
-    //   height: 1,
-    // },
-    // shadowOpacity: 0.2,
-    // shadowRadius: 1.41,
-    // elevation: 2,
-    borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: theme.borderColor, backgroundColor: theme.storyListBackgroundColor })));
+const StoryListContainer = styled.View(({ theme }) => ({
+    flex: 1,
+    borderRightWidth: StyleSheet.hairlineWidth,
+    borderRightColor: theme.borderColor,
+    backgroundColor: theme.storyListBackgroundColor,
+}));
 const SectionHeader = React.memo(({ title, onPress }) => {
     const selected = useIsStorySectionSelected(title);
     return (React.createElement(HeaderContainer, { key: title, selected: selected, onPress: onPress, activeOpacity: 0.8 },
@@ -67,7 +61,7 @@ const ItemTouchable = styled.TouchableOpacity({
     var _a;
     return {
         backgroundColor: selected
-            ? ((_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd')
+            ? (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd'
             : sectionSelected
                 ? theme === null || theme === void 0 ? void 0 : theme.sectionActiveColor
                 : undefined,
@@ -100,12 +94,10 @@ const styles = StyleSheet.create({
     sectionList: { flex: 1 },
     sectionListContentContainer: { paddingBottom: 6 },
 });
-const tabBarHeight = 40;
 function keyExtractor(item, index) {
     return item.id + index;
 }
 const StoryListView = ({ storyIndex }) => {
-    const insets = useSafeAreaInsets();
     const originalData = useMemo(() => getStories(storyIndex), [storyIndex]);
     const [data, setData] = useState(originalData);
     const handleChangeSearchText = (text) => {
@@ -131,20 +123,12 @@ const StoryListView = ({ storyIndex }) => {
         const channel = addons.getChannel();
         channel.emit(Events.SET_CURRENT_STORY, { storyId });
     };
-    const safeStyle = React.useMemo(() => {
-        return { flex: 1, marginTop: insets.top, paddingBottom: insets.bottom + tabBarHeight };
-    }, [insets]);
     const renderItem = React.useCallback(({ item, index, section }) => {
         return (React.createElement(ListItem, { storyId: item.id, title: item.name, kind: item.title, isLastItem: index === section.data.length - 1, onPress: () => changeStory(item.id) }));
     }, []);
     const renderSectionHeader = React.useCallback(({ section: { title, data } }) => (React.createElement(SectionHeader, { title: title, onPress: () => changeStory(data[0].id) })), []);
     return (React.createElement(StoryListContainer, null,
-        React.createElement(View, { style: safeStyle },
-            React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
-            React.createElement(SectionList
-            // contentInset={{ bottom: insets.bottom, top: 0 }}
-            , { 
-                // contentInset={{ bottom: insets.bottom, top: 0 }}
-                style: styles.sectionList, contentContainerStyle: styles.sectionListContentContainer, testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false }))));
+        React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", onChangeText: handleChangeSearchText, placeholder: "Find by name" }),
+        React.createElement(SectionList, { style: styles.sectionList, contentContainerStyle: styles.sectionListContentContainer, testID: "Storybook.ListView", renderItem: renderItem, renderSectionHeader: renderSectionHeader, keyExtractor: keyExtractor, sections: data, stickySectionHeadersEnabled: false })));
 };
 export default React.memo(StoryListView);

package/dist/types/types-6.0.d.ts

@@ -1,8 +1,8 @@
 import { ComponentProps, ComponentType, JSXElementConstructor, ReactElement } from 'react';
 import type { Args, ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn } from '@storybook/csf';
-export declare type StoryFnReactReturnType = ReactElement<unknown>;
+export type StoryFnReactReturnType = ReactElement<unknown>;
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/addons';
-export declare type ReactNativeFramework = {
+export type ReactNativeFramework = {
     component: ComponentType<any>;
     storyResult: StoryFnReactReturnType;
 };
@@ -13,7 +13,7 @@ export declare type ReactNativeFramework = {
  * export default { ... } as ComponentMeta<typeof Button>;
  * ```
  */
-export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
+export type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Meta<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
@@ -21,7 +21,7 @@ export declare type ComponentMeta<T extends keyof JSX.IntrinsicElements | JSXEle
  * const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
  * ```
  */
-export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
+export type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryFn<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv3) story is a simple component that receives args as props:
  *
@@ -31,7 +31,7 @@ export declare type ComponentStoryFn<T extends keyof JSX.IntrinsicElements | JSX
  * }
  * ```
  */
-export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
+export type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = StoryObj<ComponentProps<T>>;
 /**
  * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
@@ -42,25 +42,25 @@ export declare type ComponentStoryObj<T extends keyof JSX.IntrinsicElements | JS
  * NOTE: this is an alias for `ComponentStoryFn`.
  * In Storybook v7, `ComponentStory` will alias `ComponentStoryObj`
  */
-export declare type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
+export type ComponentStory<T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = Story<ComponentProps<T>>;
 /**
  * Metadata to configure the stories for a component.
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export declare type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
+export type Meta<TArgs = Args> = ComponentAnnotations<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
+export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
+export type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramework, TArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
@@ -69,4 +69,4 @@ export declare type StoryObj<TArgs = Args> = StoryAnnotations<ReactNativeFramewo
  * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type.
  *
  */
-export declare type Story<TArgs = Args> = StoryFn<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;

package/dist/types/types.d.ts

@@ -8,7 +8,7 @@ export interface RequireContext {
     (id: string): any;
     resolve(id: string): string;
 }
-export declare type LoaderFunction = () => void | any[];
-export declare type Loadable = RequireContext | RequireContext[] | LoaderFunction;
+export type LoaderFunction = () => void | any[];
+export type Loadable = RequireContext | RequireContext[] | LoaderFunction;
 export type { RenderContext, RenderContextWithoutStoryContext };
-export declare type RenderStoryFunction = (context: RenderContext) => void;
+export type RenderStoryFunction = (context: RenderContext) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "6.5.0-rc.1",
+  "version": "6.5.0-rc.2",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -69,10 +69,9 @@
     "util": "^0.12.4"
   },
   "devDependencies": {
-    "@types/react": "^18.0.21",
-    "@types/react-native": "^0.70.4",
-    "babel-jest": "^26.6.3",
-    "jest": "^26.6.3",
+    "@types/react": "~18.0.27",
+    "babel-jest": "^29.4.3",
+    "jest": "^29.4.3",
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {
@@ -87,5 +86,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "deada392ffc817d872b9e3fd7b00cbede4334e02"
+  "gitHead": "f94bf2102a2e59b583d23a89f22e29afe67ef8e4"
 }

package/scripts/__snapshots__/loader.test.js.snap

@@ -6,14 +6,14 @@ exports[`loader writeRequires when there are different file extensions writes th
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/file-extensions\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/file-extensions\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/file-extensions","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/file-extensions\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
-      import \\"@storybook/addon-ondevice-notes/register\\";
-import \\"@storybook/addon-ondevice-controls/register\\";
-import \\"@storybook/addon-ondevice-backgrounds/register\\";
-import \\"@storybook/addon-ondevice-actions/register\\";
+      import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+      import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -42,7 +42,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/file-extensions/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/file-extensions/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -55,14 +55,14 @@ exports[`loader writeRequires when there is a configuration object writes the st
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"ComponentsPrefix\\",\\"files\\":\\"**/*.stories.tsx\\",\\"directory\\":\\"./scripts/mocks/configuration-objects/components\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/configuration-objects\\\\\\\\/components(?:\\\\\\\\/(?!\\\\\\\\.)(?:(?:(?!(?:^|\\\\\\\\/)\\\\\\\\.).)*?)\\\\\\\\/|\\\\\\\\/|$)(?!\\\\\\\\.)(?=.)[^/]*?\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"ComponentsPrefix","files":"**/*.stories.tsx","directory":"./scripts/mocks/configuration-objects/components","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/configuration-objects\\\\/components(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
-      import \\"@storybook/addon-ondevice-notes/register\\";
-import \\"@storybook/addon-ondevice-controls/register\\";
-import \\"@storybook/addon-ondevice-backgrounds/register\\";
-import \\"@storybook/addon-ondevice-actions/register\\";
+      import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+      import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -91,7 +91,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx\\": require(\\"./components/FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/configuration-objects/components/FakeStory.stories.tsx": require("./components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -104,14 +104,14 @@ exports[`loader writeRequires when there is a story glob and exclude paths globs
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/exclude-config-files\\",\\"files\\":\\"**/*.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/exclude-config-files(?:\\\\\\\\/(?!\\\\\\\\.)(?:(?:(?!(?:^|\\\\\\\\/)\\\\\\\\.).)*?)\\\\\\\\/|\\\\\\\\/|$)(?!\\\\\\\\.)(?=.)[^/]*?\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/exclude-config-files","files":"**/*.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/exclude-config-files(?:\\\\/(?!\\\\.)(?:(?:(?!(?:^|\\\\/)\\\\.).)*?)\\\\/|\\\\/|$)(?!\\\\.)(?=.)[^/]*?\\\\.stories\\\\.tsx)$"}]
 
-      import \\"@storybook/addon-ondevice-notes/register\\";
-import \\"@storybook/addon-ondevice-controls/register\\";
-import \\"@storybook/addon-ondevice-backgrounds/register\\";
-import \\"@storybook/addon-ondevice-actions/register\\";
+      import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+      import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -140,7 +140,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx\\": require(\\"./include-components/FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/exclude-config-files/include-components/FakeStory.stories.tsx": require("./include-components/FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -153,14 +153,14 @@ exports[`loader writeRequires when there is a story glob writes the story import
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/all-config-files\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/all-config-files\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/all-config-files","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/all-config-files\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
-      import \\"@storybook/addon-ondevice-notes/register\\";
-import \\"@storybook/addon-ondevice-controls/register\\";
-import \\"@storybook/addon-ondevice-backgrounds/register\\";
-import \\"@storybook/addon-ondevice-actions/register\\";
+      import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+      import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
   import { decorators, parameters } from './preview';
@@ -189,7 +189,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/all-config-files/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/all-config-files/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)
@@ -202,14 +202,14 @@ exports[`loader writeRequires when there is no preview does not add preview rela
 
       import { configure, addDecorator, addParameters, addArgsEnhancer, clearDecorators } from '@storybook/react-native';
 
-      global.STORIES = [{\\"titlePrefix\\":\\"\\",\\"directory\\":\\"./scripts/mocks/no-preview\\",\\"files\\":\\"FakeStory.stories.tsx\\",\\"importPathMatcher\\":\\"^\\\\\\\\.[\\\\\\\\\\\\\\\\/](?:scripts\\\\\\\\/mocks\\\\\\\\/no-preview\\\\\\\\/FakeStory\\\\\\\\.stories\\\\\\\\.tsx)$\\"}]
+      global.STORIES = [{"titlePrefix":"","directory":"./scripts/mocks/no-preview","files":"FakeStory.stories.tsx","importPathMatcher":"^\\\\.[\\\\\\\\/](?:scripts\\\\/mocks\\\\/no-preview\\\\/FakeStory\\\\.stories\\\\.tsx)$"}]
 
-      import \\"@storybook/addon-ondevice-notes/register\\";
-import \\"@storybook/addon-ondevice-controls/register\\";
-import \\"@storybook/addon-ondevice-backgrounds/register\\";
-import \\"@storybook/addon-ondevice-actions/register\\";
+      import "@storybook/addon-ondevice-notes/register";
+import "@storybook/addon-ondevice-controls/register";
+import "@storybook/addon-ondevice-backgrounds/register";
+import "@storybook/addon-ondevice-actions/register";
 
-      import { argsEnhancers } from \\"@storybook/addon-actions/dist/modern/preset/addArgs\\"
+      import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs"
 
       
 
@@ -220,7 +220,7 @@ import \\"@storybook/addon-ondevice-actions/register\\";
     
 
       const getStories=() => {
-        return {\\"./scripts/mocks/no-preview/FakeStory.stories.tsx\\": require(\\"./FakeStory.stories.tsx\\")};
+        return {"./scripts/mocks/no-preview/FakeStory.stories.tsx": require("./FakeStory.stories.tsx")};
       }
 
       configure(getStories, module, false)