# react-native-cards > A highly customizable material design card component for React Native Latest version **1.1.4** (published 2018-02-01) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install react-native-cards pnpm add react-native-cards yarn add react-native-cards bun add react-native-cards ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.1.4 | | Published | 2018-02-01 | | First published | 2018-01-23 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 21 | | Author | Dale French | | Maintainers | dalefrench | | Keywords | react-native, material-design, react-native-component, material-cards, cards, ios, android | ## Links - npm: https://www.npmjs.com/package/react-native-cards - Repository: https://github.com/dale-french/react-native-cards - Homepage: https://github.com/dale-french/react-native-cards#readme - Issues: https://github.com/dale-french/react-native-cards/issues - npm.io page: https://npm.io/package/react-native-cards ## Dependencies (1) - [prop-types](https://npm.io/package/prop-types.md) ^15.5.10 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.1.4 (latest) — 2018-02-01 - 1.1.3 — 2018-01-31 - 1.1.2 — 2018-01-25 - 1.1.1 — 2018-01-25 - 1.1.0 — 2018-01-25 - 1.0.4 — 2018-01-23 - 1.0.3 — 2018-01-23 - 1.0.2 — 2018-01-23 - 1.0.1 — 2018-01-23 - 1.0.0 — 2018-01-23 ## README # React Native Cards ![npm version](https://img.shields.io/npm/v/react-native-cards.svg?style=flat-square) ![npm downloads](https://img.shields.io/npm/dm/react-native-cards.svg?style=flat-square) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg) ### A highly customizable material design card component for React Native. See [Google Material Design](https://material.io/guidelines/components/cards.html) for more info on Cards. ![Images](https://image.ibb.co/jdxsEG/screenshots.png) ## Get Started ### Installation Install using npm: ``` npm install --save react-native-cards ``` or install using Yarn ``` yarn add react-native-cards ``` ## Basic Usage Import the components like so: ```javascript import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-cards'; ``` Then insert the card in your code: ```js {}} title="Share" color="#FEB557" /> {}} title="Explore" color="#FEB557" /> ``` ## 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 | `undefined` | ## 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 | `undefined` | ## CardContent Component Options | Prop | Type | Effect | Default Value | | ------------- |-------------| -----| -----| | `text` | `string` | The content text | `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 | `undefined` | ## CardImage Component Options | Prop | Type | Effect | Default Value | | ------------- |-------------| -----| -----| | `source` | `object` | The image to be shown, passed to Image's `source` prop | `undefined` | | `style` | `object` | The style object to be merged with the default style | `undefined` | | `resizeMode` | `string` | Determines how to resize the image when the frame doesn't match the raw image dimensions | `cover` | | `resizeMethod` | `string` | Resize the image when the image's dimensions differ from the image view's dimensions. | `resize` | ## 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 | `undefined` | ## CardButton Component Options | Prop | Type | Effect | Default Value | | ------------- |-------------| -----| -----| | `title` | `string` | The button's text | `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 | `undefined` | ### Todo (PRs welcome!) - [ ] Add side media to cards - see [here](https://material.io/guidelines/components/cards.html#cards-usage) --- _Source: https://npm.io/package/react-native-cards · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._