Show a help text on device

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 (
+      <View style={style.help}>
+        {this.props.url
+          ? <Text>Please open the Storybook UI ({this.props.url}) with a web browser and select a story for preview.</Text>
+          : <Text>Please open the Storybook UI with a web browser and select a story for preview.</Text>}
+      </View>
+    );
+  }
+
   render() {
     if (!this.state.storyFn) {
-      return null;
+      return this.renderHelp();
     }
     const { kind, story } = this.state.selection;
     const context = { kind, story };

src/preview/components/StoryView/style.js

@@ -2,4 +2,10 @@ export default {
   main: {
     flex: 1,
   },
+  help: {
+    flex: 1,
+    padding: 15,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 };

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 <StoryView events={this._events} />;
+      return <StoryView url={webUrl} events={this._events} />;
     }
   }