feat: replace old variable references

example/src/DrawerItems.tsx

@@ -54,7 +54,7 @@ const DrawerItems = ({ toggleTheme, toggleRTL, isRTL, isDarkTheme }: Props) => {
   return (
     <DrawerContentScrollView
       alwaysBounceVertical={false}
-      style={[styles.drawerContent, { backgroundColor: colors.surface }]}
+      style={[styles.drawerContent, { backgroundColor: colors?.surface }]}
     >
       <Drawer.Section title="Example items">
         {DrawerItemsData.map((props, index) => (

example/src/ExampleList.tsx

@@ -108,7 +108,7 @@ export default function ExampleList({ navigation }: Props) {
   return (
     <FlatList
       contentContainerStyle={{
-        backgroundColor: colors.background,
+        backgroundColor: colors?.background,
         paddingBottom: safeArea.bottom,
         paddingLeft: safeArea.left,
         paddingRight: safeArea.right,

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -23,9 +23,7 @@ type Item = {
 };
 
 const AnimatedFABExample = () => {
-  const {
-    colors: { background },
-  } = useTheme();
+  const { colors } = useTheme();
 
   const isIOS = Platform.OS === 'ios';
 
@@ -117,10 +115,10 @@ const AnimatedFABExample = () => {
         keyExtractor={_keyExtractor}
         onEndReachedThreshold={0}
         scrollEventThrottle={16}
-        style={[styles.flex, { backgroundColor: background }]}
+        style={[styles.flex, { backgroundColor: colors?.background || '#000' }]}
         contentContainerStyle={[
           styles.container,
-          { backgroundColor: background },
+          { backgroundColor: colors?.background || '#000' },
         ]}
         onScroll={onScroll}
       />

example/src/Examples/BannerExample.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
-import { Banner, FAB, useTheme } from 'react-native-paper';
+import { Banner, FAB, useTheme, Theme } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -18,7 +18,7 @@ const BannerExample = () => {
       surface: '#09c8e5',
       primary: '#121330',
     },
-  };
+  } as Theme;
 
   return (
     <>

example/src/Examples/ButtonExample.tsx

@@ -14,7 +14,7 @@ const ButtonExample = () => {
             Default
           </Button>
           <Button
-            color={colors.accent}
+            color={colors?.accent}
             onPress={() => {}}
             style={styles.button}
           >
@@ -46,7 +46,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="outlined"
-            color={colors.accent}
+            color={colors?.accent}
             onPress={() => {}}
             style={styles.button}
           >
@@ -94,7 +94,7 @@ const ButtonExample = () => {
           </Button>
           <Button
             mode="contained"
-            color={colors.accent}
+            color={colors?.accent}
             onPress={() => {}}
             style={styles.button}
           >

example/src/Examples/CardExample.tsx

@@ -14,9 +14,7 @@ import { PreferencesContext } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const CardExample = () => {
-  const {
-    colors: { background },
-  } = useTheme();
+  const { colors } = useTheme();
   const [isOutlined, setIsOutlined] = React.useState(false);
   const mode = isOutlined ? 'outlined' : 'elevated';
 
@@ -34,7 +32,7 @@ const CardExample = () => {
         />
       </View>
       <ScrollView
-        style={[styles.container, { backgroundColor: background }]}
+        style={[styles.container, { backgroundColor: colors?.background }]}
         contentContainerStyle={styles.content}
       >
         <Card style={styles.card} mode={mode}>

example/src/Examples/ChipExample.tsx

@@ -146,20 +146,20 @@ const ChipExample = () => {
               style={[
                 styles.chip,
                 {
-                  backgroundColor: color(colors.primary)
+                  backgroundColor: color(colors?.primary)
                     .alpha(0.2)
                     .rgb()
                     .string(),
                 },
               ]}
-              selectedColor={colors.primary}
+              selectedColor={colors?.primary}
             >
               Flat selected chip with custom color
             </Chip>
             <Chip
               onPress={() => {}}
               style={styles.chip}
-              selectedColor={colors.primary}
+              selectedColor={colors?.primary}
             >
               Flat unselected chip with custom color
             </Chip>
@@ -170,21 +170,21 @@ const ChipExample = () => {
               style={[
                 styles.chip,
                 {
-                  backgroundColor: color(colors.primary)
+                  backgroundColor: color(colors?.primary)
                     .alpha(0.2)
                     .rgb()
                     .string(),
                 },
               ]}
-              selectedColor={colors.primary}
+              selectedColor={colors?.primary}
             >
               Outlined selected chip with custom color
             </Chip>
             <Chip
               mode="outlined"
               onPress={() => {}}
               style={styles.chip}
-              selectedColor={colors.primary}
+              selectedColor={colors?.primary}
             >
               Outlined unselected chip with custom color
             </Chip>

example/src/Examples/DividerExample.tsx

@@ -6,14 +6,12 @@ import ScreenWrapper from '../ScreenWrapper';
 const items = ['Apple', 'Banana', 'Coconut', 'Lemon', 'Mango', 'Peach'];
 
 const DividerExample = () => {
-  const {
-    colors: { background },
-  } = useTheme();
+  const { colors } = useTheme();
 
   return (
     <ScreenWrapper withScrollView={false}>
       <FlatList
-        style={{ backgroundColor: background }}
+        style={{ backgroundColor: colors?.background }}
         renderItem={({ item }) => <List.Item title={item} />}
         keyExtractor={(item) => item}
         ItemSeparatorComponent={Divider}

example/src/Examples/RadioButtonGroupExample.tsx

@@ -7,9 +7,7 @@ const RadioButtonGroupExample = () => {
   const [value, setValue] = React.useState<string>('first');
   const [value2, setValue2] = React.useState<string>('first');
 
-  const {
-    colors: { primary },
-  } = useTheme();
+  const { colors } = useTheme();
   return (
     <ScreenWrapper>
       <List.Section title="With RadioButton">
@@ -41,7 +39,7 @@ const RadioButtonGroupExample = () => {
           <RadioButton.Item
             label="Third item"
             value="third"
-            labelStyle={{ color: primary }}
+            labelStyle={{ color: colors?.primary }}
           />
         </RadioButton.Group>
       </List.Section>

example/src/Examples/TextInputExample.tsx

@@ -108,9 +108,7 @@ const TextInputExample = () => {
 
   const _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
 
-  const {
-    colors: { accent, primary },
-  } = useTheme();
+  const { colors } = useTheme();
 
   const inputActionHandler = (type: keyof State, payload: string) =>
     dispatch({
@@ -121,14 +119,14 @@ const TextInputExample = () => {
   const changeIconColor = (name: keyof State['iconsColor']) => {
     const color = state.iconsColor[name];
 
-    const colors = {
+    const newColors = {
       ...state.iconsColor,
-      [name]: !color ? accent : undefined,
+      [name]: !color ? colors?.accent : undefined,
     };
 
     dispatch({
       type: 'iconsColor',
-      payload: colors,
+      payload: newColors,
     });
   };
 
@@ -232,7 +230,7 @@ const TextInputExample = () => {
           right={
             <TextInput.Icon
               name="chevron-up"
-              color={(focused) => (focused ? primary : undefined)}
+              color={(focused) => (focused ? colors?.primary : undefined)}
             />
           }
         />

example/src/ScreenWrapper.tsx

@@ -24,16 +24,14 @@ export default function ScreenWrapper({
   contentContainerStyle,
   ...rest
 }: Props) {
-  const {
-    colors: { background },
-  } = useTheme();
+  const { colors } = useTheme();
 
   const insets = useSafeAreaInsets();
 
   const containerStyle = [
     styles.container,
     {
-      backgroundColor: background,
+      backgroundColor: colors?.background,
       paddingBottom: insets.bottom,
       paddingLeft: insets.left,
       paddingRight: insets.left,

example/src/index.tsx

@@ -10,6 +10,7 @@ import {
   Provider as PaperProvider,
   DarkTheme,
   DefaultTheme,
+  Theme,
 } from 'react-native-paper';
 import App from './RootNavigator';
 import DrawerItems from './DrawerItems';
@@ -27,16 +28,13 @@ declare global {
     interface ThemeAnimation {
       customProperty: number;
     }
-    interface Theme {
-      userDefinedThemeProperty: string;
-    }
   }
 }
 
 const PERSISTENCE_KEY = 'NAVIGATION_STATE';
 const PREFERENCES_KEY = 'APP_PREFERENCES';
 
-const CustomDarkTheme: ReactNativePaper.Theme = {
+const CustomDarkTheme = {
   ...DarkTheme,
   colors: {
     ...DarkTheme.colors,
@@ -46,7 +44,6 @@ const CustomDarkTheme: ReactNativePaper.Theme = {
     ...DarkTheme.fonts,
     superLight: { ...DarkTheme.fonts['light'] },
   },
-  userDefinedThemeProperty: '',
   animation: {
     ...DarkTheme.animation,
     customProperty: 1,
@@ -97,8 +94,7 @@ export default function PaperExample() {
     InitialState | undefined
   >();
 
-  const [theme, setTheme] =
-    React.useState<ReactNativePaper.Theme>(CustomDefaultTheme);
+  const [theme, setTheme] = React.useState<Theme>(CustomDefaultTheme);
   const [rtl, setRtl] = React.useState<boolean>(I18nManager.isRTL);
 
   React.useEffect(() => {

src/babel/__fixtures__/rewrite-imports/output.js

@@ -6,6 +6,7 @@ import Button from "react-native-paper/lib/module/components/Button";
 import FAB from "react-native-paper/lib/module/components/FAB";
 import Appbar from "react-native-paper/lib/module/components/Appbar";
 import * as Colors from "react-native-paper/lib/module/styles/themes/v2/colors";
-import { NonExistent, NonExistentSecond as Stuff, Theme } from "react-native-paper/lib/module/index.js";
+import { NonExistent, NonExistentSecond as Stuff } from "react-native-paper/lib/module/index.js";
 import { ThemeProvider } from "react-native-paper/lib/module/core/theming";
 import { withTheme } from "react-native-paper/lib/module/core/theming";
+import { Theme } from "react-native-paper/lib/module/types";

src/components/ActivityIndicator.tsx

@@ -8,6 +8,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
+import type { Theme } from '../types';
 import { withTheme } from '../core/theming';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
@@ -31,7 +32,7 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * @optional
    */
-  theme: ReactNativePaper.Theme;
+  theme: Theme;
 };
 
 const DURATION = 2400;
@@ -131,7 +132,7 @@ const ActivityIndicator = ({
     }
   }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
 
-  const color = indicatorColor || theme.colors.primary;
+  const color = indicatorColor || theme.colors?.primary;
   const size =
     typeof indicatorSize === 'string'
       ? indicatorSize === 'small'

src/components/Appbar/Appbar.tsx

@@ -9,6 +9,7 @@ import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import { black, white } from '../../styles/themes/v2/colors';
 import overlay from '../../styles/overlay';
+import type { Theme } from '../../types';
 
 type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
   /**
@@ -22,7 +23,7 @@ type Props = Partial<React.ComponentPropsWithRef<typeof View>> & {
   /**
    * @optional
    */
-  theme: ReactNativePaper.Theme;
+  theme: Theme;
   style?: StyleProp<ViewStyle>;
 };
 
@@ -86,8 +87,8 @@ const Appbar = ({ children, dark, style, theme, ...rest }: Props) => {
   const backgroundColor = customBackground
     ? customBackground
     : isDarkTheme && mode === 'adaptive'
-    ? overlay(elevation, colors.surface)
-    : colors.primary;
+    ? overlay(elevation, colors?.surface)
+    : colors?.primary;
   if (typeof dark === 'boolean') {
     isDark = dark;
   } else {

src/components/Appbar/AppbarContent.tsx

@@ -15,7 +15,7 @@ import Text from '../Typography/Text';
 import { withTheme } from '../../core/theming';
 import { white } from '../../styles/themes/v2/colors';
 
-import type { $RemoveChildren } from '../../types';
+import type { $RemoveChildren, Theme } from '../../types';
 
 type Props = $RemoveChildren<typeof View> & {
   /**
@@ -50,7 +50,7 @@ type Props = $RemoveChildren<typeof View> & {
   /**
    * @optional
    */
-  theme: ReactNativePaper.Theme;
+  theme: Theme;
 };
 
 /**