Nadie Programa más

    react-native-cards

    1.1.4 • Public • Published

    React Native Cards

    npm version npm downloads PRs Welcome

    A highly customizable material design card component for React Native.

    See Google Material Design for more info on Cards.

    Images

    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:

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

    Then insert the card in your code:

    <ScrollView>
     
      <Card>
        <CardImage 
          source={{uri: 'http://bit.ly/2GfzooV'}} 
          title="Top 10 South African beaches"
        />
        <CardTitle
          subtitle="Number 6"
        />
        <CardContent text="Clifton, Western Cape" />
        <CardAction 
          separator={true} 
          inColumn={false}>
          <CardButton
            onPress={() => {}}
            title="Share"
            color="#FEB557"
          />
          <CardButton
            onPress={() => {}}
            title="Explore"
            color="#FEB557"
          />
        </CardAction>
      </Card>
     
    </ScrollView>

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

    Todo (PRs welcome!)

    • Add side media to cards - see here

    Install

    npm i react-native-cards

    DownloadsWeekly Downloads

    133

    Version

    1.1.4

    License

    MIT

    Last publish

    Collaborators

    • dalefrench