refactor: remove isV3 and MD2 from components (#4727)

Author: lukewalczak

docs/docusaurus.config.js

@@ -138,6 +138,7 @@ const config = {
             ListItem: 'List/ListItem',
             ListSection: 'List/ListSection',
             ListSubheader: 'List/ListSubheader',
+            ListImage: 'List/ListImage',
           },
           Menu: {
             Menu: 'Menu/Menu',

example/src/Examples/AnimatedFABExample/AnimatedFABExample.tsx

@@ -29,9 +29,8 @@ const AnimatedFABExample = () => {
 
   const isIOS = Platform.OS === 'ios';
 
-  const [extended, setExtended] = React.useState<boolean>(true);
-  const [visible, setVisible] = React.useState<boolean>(true);
-
+  const [extended, setExtended] = React.useState(true);
+  const [visible, setVisible] = React.useState(true);
   const [controls, setControls] = React.useState<Controls>(initialControls);
 
   const { current: velocity } = React.useRef<Animated.Value>(

example/src/Examples/BannerExample.tsx

@@ -17,10 +17,10 @@ const PHOTOS = Array.from({ length: 24 }).map(
 );
 
 const BannerExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
   const theme = useTheme();
 
+  const [visible, setVisible] = React.useState<boolean>(true);
+  const [useCustomTheme, setUseCustomTheme] = React.useState<boolean>(false);
   const [height, setHeight] = React.useState(0);
 
   const handleLayout = ({ nativeEvent }: LayoutChangeEvent) => {

example/src/Examples/ChipExample.tsx

@@ -6,12 +6,13 @@ import { Chip, List, MD3Colors, Snackbar, Text } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
+const customColor = MD3Colors.error50;
+
 const ChipExample = () => {
   const [snackbarProperties, setSnackbarProperties] = React.useState({
     visible: false,
     text: '',
   });
-  const customColor = MD3Colors.error50;
 
   return (
     <>

example/src/Examples/ListSectionExample.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Image, View } from 'react-native';
 
-import { Caption, List, Text, Chip, Divider } from 'react-native-paper';
+import { List, Text, Chip, Divider } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 const ListSectionExample = () => {
@@ -97,7 +97,7 @@ const ListSectionExample = () => {
               >
                 List Item
               </Text>
-              <Caption>Yesterday</Caption>
+              <Text>Yesterday</Text>
             </View>
           )}
           description={({

example/src/Examples/ProgressBarExample.tsx

@@ -25,9 +25,10 @@ class ClassProgressBar extends React.Component {
 const AnimatedProgressBar = Animated.createAnimatedComponent(ClassProgressBar);
 
 const ProgressBarExample = () => {
-  const [visible, setVisible] = React.useState<boolean>(true);
-  const [progress, setProgress] = React.useState<number>(0.3);
   const theme = useTheme();
+
+  const [visible, setVisible] = React.useState(true);
+  const [progress, setProgress] = React.useState(0.3);
   const { current: progressBarValue } = React.useRef(new Animated.Value(0));
 
   const runCustomAnimation = () => {

src/components/ActivityIndicator.tsx

@@ -63,7 +63,11 @@ const ActivityIndicator = ({
   theme: themeOverrides,
   ...rest
 }: Props) => {
-  const theme = useInternalTheme(themeOverrides);
+  const {
+    animation: { scale },
+    colors: { primary },
+  } = useInternalTheme(themeOverrides);
+
   const { current: timer } = React.useRef<Animated.Value>(
     new Animated.Value(0)
   );
@@ -75,10 +79,6 @@ const ActivityIndicator = ({
     undefined
   );
 
-  const {
-    animation: { scale },
-  } = theme;
-
   const startRotation = React.useCallback(() => {
     // Show indicator
     Animated.timing(fade, {
@@ -130,7 +130,7 @@ const ActivityIndicator = ({
     }
   }, [animating, fade, hidesWhenStopped, startRotation, scale, timer]);
 
-  const color = indicatorColor || theme.colors?.primary;
+  const color = indicatorColor || primary;
   const size =
     typeof indicatorSize === 'string'
       ? indicatorSize === 'small'

src/components/Appbar/Appbar.tsx

@@ -1,20 +1,16 @@
 import * as React from 'react';
 import {
   Animated,
-  Platform,
   StyleProp,
   StyleSheet,
   View,
   ViewStyle,
   ColorValue,
 } from 'react-native';
 
-import color from 'color';
-
 import AppbarContent from './AppbarContent';
 import {
   AppbarModes,
-  DEFAULT_APPBAR_HEIGHT,
   getAppbarBackgroundColor,
   modeAppbarHeight,
   renderAppbarContent,
@@ -165,11 +161,10 @@ const Appbar = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const { isV3 } = theme;
   const flattenedStyle = StyleSheet.flatten(style);
   const {
     backgroundColor: customBackground,
-    elevation = isV3 ? (elevated ? 2 : 0) : 4,
+    elevation = elevated ? 2 : 0,
     ...restStyle
   } = (flattenedStyle || {}) as Exclude<typeof flattenedStyle, number> & {
     elevation?: number;
@@ -178,34 +173,26 @@ const Appbar = ({
 
   const backgroundColor = getAppbarBackgroundColor(
     theme,
-    elevation,
     customBackground,
     elevated
   );
 
   const isMode = (modeToCompare: AppbarModes) => {
-    return isV3 && mode === modeToCompare;
+    return mode === modeToCompare;
   };
 
   let isDark = false;
 
   if (typeof dark === 'boolean') {
     isDark = dark;
-  } else if (!isV3) {
-    isDark =
-      backgroundColor === 'transparent'
-        ? false
-        : typeof backgroundColor === 'string'
-        ? !color(backgroundColor).isLight()
-        : true;
   }
 
-  const isV3CenterAlignedMode = isV3 && isMode('center-aligned');
+  const isCenterAlignedMode = isMode('center-aligned');
 
   let shouldCenterContent = false;
   let shouldAddLeftSpacing = false;
   let shouldAddRightSpacing = false;
-  if ((!isV3 && Platform.OS === 'ios') || isV3CenterAlignedMode) {
+  if (isCenterAlignedMode) {
     let hasAppbarContent = false;
     let leftItemsCount = 0;
     let rightItemsCount = 0;
@@ -225,14 +212,12 @@ const Appbar = ({
     });
 
     shouldCenterContent =
-      hasAppbarContent &&
-      leftItemsCount < 2 &&
-      rightItemsCount < (isV3 ? 3 : 2);
+      hasAppbarContent && leftItemsCount < 2 && rightItemsCount < 3;
     shouldAddLeftSpacing = shouldCenterContent && leftItemsCount === 0;
     shouldAddRightSpacing = shouldCenterContent && rightItemsCount === 0;
   }
 
-  const spacingStyle = isV3 ? styles.v3Spacing : styles.spacing;
+  const spacingStyle = styles.v3Spacing;
 
   const insets = {
     paddingBottom: safeAreaInsets?.bottom,
@@ -247,27 +232,25 @@ const Appbar = ({
         { backgroundColor },
         styles.appbar,
         {
-          height: isV3 ? modeAppbarHeight[mode] : DEFAULT_APPBAR_HEIGHT,
+          height: modeAppbarHeight[mode],
         },
         insets,
         restStyle,
-        !theme.isV3 && { elevation },
       ]}
       elevation={elevation as MD3Elevation}
       container
       {...rest}
     >
       {shouldAddLeftSpacing ? <View style={spacingStyle} /> : null}
-      {(!isV3 || isMode('small') || isMode('center-aligned')) && (
+      {(isMode('small') || isMode('center-aligned')) && (
         <>
           {/* Render only the back action at first place  */}
           {renderAppbarContent({
             children,
             isDark,
             theme,
-            isV3,
             renderOnly: ['Appbar.BackAction'],
-            shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
           })}
           {/* Render the rest of the content except the back action */}
           {renderAppbarContent({
@@ -278,9 +261,8 @@ const Appbar = ({
             ],
             isDark,
             theme,
-            isV3,
             renderExcept: ['Appbar.BackAction'],
-            shouldCenterContent: isV3CenterAlignedMode || shouldCenterContent,
+            shouldCenterContent: isCenterAlignedMode || shouldCenterContent,
           })}
         </>
       )}
@@ -297,14 +279,12 @@ const Appbar = ({
             {renderAppbarContent({
               children,
               isDark,
-              isV3,
               renderOnly: ['Appbar.BackAction'],
               mode,
             })}
             {renderAppbarContent({
               children: filterAppbarActions(children, true),
               isDark,
-              isV3,
               renderOnly: ['Appbar.Action'],
               mode,
             })}
@@ -313,7 +293,6 @@ const Appbar = ({
               {renderAppbarContent({
                 children: filterAppbarActions(children),
                 isDark,
-                isV3,
                 renderExcept: [
                   'Appbar',
                   'Appbar.BackAction',
@@ -327,7 +306,6 @@ const Appbar = ({
           {renderAppbarContent({
             children,
             isDark,
-            isV3,
             renderOnly: ['Appbar.Content'],
             mode,
           })}
@@ -344,9 +322,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingHorizontal: 4,
   },
-  spacing: {
-    width: 48,
-  },
   v3Spacing: {
     width: 52,
   },

src/components/Appbar/AppbarAction.tsx

@@ -7,11 +7,9 @@ import type {
   ViewStyle,
 } from 'react-native';
 
-import color from 'color';
 import type { ThemeProp } from 'src/types';
 
 import { useInternalTheme } from '../../core/theming';
-import { black } from '../../styles/themes/v2/colors';
 import { forwardRef } from '../../utils/forwardRef';
 import type { IconSource } from '../Icon';
 import IconButton from '../IconButton/IconButton';
@@ -97,15 +95,15 @@ const AppbarAction = forwardRef<View, Props>(
     }: Props,
     ref
   ) => {
-    const theme = useInternalTheme(themeOverrides);
+    const {
+      colors: { onSurface, onSurfaceVariant },
+    } = useInternalTheme(themeOverrides);
 
     const actionIconColor = iconColor
       ? iconColor
-      : theme.isV3
-      ? isLeading
-        ? theme.colors.onSurface
-        : theme.colors.onSurfaceVariant
-      : color(black).alpha(0.54).rgb().string();
+      : isLeading
+      ? onSurface
+      : onSurfaceVariant;
 
     return (
       <IconButton