Render stories on mobile

Author: tanx

mobile/App.js

@@ -1,13 +1,2 @@
-import React from 'react';
-import FontLoader from './component/font-loader';
-import Welcome from '../src/view/welcome';
-
-export default class App extends React.Component {
-  render() {
-    return (
-      <FontLoader>
-        <Welcome />
-      </FontLoader>
-    );
-  }
-}
+import Storybook from './storybook';
+export default Storybook;

mobile/rn-cli.config.js

@@ -9,9 +9,11 @@ module.exports = {
       __dirname,
       'node_modules/react-native-svg'
     ),
+    '@storybook': path.resolve(__dirname, 'node_modules/@storybook'),
   },
   getProjectRoots: () => [
     path.resolve(__dirname),
     path.resolve(__dirname, '../src'),
+    path.resolve(__dirname, '../stories'),
   ],
 };

mobile/storybook/index.js

@@ -1,10 +1,31 @@
 import React, { Component } from 'react';
 import { AppRegistry } from 'react-native';
-import { getStorybookUI, configure } from '@storybook/react-native';
+import {
+  getStorybookUI,
+  configure,
+  addDecorator,
+} from '@storybook/react-native';
+import FontLoader from '../component/font-loader';
+
+addDecorator(story => <FontLoader>{story()}</FontLoader>);
 
 // import stories
 configure(() => {
-  require('./stories');
+  require('../../stories/component/button-story');
+  require('../../stories/component/card-story');
+  require('../../stories/component/field-story');
+  require('../../stories/component/header-story');
+  require('../../stories/component/icon-story');
+  require('../../stories/component/label-story');
+  require('../../stories/component/list-story');
+  require('../../stories/component/notification-story');
+  // require('../../stories/component/qrcode-story');
+  require('../../stories/component/spinner-story');
+  require('../../stories/component/text-story');
+  require('../../stories/color-story');
+  require('../../stories/font-story');
+  require('../../stories/layout-story');
+  // require('../../stories/screen-story');
 }, module);
 
 // This assumes that storybook is running on the same host as your RN packager,