feat: add DynamicTheme using PlatformColor (#4901)

* chore: remove md2 support

* fix: update colors as per material-components color tokens

* see https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/color/res/values/tokens.xml

* fix: update the color schema for LightTheme and DarkTheme

* see: https://m3.material.io/styles/color/roles

* feat: add DynamicTheme

* Known limitation: surface/container roles on API 31-33 use
* @color/m3_ref_palette_dynamic_neutral_variant* (MCL resources that require a
* native DynamicColors setup). No @android:color/ equivalent exists for those
* slots. Reference palette values are used as fallback on API 31-33.

* refactor: remove usage of expo-material3-theme

* refactor: rename "device colors" to "Dynamic Theme"

* feat: update Colors and stateOpacity tokens
for PlatformColor compatibility

* surfaceDisabled, onSurfaceDisabled and backdrop which were not part of the MD standard were removed
* the reference theme elevation colors now use the correct neutral tones; see https://m3.material.io/blog/tone-based-surface-color-m3
* replace usage of "alpha" with opacity or surface colors
* remove disabled FAB prop

Author: adrcotfas

docs/docs/guides/02-theming.mdx

@@ -227,31 +227,26 @@ export default function Main() {
 
 ### Sync dynamic colors with system colors
 
-Using [`pchmn/expo-material3-theme`](https://github.com/pchmn/expo-material3-theme) library you can easily access the Material 3 system colors from Android 12+ devices and seamlessly integrate them into your dynamic theme. Any changes made by the user to the system colors will be automatically reflected in the theme.
+React Native Paper provides built-in support for Android dynamic colors through `DynamicLightTheme` and `DynamicDarkTheme`. These themes use React Native's `PlatformColor` API to map all Material Design 3 color roles to Android system colors, so any changes the user makes to their system palette are automatically reflected in the app.
 
 :::info
-In case of incompatible devices, the library will revert to a default theme.
+Dynamic colors require Android 12 (API 31+). On older Android versions and all other platforms, these themes fall back to the default `LightTheme` / `DarkTheme`.
 :::
 
-To get started, follow the [installation instructions](https://github.com/pchmn/expo-material3-theme#installation) and check the following code:
-
 ```tsx
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
 import { useColorScheme } from 'react-native';
-import { MD3DarkTheme, MD3LightTheme, PaperProvider } from 'react-native-paper';
+import {
+  DynamicDarkTheme,
+  DynamicLightTheme,
+  PaperProvider,
+} from 'react-native-paper';
 import App from './src/App';
 
 export default function Main() {
-  const colorScheme = useColorScheme();
-  const { theme } = useMaterial3Theme();
-
-  const paperTheme =
-    colorScheme === 'dark'
-      ? { ...MD3DarkTheme, colors: theme.dark }
-      : { ...MD3LightTheme, colors: theme.light };
+  const isDarkMode = useColorScheme() === 'dark';
 
   return (
-    <PaperProvider theme={paperTheme}>
+    <PaperProvider theme={isDarkMode ? DynamicDarkTheme : DynamicLightTheme}>
       <App />
     </PaperProvider>
   );

docs/docs/guides/06-recommended-libraries.md

@@ -33,8 +33,4 @@ Material Design themed [date picker](https://material.io/components/date-pickers
 
 ## Time Picker
 [web-ridge/react-native-paper-dates](https://github.com/web-ridge/react-native-paper-dates)
-Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout) 
-
-## System Colors
-[pchmn/expo-material3-theme](https://github.com/pchmn/expo-material3-theme)
-Retrieve Material 3 system colors from Android 12+ devices
+Material Design themed [time picker](https://material.io/components/time-pickers), maintained by [@RichardLindhout](https://twitter.com/RichardLindhout)

example/package.json

@@ -16,7 +16,6 @@
   "dependencies": {
     "@expo/vector-icons": "^15.0.2",
     "@expo/webpack-config": "~19.0.1",
-    "@pchmn/expo-material3-theme": "^1.3.2",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-masked-view/masked-view": "0.3.2",
     "@react-navigation/bottom-tabs": "^7.3.10",

example/src/DrawerItems.tsx

@@ -16,7 +16,7 @@ import {
   Portal,
 } from 'react-native-paper';
 
-import { deviceColorsSupported, isWeb } from '../utils';
+import { dynamicThemeSupported, isWeb } from '../utils';
 import { useExampleTheme } from './hooks/useExampleTheme';
 import { PreferencesContext } from './PreferencesContext';
 
@@ -103,7 +103,7 @@ function DrawerItems() {
   if (!preferences) throw new Error('PreferencesContext not provided');
 
   const {
-    toggleShouldUseDeviceColors,
+    toggleShouldUseDynamicTheme,
     toggleTheme,
     toggleRtl: toggleRTL,
     toggleCollapsed,
@@ -114,7 +114,7 @@ function DrawerItems() {
     collapsed,
     rtl: isRTL,
     theme: { dark: isDarkTheme },
-    shouldUseDeviceColors,
+    shouldUseDynamicTheme,
   } = preferences;
 
   const _handleToggleRTL = () => {
@@ -181,12 +181,12 @@ function DrawerItems() {
           </Drawer.Section>
 
           <Drawer.Section title="Preferences">
-            {deviceColorsSupported ? (
-              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
-                <View style={[styles.preference, styles.v3Preference]}>
-                  <Text variant="labelLarge">Use device colors *</Text>
+            {dynamicThemeSupported ? (
+              <TouchableRipple onPress={toggleShouldUseDynamicTheme}>
+                <View style={(styles.preference, styles.v3Preference)}>
+                  <Text variant="labelLarge">Use Dynamic Theme</Text>
                   <View pointerEvents="none">
-                    <Switch value={shouldUseDeviceColors} />
+                    <Switch value={shouldUseDynamicTheme} />
                   </View>
                 </View>
               </TouchableRipple>

example/src/Examples/AppbarExample.tsx

@@ -182,7 +182,7 @@ const AppbarExample = ({ navigation }: Props) => {
             height: height + bottom,
           },
           {
-            backgroundColor: theme.colors.elevation.level2,
+            backgroundColor: theme.colors.surfaceContainerHigh,
           },
         ]}
         safeAreaInsets={{ bottom, left, right }}

example/src/Examples/FABExample.tsx

@@ -95,14 +95,6 @@ const FABExample = () => {
           onPress={() => {}}
           visible={visible}
         />
-        <FAB
-          icon="cancel"
-          label="Disabled FAB"
-          style={styles.fab}
-          onPress={() => {}}
-          visible={visible}
-          disabled
-        />
         <FAB
           icon="format-letter-case"
           label="Mixed case"

example/src/PreferencesContext.tsx

@@ -8,11 +8,11 @@ export const PreferencesContext = React.createContext<{
   toggleCollapsed: () => void;
   toggleCustomFont: () => void;
   toggleRippleEffect: () => void;
-  toggleShouldUseDeviceColors?: () => void;
+  toggleShouldUseDynamicTheme?: () => void;
   theme: MD3Theme;
   rtl: boolean;
   collapsed: boolean;
   customFontLoaded: boolean;
   rippleEffectEnabled: boolean;
-  shouldUseDeviceColors?: boolean;
+  shouldUseDynamicTheme?: boolean;
 } | null>(null);

example/src/index.native.tsx

@@ -1,21 +1,26 @@
 import * as React from 'react';
 import { I18nManager } from 'react-native';
 
-import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { InitialState, NavigationContainer } from '@react-navigation/native';
 import { useFonts } from 'expo-font';
 import { useKeepAwake } from 'expo-keep-awake';
 import { StatusBar } from 'expo-status-bar';
 import * as Updates from 'expo-updates';
-import { PaperProvider, MD3DarkTheme, MD3LightTheme } from 'react-native-paper';
+import {
+  PaperProvider,
+  MD3DarkTheme,
+  MD3LightTheme,
+  DynamicLightTheme,
+  DynamicDarkTheme,
+} from 'react-native-paper';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import DrawerItems from './DrawerItems';
 import { PreferencesContext } from './PreferencesContext';
 import App from './RootNavigator';
-import { deviceColorsSupported } from '../utils';
+import { dynamicThemeSupported } from '../utils';
 import {
   CombinedDefaultTheme,
   CombinedDarkTheme,
@@ -40,7 +45,7 @@ export default function PaperExample() {
     InitialState | undefined
   >();
 
-  const [shouldUseDeviceColors, setShouldUseDeviceColors] =
+  const [shouldUseDynamicTheme, setShouldUseDynamicTheme] =
     React.useState(true);
   const [isDarkMode, setIsDarkMode] = React.useState(false);
   const [rtl, setRtl] = React.useState<boolean>(
@@ -50,19 +55,13 @@ export default function PaperExample() {
   const [customFontLoaded, setCustomFont] = React.useState(false);
   const [rippleEffectEnabled, setRippleEffectEnabled] = React.useState(true);
 
-  const { theme: mdTheme } = useMaterial3Theme();
   const theme = React.useMemo(() => {
-    if (!deviceColorsSupported || !shouldUseDeviceColors) {
-      return isDarkMode ? MD3DarkTheme : MD3LightTheme;
+    if (dynamicThemeSupported && shouldUseDynamicTheme) {
+      return isDarkMode ? DynamicDarkTheme : DynamicLightTheme;
     }
 
-    return isDarkMode
-      ? { ...MD3DarkTheme, colors: { ...MD3DarkTheme.colors, ...mdTheme.dark } }
-      : {
-          ...MD3LightTheme,
-          colors: { ...MD3LightTheme.colors, ...mdTheme.light },
-        };
-  }, [isDarkMode, mdTheme, shouldUseDeviceColors]);
+    return isDarkMode ? MD3DarkTheme : MD3LightTheme;
+  }, [isDarkMode, shouldUseDynamicTheme]);
 
   React.useEffect(() => {
     const restoreState = async () => {
@@ -129,8 +128,8 @@ export default function PaperExample() {
 
   const preferences = React.useMemo(
     () => ({
-      toggleShouldUseDeviceColors: () =>
-        setShouldUseDeviceColors((oldValue) => !oldValue),
+      toggleShouldUseDynamicTheme: () =>
+        setShouldUseDynamicTheme((oldValue) => !oldValue),
       toggleTheme: () => setIsDarkMode((oldValue) => !oldValue),
       toggleRtl: () => setRtl((rtl) => !rtl),
       toggleCollapsed: () => setCollapsed(!collapsed),
@@ -141,14 +140,14 @@ export default function PaperExample() {
       collapsed,
       rtl,
       theme,
-      shouldUseDeviceColors,
+      shouldUseDynamicTheme: shouldUseDynamicTheme,
     }),
     [
       rtl,
       theme,
       collapsed,
       customFontLoaded,
-      shouldUseDeviceColors,
+      shouldUseDynamicTheme,
       rippleEffectEnabled,
     ]
   );

example/src/index.tsx

@@ -111,9 +111,9 @@ export default function PaperExample() {
       rippleEffectEnabled,
       // noop for web, specified to avoid type errors
       toggleRtl: noop,
-      toggleShouldUseDeviceColors: noop,
+      toggleShouldUseDynamicTheme: noop,
       rtl: false,
-      shouldUseDeviceColors: false,
+      shouldUseDynamicTheme: false,
     }),
     [theme, collapsed, customFontLoaded, rippleEffectEnabled]
   );

example/utils/index.ts

@@ -1,6 +1,5 @@
 import { Platform } from 'react-native';
 
-import ExpoMaterial3ThemeModule from '@pchmn/expo-material3-theme/build/ExpoMaterial3ThemeModule';
 import { MD3DarkTheme, MD3LightTheme, MD3Theme } from 'react-native-paper';
 
 type ReducerAction<T extends keyof State> = {
@@ -1420,7 +1419,5 @@ export const restaurantsData = [
   },
 ];
 
-export const deviceColorsSupported =
-  Boolean(ExpoMaterial3ThemeModule) &&
-  Platform.OS === 'android' &&
-  Platform.Version >= 31;
+export const dynamicThemeSupported =
+  Platform.OS === 'android' && (Platform.Version as number) >= 31;