feat: make react-native-vector-icons optional (#8936)

Referenced from 4b26429c49/src/components/MaterialCommunityIcon.tsx (L14)

https://callstack.github.io/react-native-paper/getting-started.html
> To get smaller bundle size by excluding modules you don't use, you can use our optional babel plugin. The plugin automatically rewrites the import statements so that only the modules you use are imported instead of the whole library. Add react-native-paper/babel to the plugins section in your babel.config.js for production environment. It should look like this:
> ```
> module.exports = {
>   presets: ['module:metro-react-native-babel-preset'],
>   env: {
>     production: {
>       plugins: ['react-native-paper/babel'],
>     },
>   },
> };
> ```
> If you created your project using Expo, it'll look something like this:
> ```
> module.exports = function(api) {
>   api.cache(true);
>   return {
>     presets: ['babel-preset-expo'],
>     env: {
>       production: {
>         plugins: ['react-native-paper/babel'],
>       },
>     },
>   };
> };
> ```

Closes #8821

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { StyleSheet, Platform } from 'react-native';
 import { BottomNavigation, DefaultTheme, DarkTheme } from 'react-native-paper';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import {
   NavigationHelpersContext,
   Route,
@@ -26,6 +25,48 @@ type Props = MaterialBottomTabNavigationConfig & {
 
 type Scene = { route: { key: string } };
 
+// Optionally require vector-icons referenced from react-native-paper:
+// https://github.com/callstack/react-native-paper/blob/4b26429c49053eaa4c3e0fae208639e01093fa87/src/components/MaterialCommunityIcon.tsx#L14
+let MaterialCommunityIcons: any;
+
+try {
+  // Optionally require vector-icons
+  MaterialCommunityIcons = require('react-native-vector-icons/MaterialCommunityIcons')
+    .default;
+} catch (e) {
+  // @ts-expect-error
+  if (global.__expo?.Icon?.MaterialCommunityIcons) {
+    // Snack doesn't properly bundle vector icons from sub-path
+    // Use icons from the __expo global if available
+    // @ts-expect-error
+    MaterialCommunityIcons = global.__expo.Icon.MaterialCommunityIcons;
+  } else {
+    let isErrorLogged = false;
+
+    // Fallback component for icons
+    MaterialCommunityIcons = () => {
+      if (!isErrorLogged) {
+        if (
+          !/(Cannot find module|Module not found|Cannot resolve module)/.test(
+            e.message
+          )
+        ) {
+          console.error(e);
+        }
+
+        console.warn(
+          `Tried to use the icon '${name}' in a component from '@react-navigation/material-bottom-tabs', but 'react-native-vector-icons' could not be loaded.`,
+          `To remove this warning, try installing 'react-native-vector-icons' or use another method.`
+        );
+
+        isErrorLogged = true;
+      }
+
+      return null;
+    };
+  }
+}
+
 function MaterialBottomTabViewInner({
   state,
   navigation,