diff --git a/app/react-native/src/manager/components/PreviewHelp.js b/app/react-native/src/manager/components/PreviewHelp.js
new file mode 100644
index 000000000000..d826add27b0c
--- /dev/null
+++ b/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 (
+
+
Welcome to STORYBOOK
+
+ This is a UI component dev environment for your app.
+
+
+ We've added some basic stories inside the
+ {' '}
+ storybook/stories
+ {' '}
+ 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.
+
+
+ To see your Storybook stories on the device, you should start your mobile app for the
+ {' '}
+ <platform>
+ {' '}
+ of your choice (typically ios or android).
+
+
+ For create-react-native-app apps:
+
+
+
+ For react-native init apps:
+
+
+
+ );
+ }
+}
+
+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;
diff --git a/app/react-native/src/manager/provider.js b/app/react-native/src/manager/provider.js
index 663a5f38c276..f1e541c3cf47 100644
--- a/app/react-native/src/manager/provider.js
+++ b/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 ||