Upgrade Babel + React + React Native Web

Author: Minishlink

docs/.storybook/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['module:metro-react-native-babel-preset'],
+    plugins: ['react-native-web']
+  };
+};

docs/.storybook/webpack.config.js

@@ -4,12 +4,20 @@ const webpack = require('webpack');
 module.exports = (storybookBaseConfig, configType) => {
   const DEV = configType === 'DEVELOPMENT';
 
+  const libDirectory = path.resolve(__dirname, '../../');
+
   storybookBaseConfig.module.rules.push({
     test: /\.js$/,
-    exclude: /node_modules/,
+    include: [
+      path.resolve(libDirectory, 'src'),
+    ],
     use: {
       loader: 'babel-loader',
-      options: { cacheDirectory: true }
+      options: {
+        cacheDirectory: true,
+        presets: ['module:metro-react-native-babel-preset'],
+        plugins: ['react-native-web'],
+      }
     }
   });
 
@@ -20,8 +28,10 @@ module.exports = (storybookBaseConfig, configType) => {
     })
   );
 
+  storybookBaseConfig.resolve.extensions = ['.web.js', '.js', '.json', '.web.jsx', '.jsx'];
+
   storybookBaseConfig.resolve.alias = {
-    'react-native': 'react-native-web',
+    'react-native$': 'react-native-web',
     'lottie-react-native': path.join(__dirname, '../../src/')
   };
 

docs/package.json

@@ -5,7 +5,7 @@
     "release": "yarn build && git checkout gh-pages && rm -rf ../storybook && mv dist ../storybook && git add -A && git commit -m \"Storybook deploy\" && git push origin gh-pages && git checkout -"
   },
   "dependencies": {
-    "@storybook/addon-options": "^3.2.10",
-    "@storybook/react": "^3.1.9"
+    "@storybook/addon-options": "^4.1.11",
+    "@storybook/react": "^4.1.11"
   }
 }