Git Product home page Git Product logo

react-native-material-cards's Introduction

React-Native-Material-Cards

A material design card component, customizable and versatile.

Images

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 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 stretch
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)
style object The style object to be merged with the default style undefined

ToDo

  • Add cards with side media

PRs are welcome :)

react-native-material-cards's People

Contributors

illright avatar sidevesh avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.