@storybook/react-native 6.0.1-beta.1 → 6.0.1-beta.11

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 }) => { var _a; return (selected ? { backgroundColor: (_a = theme === null || theme === void 0 ? void 0 : theme.listItemActiveColor) !== null && _a !== void 0 ? _a : '#1ea7fd' } : {}); });
+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 };
+}

package/dist/preview/rn-host-detect.d.ts

@@ -0,0 +1 @@
+export default function getHost(hostname: any): any;

package/dist/preview/rn-host-detect.js

@@ -0,0 +1,61 @@
+'use strict';
+/*
+ * It only for Debug Remotely mode for Android
+ * When __DEV__ === false, we can't use window.require('NativeModules')
+ */
+function getByRemoteConfig(hostname) {
+    var _a;
+    var remoteModuleConfig = (_a = window === null || window === void 0 ? void 0 : window.__fbBatchedBridgeConfig) === null || _a === void 0 ? void 0 : _a.remoteModuleConfig;
+    if (!Array.isArray(remoteModuleConfig) ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return { hostname: hostname, passed: false };
+    }
+    var constants = (remoteModuleConfig.find(getConstants) || [])[1];
+    if (constants) {
+        var serverHost = constants.ServerHost || hostname;
+        return { hostname: serverHost.split(':')[0], passed: true };
+    }
+    return { hostname: hostname, passed: false };
+}
+function getConstants(config) {
+    return config && (config[0] === 'AndroidConstants' || config[0] === 'PlatformConstants');
+}
+function getByRNRequirePolyfill(hostname) {
+    var NativeModules;
+    var PlatformConstants;
+    var AndroidConstants;
+    if (typeof window === 'undefined' ||
+        !window.__DEV__ ||
+        typeof window.require !== 'function' ||
+        // RN >= 0.56
+        // TODO: Get NativeModules for RN >= 0.56
+        window.require.name === 'metroRequire') {
+        return hostname;
+    }
+    NativeModules = window.require('NativeModules');
+    if (!NativeModules || (!NativeModules.PlatformConstants && !NativeModules.AndroidConstants)) {
+        return hostname;
+    }
+    PlatformConstants = NativeModules.PlatformConstants;
+    AndroidConstants = NativeModules.AndroidConstants;
+    var serverHost = (PlatformConstants ? PlatformConstants.ServerHost : AndroidConstants.ServerHost) || hostname;
+    return serverHost.split(':')[0];
+}
+/*
+ * Get React Native server IP if hostname is `localhost`
+ * On Android emulator, the IP of host is `10.0.2.2` (Genymotion: 10.0.3.2)
+ */
+export default function getHost(hostname) {
+    // Check if it in React Native environment
+    if (typeof __fbBatchedBridge !== 'object' ||
+        (hostname !== 'localhost' && hostname !== '127.0.0.1')) {
+        return hostname;
+    }
+    var result = getByRemoteConfig(hostname);
+    // Leave if get hostname by remote config successful
+    if (result.passed) {
+        return result.hostname;
+    }
+    // Otherwise, use RN's require polyfill
+    return getByRNRequirePolyfill(hostname);
+}

package/dist/preview/start.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="webpack-env" />
+/// <reference types="node" />
+import { Loadable } from '@storybook/core-client';
+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;
+    forceReRender: () => void;
+    clientApi: ClientApi<ReactNativeFramework>;
+    preview: PreviewWeb<ReactNativeFramework>;
+    configure(loadable: Loadable, m: NodeModule): void;
+};

package/dist/preview/start.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import Channel from '@storybook/channels';
+import { addons } from '@storybook/addons';
+import Events from '@storybook/core-events';
+import { PreviewWeb } from '@storybook/preview-web';
+import { ClientApi, setGlobalRender } from '@storybook/client-api';
+import { View } from './View';
+import { executeLoadableForChanges } from './executeLoadable';
+export const render = (args, context) => {
+    const { id, component: Component } = context;
+    if (!Component) {
+        throw new Error(`Unable to render story ${id} as the component annotation is missing from the default export`);
+    }
+    return React.createElement(Component, Object.assign({}, args));
+};
+export function start() {
+    // TODO: can we get settings from main.js and set the channel here?
+    const channel = new Channel({ async: true });
+    addons.setChannel(channel);
+    const clientApi = new ClientApi();
+    const previewView = {
+        prepareForStory: () => null,
+        showNoPreview: () => { },
+        showPreparingStory: () => { },
+        applyLayout: () => { },
+        showErrorDisplay: (e) => {
+            console.log(e);
+        },
+        showStoryDuringRender: () => { },
+        showMain: () => { },
+        checkIfLayoutExists: () => { },
+        showStory: () => { },
+        docsRoot: null,
+        prepareForDocs: () => null,
+        showDocs: () => { },
+        preparingTimeout: setTimeout(() => { }, 0),
+        showMode: () => { },
+        showPreparingDocs: () => { },
+        storyRoot: null,
+        testing: false,
+    };
+    const urlStore = {
+        selection: { storyId: '', viewMode: 'story' },
+        selectionSpecifier: null,
+        setQueryParams: () => { },
+        setSelection: (selection) => {
+            preview.urlStore.selection = selection;
+        },
+    };
+    const preview = new PreviewWeb(urlStore, previewView);
+    clientApi.storyStore = preview.storyStore;
+    setGlobalRender(render);
+    let initialized = false;
+    function onStoriesChanged() {
+        const storyIndex = clientApi.getStoryIndex();
+        preview.onStoriesChanged({ storyIndex });
+        view._storyIndex = storyIndex;
+    }
+    const view = new View(preview);
+    return {
+        view,
+        forceReRender: () => channel.emit(Events.FORCE_RE_RENDER),
+        clientApi,
+        preview,
+        // This gets called each time the user calls configure (i.e. once per HMR)
+        // The first time, it constructs thecurrentSelection preview, subsequently it updates it
+        configure(loadable, m) {
+            clientApi.addParameters({ framework: 'react-native' });
+            // We need to run the `executeLoadableForChanges` function *inside* the `getProjectAnnotations
+            // function in case it throws. So we also need to process its output there also
+            const getProjectAnnotations = () => {
+                const { added, removed } = executeLoadableForChanges(loadable, m);
+                Array.from(added.entries()).forEach(([fileName, fileExports]) => clientApi.facade.addStoriesFromExports(fileName, fileExports));
+                Array.from(removed.entries()).forEach(([fileName]) => clientApi.facade.clearFilenameExports(fileName));
+                return Object.assign(Object.assign({}, clientApi.facade.projectAnnotations), { renderToDOM: (context) => {
+                        view._setStory(context.storyContext);
+                    } });
+            };
+            const importFn = (path) => clientApi.importFn(path);
+            if (!initialized) {
+                preview.initialize({
+                    getStoryIndex: () => {
+                        const index = clientApi.getStoryIndex();
+                        view._storyIndex = index;
+                        return index;
+                    },
+                    importFn,
+                    getProjectAnnotations,
+                });
+                initialized = true;
+            }
+            else {
+                // TODO -- why don't we care about the new annotations?
+                getProjectAnnotations();
+                onStoriesChanged();
+            }
+        },
+    };
+}