feat: adjust theme types to match internal and regular usage (#3279)

example/src/DrawerItems.tsx

@@ -1,22 +1,21 @@
 import * as React from 'react';
-import { View, StyleSheet, I18nManager } from 'react-native';
+import { I18nManager, StyleSheet, View } from 'react-native';
 
 import { DrawerContentScrollView } from '@react-navigation/drawer';
 import * as Updates from 'expo-updates';
 import {
   Badge,
   Drawer,
+  MD2Colors,
+  MD3Colors,
   Switch,
   Text,
   TouchableRipple,
-  MD2Colors,
-  useTheme,
-  MD3Colors,
 } from 'react-native-paper';
 
 import { isWeb } from '../utils';
 
-import { PreferencesContext } from './';
+import { PreferencesContext, useExampleTheme } from './';
 
 type Props = {
   toggleTheme: () => void;
@@ -97,7 +96,7 @@ const DrawerItems = ({
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
-  const { colors, isV3 } = useTheme();
+  const { isV3, colors } = useExampleTheme();
 
   const _handleToggleRTL = () => {
     toggleRTL();

example/src/ExampleList.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FlatList } from 'react-native';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
-import { List, Divider, useTheme } from 'react-native-paper';
+import { Divider, List } from 'react-native-paper';
 import { useSafeArea } from 'react-native-safe-area-context';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
@@ -41,6 +41,8 @@ import ThemeExample from './Examples/ThemeExample';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
 
+import { useExampleTheme } from '.';
+
 export const examples: Record<
   string,
   React.ComponentType<any> & { title: string }
@@ -105,7 +107,7 @@ export default function ExampleList({ navigation }: Props) {
 
   const keyExtractor = (item: { id: string }) => item.id;
 
-  const { colors } = useTheme();
+  const { colors } = useExampleTheme();
   const safeArea = useSafeArea();
 
   return (

example/src/Examples/ActivityIndicatorExample.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   ActivityIndicator,
-  MD2Colors,
   FAB,
-  useTheme,
+  MD2Colors,
   MD3Colors,
 } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ActivityIndicatorExample = () => {
   const [animating, setAnimating] = React.useState<boolean>(true);
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
 
   return (
     <ScreenWrapper style={styles.container}>

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -1,17 +1,17 @@
 import * as React from 'react';
-import { View, StyleSheet, FlatList, Animated, Platform } from 'react-native';
-import type { NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
+import { Animated, FlatList, Platform, StyleSheet, View } from 'react-native';
 
 import {
+  Avatar,
   MD2Colors,
   MD3Colors,
-  useTheme,
-  Avatar,
   Paragraph,
   Text,
 } from 'react-native-paper';
 import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
 
+import { useExampleTheme } from '../..';
 import { animatedFABExampleData } from '../../../utils';
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
@@ -32,7 +32,7 @@ type Item = {
 };
 
 const AnimatedFABExample = () => {
-  const { colors, isV3 } = useTheme();
+  const { colors, isV3 } = useExampleTheme();
 
   const isIOS = Platform.OS === 'ios';
 

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import {
-  StyleProp,
-  ViewStyle,
   Animated,
-  StyleSheet,
   Platform,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
 } from 'react-native';
 
-import { AnimatedFAB, useTheme } from 'react-native-paper';
+import { AnimatedFAB } from 'react-native-paper';
+
+import { useExampleTheme } from '../..';
 
 type CustomFABProps = {
   animatedValue: Animated.Value;
@@ -29,7 +31,7 @@ const CustomFAB = ({
   iconMode,
 }: CustomFABProps) => {
   const [isExtended, setIsExtended] = React.useState(true);
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
 
   const isIOS = Platform.OS === 'ios';
 

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { StyleSheet, View, FlatList } from 'react-native';
+import { FlatList, StyleSheet, View } from 'react-native';
 
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import type {
   AnimatedFABAnimateFrom,
   AnimatedFABIconMode,
 } from 'react-native-paper';
-import { Paragraph, RadioButton, Text, useTheme } from 'react-native-paper';
+import { Paragraph, RadioButton, Text } from 'react-native-paper';
+
+import { useExampleTheme } from '../..';
 
 export type Controls = {
   iconMode: AnimatedFABIconMode;
@@ -38,7 +40,7 @@ const CustomControl = ({
   value,
   onChange,
 }: CustomControlProps) => {
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
 
   const _renderItem = React.useCallback(
     ({ item }) => {
@@ -85,7 +87,7 @@ const CustomFABControls = ({
   setControls,
   controls: { animateFrom, iconMode },
 }: Props) => {
-  const { colors } = useTheme();
+  const { colors } = useExampleTheme();
 
   const setIconMode = (newIconMode: AnimatedFABIconMode) =>
     setControls((state) => ({ ...state, iconMode: newIconMode }));

example/src/Examples/AppbarExample.tsx

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import { View, Platform, StyleSheet } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
 import {
   Appbar,
   FAB,
-  Switch,
+  List,
   Paragraph,
-  Text,
-  useTheme,
   RadioButton,
-  List,
+  Switch,
+  Text,
 } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useExampleTheme } from '..';
 import { yellowA200 } from '../../../src/styles/themes/v2/colors';
 import ScreenWrapper from '../ScreenWrapper';
 
@@ -37,7 +37,7 @@ const AppbarExample = ({ navigation }: Props) => {
   const [showCalendarIcon, setShowCalendarIcon] = React.useState(false);
   const [showElevated, setShowElevated] = React.useState(false);
 
-  const theme = useTheme();
+  const theme = useExampleTheme();
   const { bottom, left, right } = useSafeAreaInsets();
   const height = theme.isV3 ? 80 : 56;
 

example/src/Examples/AvatarExample.tsx

@@ -1,18 +1,13 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
-import {
-  Avatar,
-  List,
-  MD2Colors,
-  MD3Colors,
-  useTheme,
-} from 'react-native-paper';
+import { Avatar, List, MD2Colors, MD3Colors } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const AvatarExample = () => {
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
   return (
     <ScreenWrapper>
       <List.Section title="Text">

example/src/Examples/BadgeExample.tsx

@@ -1,22 +1,22 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import {
   Badge,
   IconButton,
   List,
-  Paragraph,
-  Switch,
   MD2Colors,
-  useTheme,
   MD3Colors,
+  Paragraph,
+  Switch,
 } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const BadgeExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
 
   return (
     <ScreenWrapper>

example/src/Examples/BannerExample.tsx

@@ -1,14 +1,9 @@
 import * as React from 'react';
-import { View, StyleSheet, Image, Dimensions, Platform } from 'react-native';
+import { Dimensions, Image, Platform, StyleSheet, View } from 'react-native';
 
-import {
-  Banner,
-  FAB,
-  useTheme,
-  MD2Colors,
-  MD3Colors,
-} from 'react-native-paper';
+import { Banner, FAB, MD2Colors, MD3Colors } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const PHOTOS = Array.from({ length: 24 }).map(
@@ -18,7 +13,7 @@ const PHOTOS = Array.from({ length: 24 }).map(
 const BannerExample = () => {
   const [visible, setVisible] = React.useState<boolean>(true);
   const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
-  const defaultTheme = useTheme();
+  const defaultTheme = useExampleTheme();
   const customTheme = !defaultTheme.isV3
     ? {
         ...defaultTheme,

example/src/Examples/BottomNavigationExample.tsx

@@ -1,17 +1,18 @@
 import * as React from 'react';
 import {
-  View,
-  Image,
   Dimensions,
-  StyleSheet,
-  Platform,
   Easing,
+  Image,
+  Platform,
+  StyleSheet,
+  View,
 } from 'react-native';
 
 import type { StackNavigationProp } from '@react-navigation/stack';
-import { Appbar, BottomNavigation, Menu, useTheme } from 'react-native-paper';
+import { Appbar, BottomNavigation, Menu } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 type RoutesState = Array<{
@@ -54,7 +55,7 @@ const PhotoGallery = ({ route }: Route) => {
 };
 
 const BottomNavigationExample = ({ navigation }: Props) => {
-  const { isV3 } = useTheme();
+  const { isV3 } = useExampleTheme();
   const insets = useSafeAreaInsets();
   const [index, setIndex] = React.useState(0);
   const [menuVisible, setMenuVisible] = React.useState(false);

example/src/Examples/ButtonExample.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { View, StyleSheet, Image } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 
-import { Button, List, useTheme } from 'react-native-paper';
+import { Button, List } from 'react-native-paper';
 
+import { useExampleTheme } from '..';
 import ScreenWrapper from '../ScreenWrapper';
 
 const ButtonExample = () => {
-  const theme = useTheme();
+  const theme = useExampleTheme();
 
   const color = theme.isV3 ? theme.colors.inversePrimary : theme.colors.accent;
 

example/src/Examples/CardExample.tsx

@@ -3,23 +3,22 @@ import { Alert, ScrollView, StyleSheet, View } from 'react-native';
 
 import {
   Avatar,
-  Paragraph,
-  Card,
   Button,
-  IconButton,
-  useTheme,
+  Card,
   Chip,
+  IconButton,
+  Paragraph,
   Text,
 } from 'react-native-paper';
 
-import { PreferencesContext } from '..';
+import { PreferencesContext, useExampleTheme } from '..';
 import { isWeb } from '../../utils';
 import ScreenWrapper from '../ScreenWrapper';
 
 type Mode = 'elevated' | 'outlined' | 'contained';
 
 const CardExample = () => {
-  const { colors, isV3 } = useTheme();
+  const { colors, isV3 } = useExampleTheme();
   const [selectedMode, setSelectedMode] = React.useState('elevated' as Mode);
   const [isSelected, setIsSelected] = React.useState(false);
   const preferences = React.useContext(PreferencesContext);