diff --git a/src/preview/components/StoryView/index.js b/src/preview/components/StoryView/index.js
index 89454e6..df417ca 100644
--- a/src/preview/components/StoryView/index.js
+++ b/src/preview/components/StoryView/index.js
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
-import { View } from 'react-native';
+import { View, Text } from 'react-native';
import style from './style';
export default class StoryView extends Component {
@@ -13,9 +13,19 @@ export default class StoryView extends Component {
this.setState({storyFn, selection});
}
+ renderHelp() {
+ return (
+
+ {this.props.url
+ ? Please open the Storybook UI ({this.props.url}) with a web browser and select a story for preview.
+ : Please open the Storybook UI with a web browser and select a story for preview.}
+
+ );
+ }
+
render() {
if (!this.state.storyFn) {
- return null;
+ return this.renderHelp();
}
const { kind, story } = this.state.selection;
const context = { kind, story };
diff --git a/src/preview/components/StoryView/style.js b/src/preview/components/StoryView/style.js
index 61b48b7..b5fe466 100644
--- a/src/preview/components/StoryView/style.js
+++ b/src/preview/components/StoryView/style.js
@@ -2,4 +2,10 @@ export default {
main: {
flex: 1,
},
+ help: {
+ flex: 1,
+ padding: 15,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
};
diff --git a/src/preview/index.js b/src/preview/index.js
index 9421eac..db7b65a 100644
--- a/src/preview/index.js
+++ b/src/preview/index.js
@@ -54,11 +54,13 @@ export default class Preview {
getStorybookUI(params = {}) {
return () => {
+ let webUrl = null;
let channel = addons.getChannel();
if (!channel) {
const host = params.host || 'localhost';
const port = params.port || 7007;
const url = `ws://${host}:${port}`;
+ webUrl = `http://${host}:${port}`;
channel = createChannel({ url });
addons.setChannel(channel);
}
@@ -67,7 +69,7 @@ export default class Preview {
this._sendSetStories();
this._sendGetCurrentStory();
// finally return the preview component
- return ;
+ return ;
}
}