Merge branch 'main' into feat/TextField-v6

Author: wonderlul

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/docs/guides/05-react-native-web.md

@@ -6,7 +6,7 @@ title: Using on the Web
 
 React Native Paper supports web via [React Native for Web](https://necolas.github.io/react-native-web/), which lets you run React Native components in a browser using React DOM.
 
-Before continuing, make sure you have React Native Paper installed and configured by following the [Getting Started guide](getting-started.md).
+Before continuing, make sure you have React Native Paper installed and configured by following the [Getting Started guide](01-getting-started.mdx).
 
 ## Setting up web support with Expo
 

docs/docusaurus.config.js

@@ -37,8 +37,6 @@ const config = {
   tagline: 'Material Design for React Native',
   url,
   baseUrl,
-  onBrokenLinks: 'log',
-  onBrokenMarkdownLinks: 'log',
   favicon: 'images/favicon.ico',
 
   // GitHub pages deployment config.
@@ -54,6 +52,10 @@ const config = {
     locales: ['en'],
   },
 
+  onBrokenLinks: 'throw',
+  onDuplicateRoutes: 'throw',
+  onBrokenMarkdownLinks: 'throw',
+
   plugins: [
     [
       './component-docs-plugin',

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

@@ -12,9 +12,7 @@ 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'],
         },

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 (

example/src/Examples/SwitchExample.tsx

@@ -1,73 +1,103 @@
 import * as React from 'react';
-import { Platform, StyleSheet, View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import { Palette, Switch, Text, TouchableRipple } from 'react-native-paper';
+import { Switch, Text, useTheme } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
+const Row = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => (
+  <View style={styles.row}>
+    <Text>{label}</Text>
+    <View style={styles.right}>{children}</View>
+  </View>
+);
+
 const SwitchExample = () => {
-  const [valueNormal, setNormalValue] = React.useState<boolean>(true);
-  const [valueCustom, setCustomValue] = React.useState<boolean>(true);
+  const theme = useTheme();
+  const [defaultOn, setDefaultOn] = React.useState(true);
+  const [defaultCheckedIconOn, setDefaultCheckedIconOn] = React.useState(true);
+  const [defaultIconOn, setDefaultIconOn] = React.useState(true);
+  const [customOn, setCustomOn] = React.useState(true);
+  const [customIconOn, setCustomIconOn] = React.useState(true);
+  const [disableAll, setDisableAll] = React.useState(false);
 
-  const switchValueNormalLabel = `switch ${
-    valueNormal === true ? 'on' : 'off'
-  }`;
-  const switchValueCustomlLabel = `switch ${
-    valueCustom === true ? 'on' : 'off'
-  }`;
+  const tertiaryTheme = React.useMemo(
+    () => ({
+      colors: {
+        primary: theme.colors.tertiary,
+        onPrimary: theme.colors.onTertiary,
+        primaryContainer: theme.colors.tertiaryContainer,
+        secondary: theme.colors.tertiary,
+      },
+    }),
+    [theme]
+  );
 
-  return Platform.OS === 'android' ? (
+  return (
     <ScreenWrapper style={styles.container}>
-      <TouchableRipple onPress={() => setNormalValue(!valueNormal)}>
-        <View style={styles.row}>
-          <Text>Normal {switchValueNormalLabel}</Text>
-          <View pointerEvents="none">
-            <Switch value={valueNormal} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <TouchableRipple onPress={() => setCustomValue(!valueCustom)}>
-        <View style={styles.row}>
-          <Text>Custom {switchValueCustomlLabel}</Text>
-          <View pointerEvents="none">
-            <Switch value={valueCustom} color={Palette.tertiary50} />
-          </View>
-        </View>
-      </TouchableRipple>
-      <View style={styles.row}>
-        <Text>Switch on (disabled)</Text>
-        <Switch disabled value />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch off (disabled)</Text>
-        <Switch disabled />
-      </View>
-    </ScreenWrapper>
-  ) : (
-    <ScreenWrapper style={styles.container}>
-      <View style={styles.row}>
-        <Text>Normal {switchValueNormalLabel}</Text>
+      <Row label="Default">
+        <Switch
+          value={defaultOn}
+          onValueChange={setDefaultOn}
+          disabled={disableAll}
+        />
+      </Row>
+
+      <Row label="Default with icon when on">
+        <Switch
+          value={defaultCheckedIconOn}
+          onValueChange={setDefaultCheckedIconOn}
+          checkedIcon="check"
+          disabled={disableAll}
+        />
+      </Row>
+
+      <Row label="Default with icon">
         <Switch
-          value={valueNormal}
-          onValueChange={() => setNormalValue(!valueNormal)}
+          value={defaultIconOn}
+          onValueChange={setDefaultIconOn}
+          checkedIcon="check"
+          uncheckedIcon="close"
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <Text>Custom {switchValueCustomlLabel}</Text>
+      </Row>
+
+      <Row label="Custom (tertiary theme)">
         <Switch
-          value={valueCustom}
-          onValueChange={() => setCustomValue(!valueCustom)}
-          color={Palette.tertiary50}
+          value={customOn}
+          onValueChange={setCustomOn}
+          theme={tertiaryTheme}
+          disabled={disableAll}
         />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch on (disabled)</Text>
-        <Switch value disabled />
-      </View>
-      <View style={styles.row}>
-        <Text>Switch off (disabled)</Text>
-        <Switch value={false} disabled />
-      </View>
+      </Row>
+
+      <Row label="Custom with icon">
+        <Switch
+          value={customIconOn}
+          onValueChange={setCustomIconOn}
+          checkedIcon="white-balance-sunny"
+          uncheckedIcon="moon-waning-crescent"
+          theme={tertiaryTheme}
+          disabled={disableAll}
+        />
+      </Row>
+
+      <View
+        style={[
+          styles.separator,
+          { backgroundColor: theme.colors.outlineVariant },
+        ]}
+      />
+
+      <Row label="Disable all switches">
+        <Switch value={disableAll} onValueChange={setDisableAll} />
+      </Row>
     </ScreenWrapper>
   );
 };
@@ -85,6 +115,16 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     paddingHorizontal: 16,
   },
+  right: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  separator: {
+    height: 1,
+    marginHorizontal: 16,
+    marginVertical: 16,
+  },
 });
 
 export default SwitchExample;

jest/testSetup.js

@@ -8,6 +8,10 @@ jest.mock('react-native-worklets', () =>
   require('react-native-worklets/lib/module/mock')
 );
 
+jest.mock('react-native-reanimated', () =>
+  require('react-native-reanimated/mock')
+);
+
 jest.mock('@react-native-vector-icons/material-design-icons', () => {
   const React = require('react');
   const { Text } = require('react-native');

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 (