Icons work in web for example app (#483)

Author: iM-GeeKy

example/babel.config.js

@@ -14,7 +14,6 @@ module.exports = function (api) {
           alias: {
             // For development, we want to alias the library to the source
             [pak.name]: path.join(__dirname, '..', pak.source),
-            'react-native-vector-icons': '@expo/vector-icons',
           },
         },
       ],

example/package.json

@@ -1,29 +1,19 @@
 {
-  "name": "react-native-paper-dates-example",
-  "description": "Example app for react-native-paper-dates",
-  "version": "1.0.0",
-  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web",
-    "start": "expo start",
-    "test": "jest"
-  },
   "dependencies": {
-    "crypto-browserify": "^3.12.1",
-    "expo": "^53.0.10",
+    "@expo/vector-icons": "^14.0.0",
+    "expo": "^53.0.11",
+    "expo-crypto": "^14.1.5",
+    "expo-font": "^13.3.1",
     "expo-splash-screen": "~0.30.9",
     "expo-status-bar": "~2.2.3",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "react-native": "0.79.3",
     "react-native-paper": "^5.14.5",
     "react-native-safe-area-context": "^5.4.1",
-    "react-native-web": "~0.20.0",
-    "stream-browserify": "^3.0.0"
+    "react-native-web": "~0.20.0"
   },
+  "description": "Example app for react-native-paper-dates",
   "devDependencies": {
     "@babel/core": "^7.27.4",
     "@expo/webpack-config": "^19.0.1",
@@ -45,5 +35,16 @@
         "react-native-safe-area-context"
       ]
     }
-  }
+  },
+  "main": "index.js",
+  "name": "react-native-paper-dates-example",
+  "private": true,
+  "scripts": {
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "start": "expo start",
+    "test": "jest"
+  },
+  "version": "1.0.0"
 }

example/webpack.config.js

@@ -1,5 +1,6 @@
-const path = require('path')
 const createExpoWebpackConfigAsync = require('@expo/webpack-config')
+const path = require('path')
+
 const { resolver } = require('./metro.config')
 
 const root = path.resolve(__dirname, '..')
@@ -8,25 +9,41 @@ const node_modules = path.join(__dirname, 'node_modules')
 module.exports = async function (env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv)
 
-  config.module.rules.push({
-    test: /\.(js|jsx|ts|tsx)$/,
-    include: path.resolve(root, 'src'),
-    use: 'babel-loader',
-  })
+  config.entry = path.join(__dirname, 'index.js')
+
+  config.module.rules.push(
+    {
+      test: /\.(js|ts|tsx)$/,
+      include: path.resolve(root, 'src'),
+      use: 'babel-loader',
+    },
+    {
+      test: /\.ttf$/,
+      loader: 'url-loader', // or directly file-loader
+      include: path.resolve(
+        __dirname,
+        'node_modules/@react-native-vector-icons'
+      ),
+    }
+  )
+
+  config.ignoreWarnings = [
+    {
+      module: /Overlay\.js/,
+    },
+    () => true,
+  ]
 
   // We need to make sure that only one version is loaded for peerDependencies
   // So we alias them to the versions in example's node_modules
   Object.assign(config.resolve.alias, {
     ...resolver.extraNodeModules,
+    'crypto': require.resolve('expo-crypto'), //Fixes issue with crypto not being found on web
     'react-native-web': path.join(node_modules, 'react-native-web'),
+    '@react-native-vector-icons/material-design-icons': require.resolve(
+      '@expo/vector-icons/MaterialCommunityIcons'
+    ),
   })
 
-  // Add fallback for crypto and stream module
-  config.resolve.fallback = {
-    ...config.resolve.fallback,
-    crypto: require.resolve('crypto-browserify'),
-    stream: require.resolve('stream-browserify'),
-  }
-
   return config
 }