fix: make it possible to run the example on web

react-navigation · Oct 10, 2019 · 7a901af · 7a901af
1 parent ba3f718
commit 7a901af
Show file tree

Hide file tree

Showing 10 changed files with 186 additions and 61 deletions.
diff --git a/packages/bottom-tabs/README.md b/packages/bottom-tabs/README.md
@@ -49,15 +49,15 @@ export default function App() {
         component={Article}
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: 'file-document-box',
         }}
       />
       <BottomTabs.Screen
         name="chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: 'message-reply',
         }}
       />
       <BottomTabs.Screen

diff --git a/packages/example/package.json b/packages/example/package.json
@@ -11,6 +11,7 @@
   },
   "scripts": {
     "start": "expo start",
+    "web": "expo start --web",
     "native": "react-native start",
     "android": "react-native run-android",
     "ios": "react-native run-ios",
@@ -32,16 +33,18 @@
     "react-native-screens": "2.0.0-alpha.3",
     "react-native-tab-view": "2.10.0",
     "react-native-unimodules": "^0.7.0-rc.1",
+    "react-native-web": "^0.11.7",
     "scheduler": "^0.16.1",
     "shortid": "^2.2.15",
     "use-subscription": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
+    "@expo/webpack-config": "^0.7.12",
     "@types/react": "^16.9.4",
-    "@types/react-native": "^0.60.17",
+    "@types/react-native": "^0.60.19",
     "babel-preset-expo": "^7.0.0",
-    "expo-cli": "^3.1.2",
+    "expo-cli": "^3.3.0",
     "jetifier": "^1.6.4",
     "typescript": "^3.6.3"
   }

diff --git a/packages/example/src/Screens/BottomTabs.tsx b/packages/example/src/Screens/BottomTabs.tsx
@@ -1,8 +1,7 @@
 import * as React from 'react';
-import { MaterialIcons } from '@expo/vector-icons';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-// @ts-ignore
-import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
+import TouchableBounce from '../Shared/TouchableBounce';
 import Albums from '../Shared/Albums';
 import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
@@ -15,7 +14,11 @@ const getTabBarIcon = (name: string) => ({
   tintColor: string;
   horizontal: boolean;
 }) => (
-  <MaterialIcons name={name} color={tintColor} size={horizontal ? 17 : 24} />
+  <MaterialCommunityIcons
+    name={name}
+    color={tintColor}
+    size={horizontal ? 17 : 24}
+  />
 );
 
 type BottomTabParams = {
@@ -34,7 +37,7 @@ export default function BottomTabsScreen() {
         name="article"
         options={{
           title: 'Article',
-          tabBarIcon: getTabBarIcon('chrome-reader-mode'),
+          tabBarIcon: getTabBarIcon('file-document-box'),
           tabBarButtonComponent: TouchableBounce,
         }}
       >
@@ -47,7 +50,7 @@ export default function BottomTabsScreen() {
         component={Chat}
         options={{
           title: 'Chat',
-          tabBarIcon: getTabBarIcon('chat-bubble'),
+          tabBarIcon: getTabBarIcon('message-reply'),
           tabBarButtonComponent: TouchableBounce,
         }}
       />
@@ -65,7 +68,7 @@ export default function BottomTabsScreen() {
         component={Albums}
         options={{
           title: 'Albums',
-          tabBarIcon: getTabBarIcon('photo-album'),
+          tabBarIcon: getTabBarIcon('image-album'),
           tabBarButtonComponent: TouchableBounce,
         }}
       />

diff --git a/packages/example/src/Screens/MaterialBottomTabs.tsx b/packages/example/src/Screens/MaterialBottomTabs.tsx
@@ -24,7 +24,7 @@ export default function MaterialBottomTabsScreen() {
         name="article"
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: 'file-document-box',
           tabBarColor: '#C9E7F8',
         }}
       >
@@ -37,7 +37,7 @@ export default function MaterialBottomTabsScreen() {
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: 'message-reply',
           tabBarColor: '#9FD5C9',
           tabBarBadge: true,
         }}
@@ -56,7 +56,7 @@ export default function MaterialBottomTabsScreen() {
         component={Albums}
         options={{
           tabBarLabel: 'Albums',
-          tabBarIcon: 'photo-album',
+          tabBarIcon: 'image-album',
           tabBarColor: '#FAD4D6',
         }}
       />

diff --git a/packages/example/src/Shared/TouchableBounce.native.tsx b/packages/example/src/Shared/TouchableBounce.native.tsx
@@ -0,0 +1,4 @@
+// @ts-ignore
+import TouchableBounce from 'react-native/Libraries/Components/Touchable/TouchableBounce';
+
+export default TouchableBounce;
diff --git a/packages/example/src/Shared/TouchableBounce.tsx b/packages/example/src/Shared/TouchableBounce.tsx
@@ -0,0 +1,3 @@
+import { TouchableOpacity } from 'react-native';
+
+export default TouchableOpacity;
diff --git a/packages/example/webpack.config.js b/packages/example/webpack.config.js
@@ -0,0 +1,50 @@
+const path = require('path');
+const fs = require('fs');
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+// eslint-disable-next-line import/no-extraneous-dependencies
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+
+module.exports = async function(env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv);
+
+  config.module.rules.push({
+    test: /\.(js|ts|tsx)$/,
+    include: /packages\/.+/,
+    use: 'babel-loader',
+  });
+
+  config.resolve.plugins = config.resolve.plugins.filter(
+    p => !(p instanceof ModuleScopePlugin)
+  );
+
+  config.resolve.alias['react'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react'
+  );
+  config.resolve.alias['react-native'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react-native-web'
+  );
+  config.resolve.alias['react-native-web'] = path.resolve(
+    __dirname,
+    'node_modules',
+    'react-native-web'
+  );
+
+  config.resolve.alias[
+    '@expo/vector-icons/MaterialCommunityIcons'
+  ] = require.resolve('@expo/vector-icons/MaterialCommunityIcons');
+
+  fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
+    config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
+      __dirname,
+      '..',
+      name,
+      'src'
+    );
+  });
+
+  return config;
+};
diff --git a/packages/material-bottom-tabs/README.md b/packages/material-bottom-tabs/README.md
@@ -27,15 +27,15 @@ export default function App() {
         component={Article}
         options={{
           tabBarLabel: 'Article',
-          tabBarIcon: 'chrome-reader-mode',
+          tabBarIcon: 'file-document-box',
         }}
       />
       <MaterialBottomTabs.Screen
         name="chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
-          tabBarIcon: 'chat-bubble',
+          tabBarIcon: 'message-reply',
         }}
       />
       <MaterialBottomTabs.Screen
@@ -51,7 +51,7 @@ export default function App() {
         component={Albums}
         options={{
           tabBarLabel: 'Albums',
-          tabBarIcon: 'photo-album',
+          tabBarIcon: 'image-album',
         }}
       />
     </MaterialBottomTabs.Navigator>

diff --git a/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx b/packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialIcons';
+import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import { Route } from '@react-navigation/core';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';