refactor: remove MD2 from all examples

Author: lukewalczak

example/src/DrawerItems.tsx

@@ -14,10 +14,10 @@ import {
   Text,
   TouchableRipple,
   Portal,
+  useTheme,
 } from 'react-native-paper';
 
 import { deviceColorsSupported, isWeb } from '../utils';
-import { useExampleTheme } from './hooks/useExampleTheme';
 import { PreferencesContext } from './PreferencesContext';
 
 const DrawerItemsData = [
@@ -95,7 +95,7 @@ function DrawerItems() {
 
   const _setDrawerItem = (index: number) => setDrawerItemIndex(index);
 
-  const { isV3, colors } = useExampleTheme();
+  const { colors } = useTheme();
   const isIOS = Platform.OS === 'ios';
   const expoGoExecution =
     Constants.executionEnvironment === ExecutionEnvironment.StoreClient;
@@ -151,7 +151,7 @@ function DrawerItems() {
         },
       ]}
     >
-      {isV3 && collapsed && (
+      {collapsed && (
         <Drawer.Section style={styles.collapsedSection}>
           {DrawerCollapsedItemsData.map((props, index) => (
             <Drawer.CollapsedItem
@@ -181,9 +181,9 @@ function DrawerItems() {
           </Drawer.Section>
 
           <Drawer.Section title="Preferences">
-            {deviceColorsSupported && isV3 ? (
+            {deviceColorsSupported ? (
               <TouchableRipple onPress={toggleShouldUseDeviceColors}>
-                <View style={[styles.preference, isV3 && styles.v3Preference]}>
+                <View style={styles.preference}>
                   <Text variant="labelLarge">Use device colors *</Text>
                   <View pointerEvents="none">
                     <Switch value={shouldUseDeviceColors} />
@@ -192,7 +192,7 @@ function DrawerItems() {
               </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} />
@@ -202,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} />
@@ -211,30 +211,26 @@ function DrawerItems() {
               </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>
+            <TouchableRipple onPress={toggleCollapsed}>
+              <View style={styles.preference}>
+                <Text variant="labelLarge">Collapsed drawer *</Text>
+                <View pointerEvents="none">
+                  <Switch value={collapsed} />
                 </View>
-              </TouchableRipple>
-            )}
+              </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 *
                 </Text>
@@ -244,7 +240,7 @@ function DrawerItems() {
               </View>
             </TouchableRipple>
           </Drawer.Section>
-          {isV3 && !collapsed && (
+          {!collapsed && (
             <Text variant="bodySmall" style={styles.annotation}>
               * - available only for MD3
             </Text>
@@ -286,9 +282,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     alignItems: 'center',
     paddingVertical: 12,
-    paddingHorizontal: 16,
-  },
-  v3Preference: {
     height: 56,
     paddingHorizontal: 28,
   },

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 { Divider, List } from 'react-native-paper';
+import { Divider, List, useTheme } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import ActivityIndicatorExample from './Examples/ActivityIndicatorExample';
@@ -49,7 +49,6 @@ import ThemingWithReactNavigation from './Examples/ThemingWithReactNavigation';
 import ToggleButtonExample from './Examples/ToggleButtonExample';
 import TooltipExample from './Examples/TooltipExample';
 import TouchableRippleExample from './Examples/TouchableRippleExample';
-import { useExampleTheme } from './hooks/useExampleTheme';
 
 export const mainExamples: Record<
   string,
@@ -132,16 +131,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 } = useTheme();
   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}

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -3,15 +3,14 @@ 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, MD3Colors, Text } from 'react-native-paper';
+import { Avatar, MD3Colors, Text, useTheme } from 'react-native-paper';
 
 import CustomFAB from './CustomFAB';
 import CustomFABControls, {
   Controls,
   initialControls,
 } from './CustomFABControls';
 import { animatedFABExampleData } from '../../../utils';
-import { useExampleTheme } from '../../hooks/useExampleTheme';
 
 type Item = {
   id: string;
@@ -26,7 +25,7 @@ type Item = {
 };
 
 const AnimatedFABExample = () => {
-  const { colors } = useExampleTheme();
+  const { colors } = useTheme();
 
   const isIOS = Platform.OS === 'ios';
 

example/src/Examples/AnimatedFABExample/CustomFAB.tsx

@@ -9,8 +9,6 @@ import {
 
 import { AnimatedFAB } from 'react-native-paper';
 
-import { useExampleTheme } from '../../hooks/useExampleTheme';
-
 type CustomFABProps = {
   animatedValue: Animated.Value;
   visible: boolean;
@@ -31,7 +29,6 @@ const CustomFAB = ({
   iconMode,
 }: CustomFABProps) => {
   const [isExtended, setIsExtended] = React.useState(true);
-  const { isV3 } = useExampleTheme();
 
   const isIOS = Platform.OS === 'ios';
 
@@ -50,7 +47,7 @@ const CustomFAB = ({
       icon={'plus'}
       label={label}
       extended={isExtended}
-      uppercase={!isV3}
+      uppercase={false}
       onPress={() => console.log('Pressed')}
       visible={visible}
       animateFrom={animateFrom}

example/src/Examples/AnimatedFABExample/CustomFABControls.tsx

@@ -6,9 +6,7 @@ import type {
   AnimatedFABAnimateFrom,
   AnimatedFABIconMode,
 } from 'react-native-paper';
-import { Paragraph, RadioButton, Text } from 'react-native-paper';
-
-import { useExampleTheme } from '../../hooks/useExampleTheme';
+import { RadioButton, Text, useTheme } from 'react-native-paper';
 
 export type Controls = {
   iconMode: AnimatedFABIconMode;
@@ -40,19 +38,15 @@ const CustomControl = ({
   value,
   onChange,
 }: CustomControlProps) => {
-  const { isV3 } = useExampleTheme();
-
   const _renderItem = React.useCallback(
     ({ item }: ListRenderItemInfo<(typeof options)[number]>) => {
-      const TextComponent = isV3 ? Text : Paragraph;
-
       return (
         <TouchableOpacity
           accessibilityRole="button"
           onPress={() => onChange(item)}
           style={styles.controlItem}
         >
-          <TextComponent variant="labelLarge">{item}</TextComponent>
+          <Text variant="labelLarge">{item}</Text>
 
           <RadioButton
             value="dynamic"
@@ -61,18 +55,17 @@ const CustomControl = ({
         </TouchableOpacity>
       );
     },
-    [value, onChange, isV3]
+    [value, onChange]
   );
 
   const _keyExtractor = React.useCallback(
     (item: (typeof options)[number]) => item,
     []
   );
-  const TextComponent = isV3 ? Text : Paragraph;
 
   return (
     <View style={styles.controlWrapper}>
-      <TextComponent variant="labelLarge">{name}</TextComponent>
+      <Text variant="labelLarge">{name}</Text>
 
       <FlatList
         horizontal
@@ -90,7 +83,7 @@ const CustomFABControls = ({
   setControls,
   controls: { animateFrom, iconMode },
 }: Props) => {
-  const { colors } = useExampleTheme();
+  const { colors } = useTheme();
 
   const setIconMode = (newIconMode: AnimatedFABIconMode) =>
     setControls((state) => ({ ...state, iconMode: newIconMode }));