https://github.com/sidevesh/react-native-material-cards

A material design card component, customizable and versatile
https://github.com/sidevesh/react-native-material-cards

card cards google material-design react-native

Last synced: 3 months ago
JSON representation

A material design card component, customizable and versatile

• Host: GitHub
• URL: https://github.com/sidevesh/react-native-material-cards
• Owner: sidevesh
• License: mit
• Created: 2017-06-11T23:59:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-10T13:56:08.000Z (7 months ago)
• Last Synced: 2024-04-13T23:55:01.294Z (7 months ago)
• Topics: card, cards, google, material-design, react-native
• Language: JavaScript
• Size: 1.58 MB
• Stars: 131
• Watchers: 4
• Forks: 38
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-native-material-cards

A material design card component, customizable and versatile.

![Images](http://i.imgur.com/iDym7bI.png)

See [Google Material Design](https://material.io/guidelines/components/cards.html) for more info on Cards.

## Installation

```sh

npm install --save react-native-material-cards

```

## Basic Usage

Import the components like so:  

```javascript

import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'

```

Then insert the card in your code:

```js

  

  

  

  

     {}}

      title="Push"

      color="blue"

    />

     {}}

      title="Later"

      color="blue"

    />

  

```

## Card Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `isDark` | `boolean` | If the card background is dark, sets a light text color, this prop is passed to all child components | `true` |

| `mediaSource` | `object` | The image to show in background of a card, with content overlayed, passed to Image's `source` prop | `undefined` |

| `avatarSource` | `object` | The avatar image to be shown in the card's content or header section, whichever comes first, passed to Image's `source` prop | `undefined` |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

## CardTitle Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `title` | `string` | The title text | `undefined` |

| `subtitle` | `string` | The subtitle text | `undefined` |

| `subtitleAbove` | `boolean` | Whether the subtitle should be shown above the title | `false` |

| `avatarSource` | `object` | The avatar image to be shown, passed to Image's `source` prop | `undefined` |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

| `titleStyle` | `object` | The style object to be merged with the default style of title text | `{}` |

| `subtitleStyle` | `object` | The style object to be merged with the default style of subtitle text | `{}` |

## CardContent Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `text` | `string` | The content text, this can be skipped and any custom content can be rendered as children | `undefined` |

| `avatarSource` | `object` | The avatar image to be shown, passed to Image's `source` prop | `undefined` |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

| `textStyle` | `object` | The style object to be merged with the default style of text | `{}` |

## CardImage Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `source` | `object` | The image to be shown, passed to Image's `source` prop, , this can be skipped and any custom image or content can be rendered as children | `undefined` |

| `resizeMode` | `string` | Determines how to resize the image when the frame doesn't match the raw image dimensions | `stretch` |

| `resizeMethod` | `string` | Resize the image when the image's dimensions differ from the image view's dimensions. | `resize` |

| `singleLineTitle` | `boolean` | Set to true if you want the title to be one line, redacted with ellipses | `true` |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

| `textStyle` | `object` | The style object to be merged with the default style of text | `{}` |

## CardAction Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `separator` | `boolean` | Whether a separator should be shown | `true` |

| `inColumn` | `boolean` | Whether the buttons should be stacked in a column | `false` |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

## CardButton Component Options

| Prop        | Type           | Effect  | Default Value |

| ------------- |-------------| -----| -----|

| `title` | `string` | The button's text, this can be skipped and any custom title or content can be rendered as children | `undefined` |

| `color` | `string` | The color of button text | `orange` |

| `onPress` | `function` | The function to be called when button is pressed | `noop` (defined in [`src/utils`](https://github.com/sidevesh/react-native-material-cards/blob/master/src/utils/index.js)) |

| `style` | `object` | The style object to be merged with the default style of root container | `{}` |

| `titleStyle` | `object` | The style object to be merged with the default style of button title | `{}` |

### To do

* Add cards with side media

PRs are welcome :)