feat: pressable card title

example/src/Examples/CardExample.tsx

@@ -62,6 +62,25 @@ const CardExample = () => {
             </TextComponent>
           </Card.Content>
         </Card>
+        <Card style={styles.card} mode={selectedMode}>
+          <Card.Cover
+            source={require('../../assets/images/wrecked-ship.jpg')}
+          />
+          <Card.Title
+            title="Pressable Title"
+            onPressTitle={() => {
+              isWeb
+                ? alert('The title is Pressed')
+                : Alert.alert('The title is Pressed');
+            }}
+          />
+          <Card.Content>
+            <TextComponent variant="bodyMedium">
+              This is a card with a pressable title. {'\n'}If you press the
+              title I will alert
+            </TextComponent>
+          </Card.Content>
+        </Card>
         {isV3 && (
           <Card style={styles.card} mode={selectedMode}>
             <Card.Cover source={require('../../assets/images/bridge.jpg')} />

src/components/Card/CardTitle.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Pressable,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -109,6 +110,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * @optional
+   * Makes the card title pressable
+   */
+  onPressTitle?: () => void;
 };
 
 const LEFT_SIZE = 40;
@@ -150,14 +156,36 @@ const CardTitle = ({
   rightStyle,
   style,
   theme: themeOverrides,
+  onPressTitle,
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const TitleComponent = theme.isV3 ? Text : Title;
-  const SubtitleComponent = theme.isV3 ? Text : Caption;
+  let TitleContainer = theme.isV3 ? Text : Title;
+  const SubtitleContainer = theme.isV3 ? Text : Caption;
 
   const minHeight = subtitle || left || right ? 72 : 50;
   const marginBottom = subtitle ? 0 : 2;
 
+  const TitleComponent = (props: { title: React.ReactNode }) => (
+    <TitleContainer
+      style={[styles.title, { marginBottom }, titleStyle]}
+      numberOfLines={titleNumberOfLines}
+      variant={titleVariant}
+      maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
+    >
+      {props.title}
+    </TitleContainer>
+  );
+  const SubtitleComponent = (props: { subtitle: React.ReactNode }) => (
+    <SubtitleContainer
+      style={[styles.subtitle, subtitleStyle]}
+      numberOfLines={subtitleNumberOfLines}
+      variant={subtitleVariant}
+      maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
+    >
+      {props.subtitle}
+    </SubtitleContainer>
+  );
+
   return (
     <View style={[styles.container, { minHeight }, style]}>
       {left ? (
@@ -169,26 +197,14 @@ const CardTitle = ({
       ) : null}
 
       <View style={[styles.titles]}>
-        {title && (
-          <TitleComponent
-            style={[styles.title, { marginBottom }, titleStyle]}
-            numberOfLines={titleNumberOfLines}
-            variant={titleVariant}
-            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-          >
-            {title}
-          </TitleComponent>
-        )}
-        {subtitle && (
-          <SubtitleComponent
-            style={[styles.subtitle, subtitleStyle]}
-            numberOfLines={subtitleNumberOfLines}
-            variant={subtitleVariant}
-            maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
-          >
-            {subtitle}
-          </SubtitleComponent>
+        {title && onPressTitle ? (
+          <Pressable onPress={onPressTitle} style={[styles.title]}>
+            <TitleComponent {...{ title }} />
+          </Pressable>
+        ) : (
+          <TitleComponent {...{ title }} />
         )}
+        {subtitle && <SubtitleComponent {...{ subtitle }} />}
       </View>
       <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>
     </View>
@@ -219,6 +235,7 @@ const styles = StyleSheet.create({
   },
 
   title: {
+    alignSelf: 'flex-start',
     minHeight: 30,
     paddingRight: 16,
   },