@storybook/react-native 6.0.1-beta.0 → 6.0.1-beta.10

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

@@ -1,28 +1,38 @@
 import { Animated } from 'react-native';
+import { EdgeInsets } from 'react-native-safe-area-context';
 import { PreviewDimens } from './absolute-positioned-keyboard-aware-view';
 export declare const getNavigatorPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
     width: number;
 }[];
 export declare const getAddonPanelPosition: (animatedValue: Animated.Value, previewWidth: number, wide: boolean) => {
     transform: {
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
     }[];
     width: number;
 }[];
-export declare const getPreviewPosition: (animatedValue: Animated.Value, { width: previewWidth, height: previewHeight }: PreviewDimens, slideBetweenAnimation: boolean, wide: boolean) => {
+declare type PreviewPositionArgs = {
+    animatedValue: Animated.Value;
+    previewDimensions: PreviewDimens;
+    slideBetweenAnimation: boolean;
+    wide: boolean;
+    noSafeArea: boolean;
+    insets: EdgeInsets;
+};
+export declare const getPreviewPosition: ({ animatedValue, previewDimensions: { width: previewWidth, height: previewHeight }, slideBetweenAnimation, wide, noSafeArea, insets, }: PreviewPositionArgs) => {
     transform: ({
-        translateX: Animated.AnimatedInterpolation;
+        translateX: Animated.AnimatedInterpolation<string | number>;
         translateY?: undefined;
     } | {
-        translateY: Animated.AnimatedInterpolation;
+        translateY: Animated.AnimatedInterpolation<string | number>;
         translateX?: undefined;
     })[];
 };
 export declare const getPreviewScale: (animatedValue: Animated.Value, slideBetweenAnimation: boolean, wide: boolean) => {
     transform: {
-        scale: Animated.AnimatedInterpolation;
+        scale: Animated.AnimatedInterpolation<string | number>;
     }[];
 };
+export {};

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

@@ -38,10 +38,11 @@ export const getAddonPanelPosition = (animatedValue, previewWidth, wide) => {
         },
     ];
 };
