fix: set number of lines to 1 in Card.Title (#821)

callstack · Feb 11, 2019 · b4490cf · b4490cf
1 parent 13d51c0
commit b4490cf
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/example/src/Examples/CardExample.js b/example/src/Examples/CardExample.js
@@ -53,7 +53,7 @@ class CardExample extends React.Component<Props> {
         </Card>
         <Card style={styles.card}>
           <Card.Title
-            title="Berries"
+            title="Berries that are trimmed at the end"
             subtitle="Omega Ruby"
             left={props => <Avatar.Icon {...props} icon="folder" />}
             right={props => (

diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js
@@ -105,13 +105,20 @@ class CardTitle extends React.Component<Props> {
 
         <View style={[styles.titles]}>
           {title ? (
-            <Title style={[{ marginBottom: subtitle ? 0 : 2 }, titleStyle]}>
+            <Title
+              style={[
+                styles.title,
+                { marginBottom: subtitle ? 0 : 2 },
+                titleStyle,
+              ]}
+              numberOfLines={1}
+            >
               {title}
             </Title>
           ) : null}
 
           {subtitle ? (
-            <Caption style={[styles.subtitle, subtitleStyle]}>
+            <Caption style={[styles.subtitle, subtitleStyle]} numberOfLines={1}>
               {subtitle}
             </Caption>
           ) : null}
@@ -142,10 +149,15 @@ const styles = StyleSheet.create({
     flex: 1,
     flexDirection: 'column',
     justifyContent: 'center',
-    height: 40,
+    height: 50,
+  },
+
+  title: {
+    minHeight: 30,
   },
 
   subtitle: {
+    minHeight: 20,
     marginVertical: 0,
   },
 });