fix(docs): resolve docs build and icon issues

- define `__DEV__` with webpack `DefinePlugin`
- standardize docs icons on `@react-native-vector-icons/material-design-icons`
- update docs examples and icon guidance
- alias `@react-native-vector-icons/get-image` to `false`
- flatten CSS nesting in `custom.css`
- add `isDynamicColorSupported = false` to the non-Android `DynamicTheme` fallback
- fix the `TypescaleKey` type re-export

Author: adrcotfas

docs/docs/guides/01-getting-started.mdx

@@ -49,16 +49,16 @@ Minimum requirements:
 
 Follow the [React Native Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/).
 
-If you're on a vanilla React Native project, you also need to install and link [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons).
+If you're on a vanilla React Native project, you also need to install [@react-native-vector-icons/material-design-icons](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons).
 
-Specifically `MaterialDesignIcons` icon pack needs to be included in the project, because some components use those internally (e.g. `AppBar.BackAction` on Android).
+Specifically, the `MaterialDesignIcons` icon pack needs to be included in the project because some components use those icons internally, such as `AppBar.BackAction` on Android.
 
 ```bash npm2yarn
 npm install @react-native-vector-icons/material-design-icons
 ```
 
 :::note
-The `react-native-vector-icons` library requires some additional setup steps for each platform. To ensure proper use of icon fonts, please follow their [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
+`@react-native-vector-icons/material-design-icons` may require some additional setup steps depending on platform. To ensure the icon font is configured correctly, please follow the upstream [installation guide](https://github.com/oblador/react-native-vector-icons?tab=readme-ov-file#setup).
 :::
 
 :::info

docs/docs/guides/03-icons.mdx

@@ -10,7 +10,7 @@ import IconsList from '@site/src/components/IconsList.tsx';
 
 ## Configuring icons
 
-Many of the components require the [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) library to render correctly. If you're using Expo, you don't need to do anything extra, but if it's a vanilla React Native project, you need to link the library as described in the [getting started guide](./01-getting-started.mdx).
+Many of the components render icon names using [`@react-native-vector-icons/material-design-icons`](https://github.com/oblador/react-native-vector-icons/tree/master/packages/material-design-icons). In Expo projects this usually works without extra setup. In vanilla React Native projects, install the package and complete any required platform setup as described in the [getting started guide](./01-getting-started.mdx).
 
 :::note
 If you opted out of vector icons support using [babel-plugin-optional-require](https://github.com/satya164/babel-plugin-optional-require), you won't be able to use icon names for the icon prop. Some components may not look correct without vector icons and might need extra configuration.

docs/plugins/docusaurus-react-native-plugin.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const webpack = require('webpack');
 
 module.exports = function () {
   return {
@@ -11,12 +12,15 @@ module.exports = function () {
             react: path.resolve('node_modules/react'),
             'react-native$': 'react-native-web',
             'react-native-paper': path.resolve('../src'),
-            'react-native-vector-icons/MaterialCommunityIcons': path.resolve(
-              'node_modules/@react-native-vector-icons/material-design-icons'
-            ),
+            '@react-native-vector-icons/get-image': false,
           },
           extensions: ['.web.js'],
         },
+        plugins: [
+          new webpack.DefinePlugin({
+            __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+          }),
+        ],
       };
     },
   };

docs/src/css/custom.css

@@ -128,8 +128,10 @@ html[data-theme='light'] .gallery-dark {
   height: 124px;
   align-items: center;
   text-align: center;
+}
 
-  @media (max-width: 680px) {
+@media (max-width: 680px) {
+  .icons-list-icon-container {
     width: 96px;
   }
 }
@@ -153,10 +155,10 @@ html[data-theme='light'] .gallery-dark {
   flex-wrap: wrap;
   justify-content: center;
   margin: 24px 0;
+}
 
-  &:last-child {
-    justify-content: flex-start;
-  }
+.icons-list-results:last-child {
+  justify-content: flex-start;
 }
 
 .icons-list-searchbar {
@@ -171,15 +173,15 @@ html[data-theme='light'] .gallery-dark {
   border-radius: 3px;
   transition: background-color 0.3s;
   outline: 0;
+}
 
-  &:focus,
-  &:hover {
-    background-color: #e7e7e7;
-  }
+.icons-list-searchbar:focus,
+.icons-list-searchbar:hover {
+  background-color: #e7e7e7;
+}
 
-  *:focus-visible {
-    outline: auto;
-  }
+.icons-list-searchbar:focus-visible {
+  outline: auto;
 }
 
 @font-face {

docs/src/data/extendedExamples/BottomNavigationBar.js

@@ -1,7 +1,7 @@
 const staticCode = `import { Text, View } from 'react-native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider, BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
 import {
   CommonActions,
   createStaticNavigation,
@@ -103,7 +103,7 @@ const dynamicCode = `import { Text, View } from 'react-native';
 import { NavigationContainer, CommonActions } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Provider, BottomNavigation } from 'react-native-paper';
-import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
 
 function HomeScreen() {
   return (

src/components/BottomNavigation/BottomNavigationBar.tsx

@@ -241,7 +241,7 @@ const Touchable = <Route extends BaseRoute>({
  * import { useState } from 'react';
  * import { View } from 'react-native';
  * import { BottomNavigation, Text, Provider } from 'react-native-paper';
- * import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+ * import MaterialCommunityIcons from '@react-native-vector-icons/material-design-icons';
  *
  * function HomeScreen() {
  *   return (

src/components/MaterialCommunityIcon.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ComponentProps } from 'react';
 import {
   ColorValue,
   Platform,
@@ -12,7 +11,7 @@ import {
 import { black } from '../theme/colors';
 
 export type IconProps = {
-  name: ComponentProps<typeof MaterialCommunityIcons>['name'];
+  name: string;
   color?: ColorValue;
   size: number;
   direction: 'rtl' | 'ltr';
@@ -41,48 +40,33 @@ export const accessibilityProps: AccessibilityProps =
         importantForAccessibility: 'no-hide-descendants',
       };
 
-/**
- * Loads the appropriate icon module based on available dependencies
- */
 const loadIconModule = () => {
   try {
     return require('@react-native-vector-icons/material-design-icons').default;
   } catch (e) {
-    try {
-      return require('@expo/vector-icons/MaterialCommunityIcons').default;
-    } catch (e) {
-      try {
-        return require('react-native-vector-icons/MaterialCommunityIcons')
-          .default;
-      } catch (e) {
-        return null;
-      }
-    }
+    return null;
   }
 };
 
 type IconModuleType = React.ComponentType<
-  React.ComponentProps<
-    | typeof import('@react-native-vector-icons/material-design-icons').default
-    | typeof import('react-native-vector-icons/MaterialCommunityIcons').default
+  Omit<
+    React.ComponentProps<
+      typeof import('@react-native-vector-icons/material-design-icons').default
+    >,
+    'name'
   > & {
+    name: string;
     color: ColorValue;
     pointerEvents?: ViewProps['pointerEvents'];
   }
 >;
 
 const IconModule = loadIconModule();
 
-/**
- * Fallback component displayed when no icon library is available
- */
 const FallbackIcon = ({ name, color, size, ...rest }: IconProps) => {
   console.warn(
-    `Tried to use the icon '${name}' in a component from 'react-native-paper', but none of the required icon libraries are installed.`,
-    `To fix this, please install one of the following:\n` +
-      `- @expo/vector-icons\n` +
-      `- @react-native-vector-icons/material-design-icons\n` +
-      `- react-native-vector-icons\n\n` +
+    `Tried to use the icon '${name}' in a component from 'react-native-paper', but the required icon library is not installed.`,
+    `To fix this, please install '@react-native-vector-icons/material-design-icons'.\n\n` +
       `You can also use another method to specify icon: https://callstack.github.io/react-native-paper/docs/guides/icons`
   );
 

src/index.tsx

@@ -137,4 +137,4 @@ export type { Props as SegmentedButtonsProps } from './components/SegmentedButto
 export type { Props as ListImageProps } from './components/List/ListImage';
 export type { Props as TooltipProps } from './components/Tooltip/Tooltip';
 
-export { TypescaleKey, type Theme, type Elevation } from './types';
+export { type TypescaleKey, type Theme, type Elevation } from './types';

src/theme/schemes/DynamicTheme.tsx

@@ -1,2 +1,4 @@
 export { DarkTheme as DynamicDarkTheme } from './DarkTheme';
 export { LightTheme as DynamicLightTheme } from './LightTheme';
+
+export const isDynamicColorSupported = false;