-export const getPreviewPosition = (animatedValue, { width: previewWidth, height: previewHeight }, slideBetweenAnimation, 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;
-    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET);
+    const marginTop = noSafeArea ? 0 : insets.top;
+    const translateY = -(previewHeight / 2 - (previewHeight * scale) / 2 - TRANSLATE_Y_OFFSET) + marginTop;
     return {
         transform: [
             {
@@ -53,7 +54,7 @@ export const getPreviewPosition = (animatedValue, { width: previewWidth, height:
             {
                 translateY: animatedValue.interpolate({
                     inputRange: [NAVIGATOR, PREVIEW, ADDONS],
-                    outputRange: [translateY, slideBetweenAnimation ? translateY : 0, translateY],
+                    outputRange: [translateY, slideBetweenAnimation ? translateY : marginTop, translateY],
                 }),
             },
         ],

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

@@ -1,7 +1,9 @@
 import React from 'react';
+import { ViewStyle } from 'react-native';
 export interface Props {
     index: number;
     onPress: (id: number) => void;
+    style: ViewStyle;
 }
-declare const _default: React.MemoExoticComponent<({ index, onPress }: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ index, onPress, style }: Props) => JSX.Element>;
 export default _default;

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

@@ -10,7 +10,7 @@ const Container = styled.View(({ theme }) => ({
     borderBottomWidth: 1,
     borderColor: theme.borderColor || '#e6e6e6',
 }));
-const Bar = ({ index, onPress }) => (React.createElement(Container, null,
+const Bar = ({ index, onPress, style }) => (React.createElement(Container, { style: style },
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Navigator", id: NAVIGATOR, active: index === NAVIGATOR }, "NAVIGATOR"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Preview", id: PREVIEW, active: index === PREVIEW }, "PREVIEW"),
     React.createElement(Button, { onPress: onPress, testID: "BottomMenu.Addons", id: ADDONS, active: index === ADDONS }, "ADDONS")));

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

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

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

@@ -1,5 +1,6 @@
-import React, { useState } from 'react';
-import { View, SafeAreaView } from 'react-native';
+import React from 'react';
+import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import GestureRecognizer from 'react-native-swipe-gestures';
 import Bar from './Bar';
 import VisibilityButton from './VisibilityButton';
@@ -7,8 +8,14 @@ const SWIPE_CONFIG = {
     velocityThreshold: 0.2,
     directionalOffsetThreshold: 80,
 };
-const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
-    const [isUIVisible, setIsUIVisible] = useState(initialUiVisible !== undefined ? initialUiVisible : true);
+const navStyle = {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+const Navigation = ({ tabOpen, onChangeTab, isUIVisible, setIsUIVisible }) => {
+    const insets = useSafeAreaInsets();
     const handleToggleUI = () => {
         setIsUIVisible((oldIsUIVisible) => !oldIsUIVisible);
     };
@@ -22,11 +29,9 @@ const Navigation = ({ tabOpen, onChangeTab, initialUiVisible }) => {
             onChangeTab(tabOpen - 1);
         }
     };
-    return (React.createElement(View, null,
-        React.createElement(SafeAreaView, null,
-            isUIVisible && (React.createElement(GestureRecognizer, { onSwipeLeft: handleSwipeLeft, onSwipeRight: handleSwipeRight, config: SWIPE_CONFIG },
-                React.createElement(Bar, { index: tabOpen, onPress: onChangeTab }))),
-            React.createElement(View, null,
-                React.createElement(VisibilityButton, { onPress: handleToggleUI })))));
+    return (React.createElement(View, { style: navStyle },
+        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 } })));
 };
 export default React.memo(Navigation);

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

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

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from '@emotion/native';
+import { View } from 'react-native';
 const Touchable = styled.TouchableOpacity({
     backgroundColor: 'transparent',
     position: 'absolute',
@@ -7,10 +8,38 @@ const Touchable = styled.TouchableOpacity({
     bottom: 12,
     zIndex: 100,
 });
-const HideIcon = styled.Text(({ theme }) => ({
-    fontSize: 14,
-    color: theme.buttonTextColor || '#999999',
+const HIDE_ICON_SIZE = 14;
+const HIDE_ICON_BORDER_WIDTH = 1;
+const Inner = styled.View(({ theme }) => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: theme.buttonTextColor || '#999999',
+    borderWidth: HIDE_ICON_BORDER_WIDTH * 2,
 }));
-const VisibilityButton = ({ onPress }) => (React.createElement(Touchable, { onPress: onPress, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
-    React.createElement(HideIcon, null, "\u25A1")));
+const Outer = styled.View({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    borderRadius: HIDE_ICON_BORDER_WIDTH,
+    overflow: 'hidden',
+    borderColor: 'white',
+    borderWidth: HIDE_ICON_BORDER_WIDTH,
+});
+const hideIconStyles = {
+    width: HIDE_ICON_SIZE,
+    height: HIDE_ICON_SIZE,
+    marginRight: 4,
+};
+const HideIcon = () => (React.createElement(View, { style: hideIconStyles },
+    React.createElement(Inner, null),
+    React.createElement(Outer, null)));
+const VisibilityButton = ({ onPress, style }) => (React.createElement(Touchable, { onPress: onPress, style: style, testID: "Storybook.OnDeviceUI.toggleUI", accessibilityLabel: "Storybook.OnDeviceUI.toggleUI", hitSlop: { top: 5, left: 5, bottom: 5, right: 5 } },
+    React.createElement(HideIcon, null)));
 export default React.memo(VisibilityButton);

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const GridIcon: () => JSX.Element;
+export declare const StoryIcon: ({ selected }: {
+    selected: boolean;
+}) => JSX.Element;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+export const GridIcon = () => {
+    return (React.createElement(Image, { source: {
+            uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAALdQTFRFAAAAIJ//Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Haf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqb9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqf9Hqj9Hqf9Hmz01QAAAD10Uk5TAAAEGjNefYqLXDUFAjSY0e79/9KZAghmyMkBQbz6vUIBBnD1cQcOo6Sp76qBePTHVOoC+RQTX4mCDZsBMmX5zDcAAAHcSURBVHic7ZrrcoIwEIVX8W5VpAiUaq33GyJqrfby/s9VacsCDojUJNNx9vzCTLLfZJdkHM4ChJTJSrl8oVj6s4qFckWqZiBed7V6Q24qV6op36uVVgxC042rAQh60LUIhPnY7rBCuOo8dZ9PGb3+gCXC1WA4CjPGE9YIV9NxiNHmwVCUWYAy4rIPV1PMmNnnxVCUoVf9LvOa+xp0f89HqCDzhbWMle3NsuPnWIt5MF7757zogfOxcqLOEGrtzVufm6U5Kz9iR3eHNgYObNWXc4svhQDs1C0GNTbHgZp/l6hnt5ECApqKQZu1471b93O1S1h6OQR2fsbqGcg28JeTtDIFBBwM28iCJON7lZSsVBAN3zFZCpRkkbgwDQQWWJQcvOK2LLYQCwPnoYDPS7aQJQYuwJ4/ZA8l/pASQQhCEIIQhCAEIQhBghB7nSj839xMnmtHQriJIAS5IYiQw3g7dxdBCEIQghCEIAQhyH+ECPmMLsQQKOMzY2vjgIHLYkwaIXaTEOMM+FuAIMbMhJYIW1aIwczaKj9EWuVCTH++7Quml8Qev0aMnl+qtxkfxnu4cYXLXiYhhpg2H4AP1g1L7a55ygDGrVdGZOuVKwFNZN/KSp/XtsPVpOpJ0C+2naE/XA0rpwAAAABJRU5ErkJggg==',
+        }, style: styles.navigatorIcon }));
+};
+const whiteOutline = 'data:image/png;base64,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';
+const blueOutline = 'data:image/png;base64,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';
+export const StoryIcon = ({ selected }) => {
+    return (React.createElement(Image, { source: {
+            uri: selected ? whiteOutline : blueOutline,
+        }, style: styles.navigatorIcon }));
+};
+const styles = StyleSheet.create({
+    navigatorIcon: {
+        width: 18,
+        height: 18,
+        marginRight: 5,
+    },
+});

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

@@ -1,32 +1,3 @@
-/// <reference types="react" />
-export declare const Header: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, {
-    selected: boolean;
-}, {
-    backgroundColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-}>;
-export declare const Name: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, {
-    selected: boolean;
-}, {
-    backgroundColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-}>;
-export declare const Label: import("@emotion/styled-base").StyledComponent<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, Pick<import("react-native").TextProps & import("react").RefAttributes<import("react-native").Text>, keyof import("react-native").TextProps>, {
-    backgroundColor: string;
-    headerTextColor: string;
-    labelColor: string;
-    borderColor: string;
-    previewBorderColor: string;
-    buttonTextColor: string;
-    buttonActiveTextColor: string;
-}>;
+export declare const Header: any;
+export declare const Name: any;
+export declare const Label: any;

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

@@ -1,12 +1,11 @@
 import styled from '@emotion/native';
 export const Header = styled.Text(({ theme }) => ({
-    fontSize: 20,
+    fontSize: 18,
     color: theme.headerTextColor || 'black',
 }), ({ selected }) => (selected ? { fontWeight: 'bold' } : {}));
-export const Name = styled.Text(({ theme }) => ({
+export const Name = styled.Text({
     fontSize: 16,
-    color: theme.headerTextColor || 'black',
-}), ({ selected }) => (selected ? { fontWeight: 'bold' } : {}));
+}, ({ selected, theme }) => selected ? { fontWeight: 'bold', color: 'white' } : { color: theme.headerTextColor || 'black' });
 export const Label = styled.Text(({ theme }) => ({
     fontSize: 18,
     color: theme.labelColor || 'black',

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

@@ -1,9 +1,13 @@
 export declare const theme: {
     backgroundColor: string;
+    storyListBackgroundColor: string;
+    listItemActiveColor: string;
+    listItemActiveTextColor: string;
     headerTextColor: string;
     labelColor: string;
     borderColor: string;
     previewBorderColor: string;
     buttonTextColor: string;
     buttonActiveTextColor: string;
+    secondaryLabelColor: string;
 };

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

@@ -1,9 +1,13 @@
 export const theme = {
     backgroundColor: 'white',
+    storyListBackgroundColor: '#f6f9fc',
+    listItemActiveColor: '#1ea7fd',
+    listItemActiveTextColor: 'white',
     headerTextColor: 'black',
     labelColor: 'black',
     borderColor: '#e6e6e6',
     previewBorderColor: '#b3b3b3',
     buttonTextColor: '#999999',
     buttonActiveTextColor: '#444444',
+    secondaryLabelColor: '#999999',
 };

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

@@ -1,7 +1,10 @@
-import { StoreItem, StoryStore } from '@storybook/client-api';
+/// <reference types="react" />
+import { StoryIndex } from '@storybook/client-api';
+import { StoryContext } from '@storybook/csf';
+import { ReactNativeFramework } from 'src/types/types-6.0';
 interface Props {
-    storyStore: StoryStore;
-    selectedStory: StoreItem;
+    storyIndex: StoryIndex;
+    selectedStoryContext: StoryContext<ReactNativeFramework>;
 }
-declare const StoryListView: ({ selectedStory, storyStore }: Props) => JSX.Element;
+declare const StoryListView: ({ selectedStoryContext, storyIndex }: Props) => JSX.Element;
 export default StoryListView;

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

@@ -2,22 +2,29 @@ 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 } from 'react-native';
+import { SectionList, StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { GridIcon, StoryIcon } from '../Shared/icons';
 import { Header, Name } from '../Shared/text';
 const SearchBar = styled.TextInput({
-    borderRadius: 4,
+    borderRadius: 16,
+    borderWidth: 2,
     fontSize: 16,
-    margin: 5,
-    padding: 5,
+    marginVertical: 4,
+    marginHorizontal: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 15,
 }, ({ theme }) => ({
-    backgroundColor: theme.borderColor,
+    borderColor: theme.borderColor,
     color: theme.buttonActiveTextColor,
 }));
 const HeaderContainer = styled.View({
     paddingVertical: 5,
     paddingHorizontal: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
 });
-const StoryListContainer = styled.View(Object.assign(Object.assign({ top: 0 }, StyleSheet.absoluteFillObject), { 
+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: {
@@ -27,34 +34,40 @@ const StoryListContainer = styled.View(Object.assign(Object.assign({ top: 0 }, S
     // shadowOpacity: 0.2,
     // shadowRadius: 1.41,
     // elevation: 2,
-    borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: 'lightgrey', backgroundColor: 'white' }));
-const SectionHeader = ({ title, selected }) => (React.createElement(HeaderContainer, { key: title },
-    React.createElement(Header, { selected: selected }, title)));
+    borderRightWidth: StyleSheet.hairlineWidth, borderRightColor: theme.borderColor, backgroundColor: theme.storyListBackgroundColor })));
+const SectionHeader = React.memo(({ title, selected }) => (React.createElement(HeaderContainer, { key: title },
+    React.createElement(GridIcon, null),
+    React.createElement(Header, { selected: selected }, title))));
 const ItemTouchable = styled.TouchableOpacity({
-    paddingHorizontal: 16,
-    paddingVertical: 5,
-});
-const ListItem = ({ kind, title, selected, onPress }) => (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}` },
-    React.createElement(Name, { selected: selected }, title)));
-const getStories = (storyStore) => {
-    if (!storyStore) {
+    padding: 5,
+    paddingLeft: 40,
+    flexDirection: 'row',
+    alignItems: 'center',
+}, ({ selected, theme }) => (selected ? { backgroundColor: theme.listItemActiveColor } : {}));
+const ListItem = React.memo(({ kind, title, selected, onPress }) => (React.createElement(ItemTouchable, { key: title, onPress: onPress, activeOpacity: 0.8, testID: `Storybook.ListItem.${kind}.${title}`, accessibilityLabel: `Storybook.ListItem.${title}`, selected: selected },
+    React.createElement(StoryIcon, { selected: selected }),
+    React.createElement(Name, { selected: selected }, title))), (prevProps, nextProps) => prevProps.selected === nextProps.selected);
+const getStories = (storyIndex) => {
+    if (!storyIndex) {
         return [];
     }
-    return Object.values(storyStore
-        .raw()
-        .reduce((acc, story) => {
-        acc[story.kind] = {
-            title: story.kind,
-            data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+    const groupedStories = Object.values(storyIndex.stories).reduce((acc, story) => {
+        var _a, _b;
+        acc[story.title] = {
+            title: story.title,
+            data: ((_b = (_a = acc[story.title]) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : []).concat(story),
         };
         return acc;
-    }, {}));
+    }, {});
+    return Object.values(groupedStories);
 };
 const styles = StyleSheet.create({
     sectionList: { flex: 1 },
 });
-const StoryListView = ({ selectedStory, storyStore }) => {
-    const originalData = useMemo(() => getStories(storyStore), [storyStore]);
+const tabBarHeight = 40;
+const StoryListView = ({ selectedStoryContext, storyIndex }) => {
+    const insets = useSafeAreaInsets();
+    const originalData = useMemo(() => getStories(storyIndex), [storyIndex]);
     const [data, setData] = useState(originalData);
     const handleChangeSearchText = (text) => {
         const query = text.trim();
@@ -79,8 +92,14 @@ const StoryListView = ({ selectedStory, storyStore }) => {
         const channel = addons.getChannel();
         channel.emit(Events.SET_CURRENT_STORY, { storyId });
     };
+    const safeStyle = { flex: 1, marginTop: insets.top, paddingBottom: insets.bottom + tabBarHeight };
     return (React.createElement(StoryListContainer, null,
-        React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", clearButtonMode: "while-editing", disableFullscreenUI: true, onChangeText: handleChangeSearchText, placeholder: "Filter", returnKeyType: "search" }),
-        React.createElement(SectionList, { style: styles.sectionList, testID: "Storybook.ListView", renderItem: ({ item }) => (React.createElement(ListItem, { title: item.name, kind: item.kind, selected: selectedStory && item.id === selectedStory.id, onPress: () => changeStory(item.id) })), renderSectionHeader: ({ section: { title } }) => (React.createElement(SectionHeader, { title: title, selected: selectedStory && title === selectedStory.kind })), keyExtractor: (item, index) => item.id + index, sections: data, stickySectionHeadersEnabled: false })));
+        React.createElement(View, { style: safeStyle },
+            React.createElement(SearchBar, { testID: "Storybook.ListView.SearchBar", clearButtonMode: "while-editing", disableFullscreenUI: true, onChangeText: handleChangeSearchText, placeholder: "Filter", returnKeyType: "search" }),
+            React.createElement(SectionList
+            // contentInset={{ bottom: insets.bottom, top: 0 }}
+            , { 
+                // contentInset={{ bottom: insets.bottom, top: 0 }}
+                style: styles.sectionList, testID: "Storybook.ListView", renderItem: ({ item }) => (React.createElement(ListItem, { title: item.name, kind: item.title, selected: selectedStoryContext && item.id === selectedStoryContext.id, onPress: () => changeStory(item.id) })), renderSectionHeader: ({ section: { title } }) => (React.createElement(SectionHeader, { title: title, selected: selectedStoryContext && title === selectedStoryContext.title })), keyExtractor: (item, index) => item.id + index, sections: data, stickySectionHeadersEnabled: false }))));
 };
 export default StoryListView;

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

@@ -1,6 +1,8 @@
-import { StoreItem } from '@storybook/client-api';
+/// <reference types="react" />
+import type { StoryContext } from '@storybook/csf';
+import { ReactNativeFramework } from 'src/types/types-6.0';
 interface Props {
-    story?: StoreItem;
+    context?: StoryContext<ReactNativeFramework>;
 }
-declare const StoryView: ({ story }: Props) => JSX.Element;
+declare const StoryView: ({ context }: Props) => JSX.Element;
 export default StoryView;

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

@@ -1,13 +1,4 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Text, View, StyleSheet } from 'react-native';
 const styles = StyleSheet.create({
     container: { flex: 1 },
@@ -19,20 +10,11 @@ const styles = StyleSheet.create({
         justifyContent: 'center',
     },
 });
-const StoryView = ({ story }) => {
-    const [context, setContext] = useState(undefined);
-    const id = story === null || story === void 0 ? void 0 : story.id;
-    useEffect(() => {
-        const loadContext = () => __awaiter(void 0, void 0, void 0, function* () {
-            if (story && story.unboundStoryFn && story.applyLoaders) {
-                setContext(yield story.applyLoaders());
-            }
-        });
-        loadContext();
-    }, [story, id]);
-    if (story && story.unboundStoryFn) {
-        const { unboundStoryFn } = story;
-        return (React.createElement(View, { key: id, testID: id, style: styles.container }, context && context.id === story.id ? unboundStoryFn(context) : null));
+const StoryView = ({ context }) => {
+    const id = context === null || context === void 0 ? void 0 : context.id;
+    if (context && context.unboundStoryFn) {
+        const { unboundStoryFn: StoryComponent } = context;
+        return (React.createElement(View, { key: id, testID: id, style: styles.container }, StoryComponent && React.createElement(StoryComponent, Object.assign({}, context))));
     }
     return (React.createElement(View, { style: styles.helpContainer },
         React.createElement(Text, null, "Please open navigator and select a story to preview.")));

package/dist/preview/executeLoadable.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { ModuleExports } from '@storybook/store';
+import { Loadable } from '../types/types';
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and returns a map of filename => module exports
+ *
+ * @param loadable Loadable
+ * @returns Map<Path, ModuleExports>
+ */
+export declare function executeLoadable(loadable: Loadable): Map<string, ModuleExports>;
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and compares it's output to the last time it was run (as stored on a node module)
+ *
+ * @param loadable Loadable
+ * @param m NodeModule
+ * @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
+ */
+export declare function executeLoadableForChanges(loadable: Loadable, m?: NodeModule): {
+    added: Map<string, ModuleExports>;
+    removed: Map<string, ModuleExports>;
+};

package/dist/preview/executeLoadable.js

@@ -0,0 +1,79 @@
+import { logger } from '@storybook/client-logger';
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and returns a map of filename => module exports
+ *
+ * @param loadable Loadable
+ * @returns Map<Path, ModuleExports>
+ */
+export function executeLoadable(loadable) {
+    let reqs = null;
+    // todo discuss / improve type check
+    if (Array.isArray(loadable)) {
+        reqs = loadable;
+    }
+    else if (loadable.keys) {
+        reqs = [loadable];
+    }
+    let exportsMap = new Map();
+    if (reqs) {
+        reqs.forEach((req) => {
+            req.keys().forEach((filename) => {
+                try {
+                    const fileExports = req(filename);
+                    exportsMap.set(typeof req.resolve === 'function' ? req.resolve(filename) : filename, fileExports);
+                }
+                catch (error) {
+                    const errorString = error.message && error.stack ? `${error.message}\n ${error.stack}` : error.toString();
+                    logger.error(`Unexpected error while loading ${filename}: ${errorString}`);
+                }
+            });
+        });
+    }
+    else {
+        const exported = loadable();
+        if (Array.isArray(exported) /*FIXME && exported.every((obj) => obj.default != null)*/) {
+            const csfExports = exported.filter((obj) => obj.default != null);
+            exportsMap = new Map(csfExports.map((fileExports, index) => [`exports-map-${index}`, fileExports]));
+        }
+        //  else if (exported) {
+        //   logger.warn(
+        //     `Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export. Received: ${JSON.stringify(
+        //       exported
+        //     )}`
+        //   );
+        // }
+    }
+    return exportsMap;
+}
+global.lastExportsMap = new Map();
+/**
+ * Executes a Loadable (function that returns exports or require context(s))
+ * and compares it's output to the last time it was run (as stored on a node module)
+ *
+ * @param loadable Loadable
+ * @param m NodeModule
+ * @returns { added: Map<Path, ModuleExports>, removed: Map<Path, ModuleExports> }
+ */
+export function executeLoadableForChanges(loadable, m) {
+    var _a;
+    if ((_a = m === null || m === void 0 ? void 0 : m.hot) === null || _a === void 0 ? void 0 : _a.accept) {
+        m.hot.accept();
+    }
+    const lastExportsMap = global.lastExportsMap;
+    const exportsMap = executeLoadable(loadable);
+    const added = new Map();
+    Array.from(exportsMap.entries())
+        // Ignore files that do not have a default export
+        .filter(([, fileExports]) => !!fileExports.default)
+        // Ignore exports that are equal (by reference) to last time, this means the file hasn't changed
+        .filter(([fileName, fileExports]) => lastExportsMap.get(fileName) !== fileExports)
+        .forEach(([fileName, fileExports]) => added.set(fileName, fileExports));
+    const removed = new Map();
+    Array.from(lastExportsMap.keys())
+        .filter((fileName) => !exportsMap.has(fileName))
+        .forEach((fileName) => removed.set(fileName, lastExportsMap.get(fileName)));
+    // Save the value for the dispose() call above
+    global.lastExportsMap = exportsMap;
+    return { added, removed };
+}