Allow title for Card to be a React Component (#918) (#968)

react-native-elements · Mar 11, 2018 · 2308b1b · 2308b1b
1 parent 4ca1278
commit 2308b1b
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 22 deletions.
diff --git a/src/card/Card.js b/src/card/Card.js
@@ -53,26 +53,27 @@ const Card = props => {
           flexDirection && { flexDirection },
         ]}
       >
-        {title === '' ||
-          (title &&
-            title.length > 0 &&
-            <View>
-              <Text
-                style={[
-                  styles.cardTitle,
-                  image && styles.imageCardTitle,
-                  titleStyle && titleStyle,
-                  fontFamily && { fontFamily },
-                ]}
-                numberOfLines={titleNumberOfLines}
-              >
-                {title}
-              </Text>
-              {!image &&
-                <Divider
-                  style={[styles.divider, dividerStyle && dividerStyle]}
-                />}
-            </View>)}
+        {title === '' || React.isValidElement(title)
+          ? title
+          : title && title.length && (
+              <View>
+                <Text
+                  style={[
+                    styles.cardTitle,
+                    image && styles.imageCardTitle,
+                    titleStyle && titleStyle,
+                    fontFamily && { fontFamily },
+                  ]}
+                  numberOfLines={titleNumberOfLines}
+                >
+                  {title}
+                </Text>
+                {!image &&
+                  <Divider
+                    style={[styles.divider, dividerStyle && dividerStyle]}
+                  />}
+              </View>
+            )}
         {image &&
           <View style={imageWrapperStyle && imageWrapperStyle}>
             <BackgroundImage
@@ -118,7 +119,7 @@ Card.propTypes = {
   containerStyle: ViewPropTypes.style,
   wrapperStyle: ViewPropTypes.style,
   overlayStyle: ViewPropTypes.style,
-  title: PropTypes.string,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
   titleStyle: NativeText.propTypes.style,
   featuredTitle: PropTypes.string,
   featuredTitleStyle: Text.propTypes.style,

diff --git a/src/card/__tests__/Card.js b/src/card/__tests__/Card.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import { TextInput } from 'react-native';
 import { shallow } from 'enzyme';
 import toJson from 'enzyme-to-json';
 import Card from '../Card';
@@ -65,4 +66,15 @@ describe('Card Component', () => {
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
+
+  it('should have custom component as title', () => {
+    const component = shallow(
+      <Card
+        title={<TextInput />}
+      />
+    );
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/card/__tests__/__snapshots__/Card.js.snap b/src/card/__tests__/__snapshots__/Card.js.snap
@@ -329,6 +329,48 @@ exports[`Card Component should have Card with featured title 1`] = `
 </View>
 `;
 
+exports[`Card Component should have custom component as title 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "white",
+        "borderColor": "#e1e8ee",
+        "borderWidth": 1,
+        "margin": 15,
+        "marginBottom": 0,
+        "padding": 15,
+        "shadowColor": "rgba(0,0,0, .2)",
+        "shadowOffset": Object {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 1,
+        "shadowRadius": 1,
+      },
+      undefined,
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "transparent",
+        },
+        undefined,
+        undefined,
+      ]
+    }
+  >
+    <TextInput
+      allowFontScaling={true}
+    />
+  </View>
+</View>
+`;
+
 exports[`Card Component should render without issues 1`] = `
 <View
   style={

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -402,7 +402,7 @@ export interface CardProps {
   /**
    * Card title
    */
-  title?: string;
+  title?: string | JSX.Element;
 
   /**
    * Additional title styling (if title provided)