callstack · adrcotfas · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026 · Mar 31, 2026
diff --git a/docs/docs/guides/02-theming.mdx b/docs/docs/guides/02-theming.mdx
@@ -227,7 +227,7 @@ export default function Main() {
 }
 ```
 
-### Sync dynamic colors with system colors
+### TODO: update section / 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.
 

diff --git a/docs/docs/guides/06-recommended-libraries.md b/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)
diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
@@ -9,8 +9,8 @@ import {
   Avatar,
   Button,
   FAB,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
+  DarkTheme as DarkTheme,
+  LightTheme as DefaultTheme,
   ProgressBar,
   PaperProvider,
   RadioButton,

diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
@@ -9,8 +9,8 @@ import Link from '@docusaurus/Link';
 import { useColorMode } from '@docusaurus/theme-common';
 import {
   Button,
-  MD3DarkTheme as DarkTheme,
-  MD3LightTheme as DefaultTheme,
+  DarkTheme as DarkTheme,
+  LightTheme as DefaultTheme,
   PaperProvider,
 } from 'react-native-paper';
 

diff --git a/example/package.json b/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",

diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
@@ -9,15 +9,14 @@ import {
   Button,
   Dialog,
   Drawer,
-  MD2Colors,
-  MD3Colors,
+  Colors,
   Switch,
   Text,
   TouchableRipple,
   Portal,
 } from 'react-native-paper';
 
-import { deviceColorsSupported, isWeb } from '../utils';
+import { dynamicThemeSupported, isWeb } from '../utils';
 import { useExampleTheme } from './hooks/useExampleTheme';
 import { PreferencesContext } from './PreferencesContext';
 
@@ -96,18 +95,17 @@ function DrawerItems() {
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
-  const { isV3, colors } = useExampleTheme();
+  const { colors } = useExampleTheme();
   const isIOS = Platform.OS === 'ios';
   const expoGoExecution =
     Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
 
   if (!preferences) throw new Error('PreferencesContext not provided');
 
   const {
-    toggleShouldUseDeviceColors,
+    toggleShouldUseDynamicTheme,
     toggleTheme,
     toggleRtl: toggleRTL,
-    toggleThemeVersion,
     toggleCollapsed,
     toggleCustomFont,
     toggleRippleEffect,
@@ -116,7 +114,7 @@ function DrawerItems() {
     collapsed,
     rtl: isRTL,
     theme: { dark: isDarkTheme },
-    shouldUseDeviceColors,
+    shouldUseDynamicTheme,
   } = preferences;
 
   const _handleToggleRTL = () => {
@@ -137,14 +135,10 @@ function DrawerItems() {
   };
 
   const coloredLabelTheme = {
-    colors: isV3
-      ? {
-          secondaryContainer: MD3Colors.tertiary80,
-          onSecondaryContainer: MD3Colors.tertiary20,
-        }
-      : {
-          primary: MD2Colors.tealA200,
-        },
+    colors: {
+      secondaryContainer: Colors.tertiary80,
+      onSecondaryContainer: Colors.tertiary20,
+    },
   };
 
   return (
@@ -157,7 +151,7 @@ function DrawerItems() {
         },
       ]}
     >
-      {isV3 && collapsed && (
+      {collapsed && (
         <Drawer.Section style={styles.collapsedSection}>
           {DrawerCollapsedItemsData.map((props, index) => (
             <Drawer.CollapsedItem
@@ -187,18 +181,18 @@ function DrawerItems() {
           </Drawer.Section>
 
           <Drawer.Section title="Preferences">
-            {deviceColorsSupported && isV3 ? (
-              <TouchableRipple onPress={toggleShouldUseDeviceColors}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Use device colors *</Text>
+            {dynamicThemeSupported ? (
+              <TouchableRipple onPress={toggleShouldUseDynamicTheme}>
+                <View style={styles.preference}>
+                  <Text variant="labelLarge">Use Dynamic Theme</Text>
                   <View pointerEvents="none">
-                    <Switch value={shouldUseDeviceColors} />
+                    <Switch value={shouldUseDynamicTheme} />
                   </View>
                 </View>
               </TouchableRipple>
             ) : null}
             <TouchableRipple onPress={toggleTheme}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">Dark Theme</Text>
                 <View pointerEvents="none">
                   <Switch value={isDarkTheme} />
@@ -208,7 +202,7 @@ function DrawerItems() {
 
             {!isWeb && (
               <TouchableRipple onPress={_handleToggleRTL}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <View style={styles.preference}>
                   <Text variant="labelLarge">RTL</Text>
                   <View pointerEvents="none">
                     <Switch value={isRTL} />
@@ -217,53 +211,35 @@ function DrawerItems() {
               </TouchableRipple>
             )}
 
-            <TouchableRipple onPress={toggleThemeVersion}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                <Text variant="labelLarge">MD 2</Text>
+            <TouchableRipple onPress={toggleCollapsed}>
+              <View style={styles.preference}>
+                <Text variant="labelLarge">Collapsed drawer</Text>
                 <View pointerEvents="none">
-                  <Switch value={!isV3} />
+                  <Switch value={collapsed} />
                 </View>
               </View>
             </TouchableRipple>
 
-            {isV3 && (
-              <TouchableRipple onPress={toggleCollapsed}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Collapsed drawer *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={collapsed} />
-                  </View>
-                </View>
-              </TouchableRipple>
-            )}
-
-            {isV3 && (
-              <TouchableRipple onPress={toggleCustomFont}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
-                  <Text variant="labelLarge">Custom font *</Text>
-                  <View pointerEvents="none">
-                    <Switch value={customFontLoaded} />
-                  </View>
+            <TouchableRipple onPress={toggleCustomFont}>
+              <View style={styles.preference}>
+                <Text variant="labelLarge">Custom font</Text>
+                <View pointerEvents="none">
+                  <Switch value={customFontLoaded} />
                 </View>
-              </TouchableRipple>
-            )}
+              </View>
+            </TouchableRipple>
 
             <TouchableRipple onPress={toggleRippleEffect}>
-              <View style={[styles.preference, isV3 && styles.v3Preference]}>
+              <View style={styles.preference}>
                 <Text variant="labelLarge">
-                  {isIOS ? 'Highlight' : 'Ripple'} effect *
+                  {isIOS ? 'Highlight' : 'Ripple'} effect
                 </Text>
                 <View pointerEvents="none">
                   <Switch value={rippleEffectEnabled} />
                 </View>
               </View>
             </TouchableRipple>
           </Drawer.Section>
-          {isV3 && !collapsed && (
-            <Text variant="bodySmall" style={styles.annotation}>
-              * - available only for MD3
-            </Text>
-          )}
           <Text variant="bodySmall" style={styles.annotation}>
             React Native Paper Version{' '}
             {require('react-native-paper/package.json').version}
@@ -301,11 +277,8 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  v3Preference: {
-    height: 56,
     paddingHorizontal: 28,
+    height: 56,
   },
   badge: {
     alignSelf: 'center',

diff --git a/example/src/ExampleList.tsx b/example/src/ExampleList.tsx
@@ -132,16 +132,12 @@ const data = Object.keys(mainExamples).map(
 export default function ExampleList({ navigation }: Props) {
   const keyExtractor = (item: { id: string }) => item.id;
 
-  const { colors, isV3 } = useExampleTheme();
+  const { colors } = useExampleTheme();
   const safeArea = useSafeAreaInsets();
 
   const renderItem = ({ item }: { item: Item }) => {
     const { data, id } = item;
 
-    if (!isV3 && data.title === mainExamples.themingWithReactNavigation.title) {
-      return null;
-    }
-
     return (
       <List.Item
         unstable_pressDelay={65}

diff --git a/example/src/Examples/ActivityIndicatorExample.tsx b/example/src/Examples/ActivityIndicatorExample.tsx
@@ -1,20 +1,12 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
 
-import {
-  ActivityIndicator,
-  FAB,
-  List,
-  MD2Colors,
-  MD3Colors,
-} from 'react-native-paper';
+import { ActivityIndicator, FAB, List, Colors } from 'react-native-paper';
 
-import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
   const [animating, setAnimating] = React.useState<boolean>(true);
-  const { isV3 } = useExampleTheme();
 
   return (
     <ScreenWrapper style={styles.container}>
@@ -49,7 +41,7 @@ const ActivityIndicatorExample = () => {
       <List.Section title="Custom color">
         <ActivityIndicator
           animating={animating}
-          color={isV3 ? MD3Colors.error20 : MD2Colors.red500}
+          color={Colors.error20}
           hidesWhenStopped={false}
         />
       </List.Section>

diff --git a/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx b/example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx
@@ -3,13 +3,7 @@ import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
 
 import Icon from '@expo/vector-icons/MaterialCommunityIcons';
-import {
-  Avatar,
-  MD2Colors,
-  MD3Colors,
-  Paragraph,
-  Text,
-} from 'react-native-paper';
+import { Avatar, Colors, Text } from 'react-native-paper';
 
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
@@ -32,7 +26,7 @@ type Item = {
 };
 
 const AnimatedFABExample = () => {
-  const { colors, isV3 } = useExampleTheme();
+  const { colors } = useExampleTheme();
 
   const isIOS = Platform.OS === 'ios';
 
@@ -47,64 +41,54 @@ const AnimatedFABExample = () => {
 
   const renderItem = React.useCallback(
     ({ item }: { item: Item }) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
       return (
         <View style={styles.itemContainer}>
           <Avatar.Text
             style={[styles.avatar, { backgroundColor: item.bgColor }]}
             label={item.initials}
-            color={isV3 ? MD3Colors.primary100 : MD2Colors.white}
+            color={Colors.primary100}
             size={40}
           />
           <View style={styles.itemTextContentContainer}>
             <View style={styles.itemHeaderContainer}>
-              <TextComponent
+              <Text
                 variant="labelLarge"
                 style={[styles.header, !item.read && styles.read]}
                 ellipsizeMode="tail"
                 numberOfLines={1}
               >
                 {item.sender}
-              </TextComponent>
-              <TextComponent
+              </Text>
+              <Text
                 variant="labelLarge"
                 style={[styles.date, !item.read && styles.read]}
               >
                 {item.date}
-              </TextComponent>
+              </Text>
             </View>
 
             <View style={styles.itemMessageContainer}>
               <View style={styles.flex}>
-                <TextComponent
+                <Text
                   variant="labelLarge"
                   ellipsizeMode="tail"
                   numberOfLines={1}
                   style={!item.read && styles.read}
                 >
                   {item.header}
-                </TextComponent>
-                <TextComponent
+                </Text>
+                <Text
                   variant="labelLarge"
                   numberOfLines={1}
                   ellipsizeMode="tail"
                 >
                   {item.message}
-                </TextComponent>
+                </Text>
               </View>
 
               <Icon
                 name={item.favorite ? 'star' : 'star-outline'}
-                color={
-                  item.favorite
-                    ? isV3
-                      ? MD3Colors.error70
-                      : MD2Colors.orange500
-                    : isV3
-                    ? MD3Colors.neutralVariant70
-                    : MD2Colors.grey500
-                }
+                color={item.favorite ? Colors.error70 : Colors.neutralVariant70}
                 size={20}
                 onPress={() => setVisible(!visible)}
                 style={styles.icon}
@@ -114,7 +98,7 @@ const AnimatedFABExample = () => {
         </View>
       );
     },
-    [visible, isV3]
+    [visible]
   );
 
   const onScroll = ({
-Original file line number
+Diff line change
@@ Expand Up / @@ -227,7 +227,7 @@ export default function Main() { @@
     }
     ```
-    ### Sync dynamic colors with system colors
+    ### TODO: update section / 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.
@@ Expand Down @@