adjust card actions and title

example/src/Examples/CardExample.tsx

@@ -9,6 +9,7 @@ import {
   useTheme,
   Text,
   Switch,
+  Chip,
 } from 'react-native-paper';
 import { PreferencesContext } from '..';
 import ScreenWrapper from '../ScreenWrapper';
@@ -23,21 +24,21 @@ const CardExample = () => {
 
   return (
     <ScreenWrapper contentContainerStyle={styles.content}>
-      {isV3 && (
-        <Text style={styles.isV3modeText}>{isV3mode.toUpperCase()}</Text>
-      )}
       <View style={styles.preference}>
         {isV3 ? (
           <>
-            <Button mode="elevated" onPress={() => setIsV3Mode('elevated')}>
-              Elevated
-            </Button>
-            <Button mode="outlined" onPress={() => setIsV3Mode('outlined')}>
-              Outlined
-            </Button>
-            <Button mode="contained" onPress={() => setIsV3Mode('filled')}>
-              Filled
-            </Button>
+            {['elevated', 'outlined', 'filled'].map((mode) => (
+              <Chip
+                key={mode}
+                icon="heart"
+                selected={isV3mode === mode}
+                mode="outlined"
+                onPress={() => setIsV3Mode(mode)}
+                style={styles.chip}
+              >
+                {mode}
+              </Chip>
+            ))}
           </>
         ) : (
           <>
@@ -175,8 +176,9 @@ const styles = StyleSheet.create({
   card: {
     margin: 4,
   },
-  isV3modeText: {
-    textAlign: 'center',
+  chip: {
+    margin: 4,
+    width: 100,
   },
   preference: {
     alignItems: 'center',

src/components/Card/Card.tsx

@@ -7,8 +7,6 @@ import {
   View,
   ViewStyle,
 } from 'react-native';
-import color from 'color';
-import { white, black } from '../../styles/themes/v2/colors';
 import CardContent from './CardContent';
 import CardActions from './CardActions';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -18,7 +16,7 @@ import CardTitle, { CardTitle as _CardTitle } from './CardTitle';
 import Surface from '../Surface';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
-import overlay from '../../styles/overlay';
+import { getCardColors } from './helpers';
 
 type OutlinedCardProps = {
   mode: 'outlined';
@@ -55,7 +53,7 @@ type Props = React.ComponentProps<typeof Surface> & {
   /**
    * Mode of the Card.
    * - `elevated` - Card with elevation.
-   * - `filled` - Card with without outline and elevation.
+   * - `filled` - Card with without outline and elevation @supported Available in v3.x with theme version 3
    * - `outlined` - Card with an outline.
    */
   mode?: Mode;
@@ -194,34 +192,24 @@ const Card = ({
       ? (child.type as any).displayName
       : null
   );
-  const borderColor = color(dark ? white : black)
-    .alpha(0.12)
-    .rgb()
-    .string();
-
-  const darkModeBackgroundColor =
-    dark && isAdaptiveMode
-      ? overlay(elevation, theme.colors.surface)
-      : theme.colors.surface;
-
-  const backgroundColor =
-    isV3 && cardMode === 'filled'
-      ? theme.colors.surfaceVariant
-      : darkModeBackgroundColor;
-
   const computedElevation =
     dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;
 
+  const { backgroundColor, borderColor } = getCardColors({
+    theme,
+    mode: cardMode,
+    dark,
+    isAdaptiveMode,
+    elevation,
+  });
+
   return (
     <Surface
       style={[
         {
           borderRadius: roundness,
-          borderColor:
-            isV3 && cardMode === 'outlined'
-              ? theme.colors.outline
-              : borderColor,
           backgroundColor: backgroundColor as unknown as string,
+          borderColor,
         },
         !isV3 && {
           elevation: computedElevation as unknown as number,
@@ -252,7 +240,6 @@ const Card = ({
                   index,
                   total,
                   siblings,
-                  theme,
                 })
               : child
           )}

src/components/Card/CardActions.tsx

@@ -1,14 +1,13 @@
 import * as React from 'react';
 import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
-import type { Theme } from '../../types';
+import { useTheme } from '../../core/theming';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
    * Items inside the `CardActions`.
    */
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
-  theme?: Theme;
 };
 
 /**
@@ -38,20 +37,23 @@ type Props = React.ComponentPropsWithRef<typeof View> & {
  * ```
  */
 const CardActions = (props: Props) => {
-  const justifyContent = props?.theme?.isV3 ? 'flex-end' : 'flex-start';
+  const { isV3 } = useTheme();
+  const justifyContent = isV3 ? 'flex-end' : 'flex-start';
 
   return (
     <View
       {...props}
       style={[styles.container, props.style, { justifyContent }]}
     >
-      {React.Children.map(props.children, (child) =>
-        React.isValidElement(child)
+      {React.Children.map(props.children, (child, i) => {
+        return React.isValidElement(child)
           ? React.cloneElement(child, {
               compact: child.props.compact !== false,
+              mode: isV3 && (i === 0 ? 'outlined' : 'contained'),
+              style: isV3 && styles.button,
             })
-          : child
-      )}
+          : child;
+      })}
     </View>
   );
 };
@@ -64,6 +66,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     padding: 8,
   },
+  button: {
+    paddingHorizontal: 24,
+    marginLeft: 8,
+  },
 });
 
 export default CardActions;

src/components/Card/CardTitle.tsx

@@ -11,6 +11,7 @@ import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
 import Caption from '../Typography/v2/Caption';
 import Title from '../Typography/v2/Title';
+import Text from '../Typography/Text';
 
 type Props = React.ComponentPropsWithRef<typeof View> & {
   /**
@@ -106,7 +107,17 @@ const CardTitle = ({
   right,
   rightStyle,
   style,
+  theme,
 }: Props) => {
+  const titleComponent = (props: any) =>
+    theme.isV3 ? <Text {...props} /> : <Title {...props} />;
+
+  const subtitleComponent = (props: any) =>
+    theme.isV3 ? <Text {...props} /> : <Caption {...props} />;
+
+  const TextComponent = React.memo(({ component, ...rest }: any) =>
+    React.createElement(component, rest)
+  );
   return (
     <View
       style={[
@@ -124,29 +135,31 @@ const CardTitle = ({
       ) : null}
 
       <View style={[styles.titles]}>
-        {title ? (
-          <Title
+        {title && (
+          <TextComponent
+            component={titleComponent}
             style={[
               styles.title,
               { marginBottom: subtitle ? 0 : 2 },
               titleStyle,
             ]}
             numberOfLines={titleNumberOfLines}
+            variant="bodyLarge"
           >
             {title}
-          </Title>
-        ) : null}
-
-        {subtitle ? (
-          <Caption
+          </TextComponent>
+        )}
+        {subtitle && (
+          <TextComponent
+            component={subtitleComponent}
             style={[styles.subtitle, subtitleStyle]}
             numberOfLines={subtitleNumberOfLines}
+            variant="bodyMedium"
           >
             {subtitle}
-          </Caption>
-        ) : null}
+          </TextComponent>
+        )}
       </View>
-
       <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>
     </View>
   );

src/components/Card/helpers.tsx

@@ -0,0 +1,55 @@
+import type { Animated } from 'react-native';
+import color from 'color';
+import { black, white } from '../../styles/themes/v2/colors';
+import type { Theme } from '../../types';
+import overlay from '../../styles/overlay';
+
+export type cardMode = 'elevated' | 'outlined' | 'filled';
+
+export const getCardColors = ({
+  theme,
+  mode,
+  dark,
+  isAdaptiveMode,
+  elevation,
+}: {
+  theme: Theme;
+  mode: cardMode;
+  dark?: boolean;
+  isAdaptiveMode?: boolean;
+  elevation: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+}) => {
+  let backgroundColor;
+  let borderColor;
+
+  const isMode = (modeToCompare: cardMode) => {
+    return mode === modeToCompare;
+  };
+
+  const darkModeBackgroundColor =
+    dark && isAdaptiveMode
+      ? overlay(elevation, theme.colors.surface)
+      : theme.colors.surface;
+
+  if (theme.isV3) {
+    if (isMode('filled')) {
+      backgroundColor = theme.colors.surfaceVariant;
+    } else if (isMode('outlined')) {
+      borderColor = theme.colors.outline;
+      backgroundColor = darkModeBackgroundColor;
+    } else {
+      backgroundColor = darkModeBackgroundColor;
+    }
+  } else {
+    backgroundColor = darkModeBackgroundColor;
+    borderColor = color(dark ? white : black)
+      .alpha(0.12)
+      .rgb()
+      .string();
+  }
+
+  return {
+    backgroundColor,
+    borderColor,
+  };
+};