Merge pull request #1142 from matt-oakes/react-native-info

Add some help text into the react-native preview panel

app/react-native/src/manager/components/PreviewHelp.js

@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+
+class PreviewHelp extends Component {
+  render() {
+    return (
+      <div style={styles.main}>
+        <h1>Welcome to STORYBOOK</h1>
+        <p>
+          This is a UI component dev environment for your app.
+        </p>
+        <p>
+          We've added some basic stories inside the
+          {' '}
+          <span style={styles.code}>storybook/stories</span>
+          {' '}
+          directory.
+          {' '}
+          A story is a single state of one or more UI components. You can have as many stories as you want. Basically a story is like a visual test case.
+        </p>
+        <p>
+          To see your Storybook stories on the device, you should start your mobile app for the
+          {' '}
+          <span style={styles.code}>&lt;platform&gt;</span>
+          {' '}
+          of your choice (typically ios or android).
+        </p>
+        <p>
+          For <span style={styles.code}>create-react-native-app</span> apps:
+        </p>
+        <div style={styles.codeBlock}>
+          <pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
+        </div>
+        <p>
+          For <span style={styles.code}>react-native init</span> apps:
+        </p>
+        <div style={styles.codeBlock}>
+          <pre style={styles.instructionsCode}>npm run &lt;platform&gt;</pre>
+        </div>
+      </div>
+    );
+  }
+}
+
+const styles = {
+  main: {
+    margin: 15,
+    maxWidth: 600,
+    lineHeight: 1.4,
+    fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+  },
+
+  code: {
+    fontSize: 15,
+    fontWeight: 600,
+    padding: '2px 5px',
+    border: '1px solid #eae9e9',
+    borderRadius: 4,
+    backgroundColor: '#f3f2f2',
+    color: '#3a3a3a',
+  },
+
+  codeBlock: {
+    backgroundColor: '#f3f2f2',
+    padding: '1px 10px',
+    margin: '10px 0',
+  },
+};
+
+export default PreviewHelp;

app/react-native/src/manager/provider.js

@@ -3,6 +3,7 @@ import { Provider } from '@storybook/ui';
 import createChannel from '@storybook/channel-websocket';
 import addons from '@storybook/addons';
 import uuid from 'uuid';
+import PreviewHelp from './components/PreviewHelp';
 
 export default class ReactProvider extends Provider {
   constructor({ url: domain, options }) {
@@ -47,7 +48,7 @@ export default class ReactProvider extends Provider {
       );
     }
 
-    return innerPreview;
+    return innerPreview || <PreviewHelp />;
   }
 
   handleAPI(api) {