sidevesh / react-native-material-cards

A material design card component, customizable and versatile

react-native-material-cards

A material design card component, customizable and versatile.

See Google Material Design for more info on Cards.

Installation

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

Basic Usage

Import the components like so:

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

Then insert the card in your code:

<Card>
  <CardImage 
    source={{uri: 'http://placehold.it/480x270'}} 
    title="Above all i am here"
  />
  <CardTitle 
    title="This is a title" 
    subtitle="This is subtitle"
   />
  <CardContent text="Your device will reboot in few seconds once successful, be patient meanwhile" />
  <CardAction 
    separator={true} 
    inColumn={false}>
    <CardButton
      onPress={() => {}}
      title="Push"
      color="blue"
    />
    <CardButton
      onPress={() => {}}
      title="Later"
      color="blue"
    />
  </CardAction>
</Card>

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)
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 :)

react-native-material-cards's Issues

How to add icon in Card button text ?

How to add icon in Card button text ?

Typescript compatibility

We need Types for this awesome module :(

Update NPM Package

Update NPM Package - still using old prop-type

Error Duplication declaration "ViewPropTypes" at Touchable.js

import { ViewPropTypes, TouchableOpacity, TouchableNativeFeedback, ViewPropTypes } from 'react-native';

Source code for the cards in the example picture

Hey,
first of all thanks for this library. It saved me quite some time.

While it's probably not difficult to recreate. Can you publish the code you used to create the cards in the picture in the readme? Maybe as a runnable example. This would be useful to use for testing. I already opened two pull request but I can't easily test if my changes mess something else up.

Getting - undefined is not an object (evaluating _react2.PropTypes.func

it looks like react latest version removed such _react2.PropTypes.func.
after i enabled below.

Touchable.propTypes = {
enabled: React.PropTypes.func,
onPress: PropTypes.func.isRequired,
style: View.propTypes.style,
children: PropTypes.node.isRequired,
};

any work around...

Warnings on CardImage

Offending line:

<Image source={this.props.source} resizeMode={["stretch", this.props.resizeMode]} resizeMethod={["resize", this.props.resizeMethod]} style={[styles.imageContainer,  {height: this.state.calc_height}]}>

Line 20, CardImage.js

TypeError

Code from Example. (Readme)

Give me an Error:

Issue in using the library (using github sample)

TypeError in D:\My Projects\Mobile Development (react-native)\kafila\node_modules\react-native-material-cards\src\Touchable.js: D:/My Projects/Mobile Development (react-native)/kafila/node_modules/react-native-material-cards/src/Touchable.js: Duplicate declaration "ViewPropTypes"
at D:\My Projects\Mobile Development (react-native)\kafila\node_modules\react-native-material-cards\src\Touchable.js:7:2
processBundleResult
BundleDownloader.java:259
access$200
BundleDownloader.java:35
onChunkComplete
BundleDownloader.java:195
emitChunk
MultipartStreamReader.java:76
readAllParts
MultipartStreamReader.java:154
processMultipartResponse
BundleDownloader.java:179
access$100
BundleDownloader.java:35
onResponse
BundleDownloader.java:148
c
RealCall.java:135
run
NamedRunnable.java:32
runWorker
ThreadPoolExecutor.java:1133
run
ThreadPoolExecutor.java:607
run
Thread.java:761

Library doesn't run due to the React version

I currently have React 16.0.0-beta.5 installed, which is the default version that comes with React Native 0.49.5. Your project dependencies state that React >=15.3.1 is required, but for some reason, React 16 is incompatible. NPM warned me about an unmet peer dependency and the application errors with this message:

undefined is not an object (evaluating '_react.PropTypes.func')
<unknown>
    Touchable.js:41:21
loadModuleImplementation
    require.js:178:12
guardedLoadModule
    require.js:130:36
_require
    require.js:110:20
<unknown>
...

How can I fix this error?

How to add onClick prop to cards?

I need a clickable card to perform an action. Buttons are there but I need to click the entire card.

Title location.

How can I place the title where the letter 'Here' is written?

How can you make each card to take less space?

There's a lot of wasted space here:

Is there a way to make it more condensed?

This is the code:

            <Card style={styles.card}>
                <CardTitle title={Title} subtitle={"By: " + Author + " Sent time:" + SendTimeUtc} />
                <CardContent text={Body} />
            </Card>

issue in cardImage

this error is showing white using this library. please resolve this issue and reply me. thanks