Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content.We provide a ready made image and list cards since they are most commonly used. Even if you want to create your own custom card, You can use our main card component to create the same.

Usage

Any card consists of 3 parts namely : a header, body and a footer. You can remove any of them as per your needs.

Simple Card

//Simple Card With a Header, Body and Footer
import {Card} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Card
    headerContent={getRandom('text')}
    bodyContent={getRandom('paragraph')}
    footerContent={getRandom('text')}
/>

 

//Simple Card With a Header, Body
import {Card} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Card
    headerContent={getRandom('text')}
    bodyContent={getRandom('paragraph')}
/>

 

Image Card

//Simple Image Card
import {Card} from 'arivaa-basic';
import {getRandom} from 'arivaa-basic/components/util';
<Card
    image={getRandom('image')}
    headerContent={getRandom('text')}
    overlay={false}
/>

 

//Image Card with a overlay and a footer
import {Card,Toast} from 'arivaa-basic';
import {getRandom,getImage} from 'arivaa-basic/components/util';
const footerItems = [
    {
        icon: 'ios-heart-outline',
        text: '20',
    }, {
        icon: 'ios-chatbubbles-outline',
        text: '20',
    }, {
        icon: 'ios-paper-plane-outline',
        text: '2',
    }
];
<Card
    type="image"
    image={getRandom('image')}
    overlay={true}
    overlayTitle={getRandom('text')}
    overlaySubTitle={getRandom('text')}
    footerItems={footerItems}
    onFooterItemClick={(item) => {Toast.info('Count is ' + item.text)}}
/>

 

List Card

//List Card
import {Card,Toast} from 'arivaa-basic';
import {getRandom,getImage} from 'arivaa-basic/components/util';
<Card
    type="list"
    headerContent={'Contact List'}
    data={
        getRandom('contacts').map((contact, index) => {
            return {
                        key: index,
                        title: contact.name,
                        subTitle: contact.phone,
                        image: getImage(contact.avatar)
                    }
        })}
    onItemClick={({title}) => {Toast.info(title + ' clicked')}}
/>

 

Supported properties

Card Properties

Properties Description Type Default
headerContent content to be shown in card header String | React Element null
bodyContent content to be shown inside card String | React Element null
footerContent content to be shown in card footer String | React Element null
style styling of the card React Native View Style -
styles For detailed customization of component's internal styles(Refer detailed styles usage below) Custom Object( DetailedStyles ) (Refer the format below)

DetailedStyles Usage

Below is the tree structure of React Native's core elements used in this component's view implementation and how styles property is applied when this component is rendered. So feel free to customize it if you need to.

Header

<View style = {styles.header}>
    <View>
        <View style = {flex:1}>{/*header content*/}</View>
            OR
        <Text style = {styles.headerText}></Text> {/*Text in case of string*/}
    </View>
</View>

 

Body

<View style = {styles.body}>
    {/*body content*/}
        OR
    <Text style = {styles.bodyText}></Text> {/*Text in case of string*/}
</View>

 

Footer

<View style = {styles.footer}>
    <View>
        <View style = {flex:1}>{/*footer content*/}</View>
            OR
        <Text style = {styles.headerText}></Text> {/*Text in case of string*/}
    </View>
</View>

 

Card

<View style = {styles.container}>
    <View style = {[style,styles.card]}>
        <Header/>
        <Body/>
        <Footer/>
    </View>
</View>

 

List Card Properties

Properties Descrition Type Default
headerContent content to be shown in card header String | React Element null
footerContent content to be shown in card footer String | React Element null
data list of data to be shown in rows Array(ListItem) -
onItemClick onClick callback for item function(item, index){} -
style styling of the card (Refer detailed styles usage in Card above) React Native View Style -
styles For detailed customization of component's internal styles (Refer detailed styles usage in Card properties above) Custom Object( DetailedStyles ) (Refer the format above under card properties)

ListItem Format

Property Name Description Type Default
image Image url String null
title title of item String Empty
subTitle sub title of item String Empty

List Item Styles Usage in body of the card

<View style = {styles.body}>
    {/*For each list item below markup is used*/}
    <TouchableHighlight style = {styles.listItemContainer}>
        <View style = {styles.listItem}>
            <Image style = {styles.listItemImage}/>
            <View style = {styles.listItemTextContainer}>
                <Text style = {styles.listItemTitle}/>
                <Text style = {styles.listItemSubTitle}/>
            </View>
        </View>
    </TouchableHighlight>
</View>

 

Image Card Properties

Properties Descrition Type Default
headerContent content to be shown in card header String | React Element null
image URL of the image String null
overlay whether to show overlay over the image boolean false
overlayTitle title of the overlay content String | React Element -
overlaySubTitle sub title of the overlay content String | React Element -
footerItems list of links to be shown in footer Array(FooterItem) -
onFooterItemClick Callback on click of a footer item function(item,index){} -
style styling of the card (Refer detailed styles usage in Card above) React Native View Style -
styles For detailed customization of component's internal styles(Refer detailed styles usage in Card above) Custom Object( DetailedStyles ) (Refer the format below)

FooterItem Format

Property Name Description Type Default
icon Icon name to be used String null
title title of item String Empty

Image Styles Usage in body of the card

<View style = {styles.body}>
    <Image style = {styles.bodyImage}/>
    {/*Only rendered for overlay*/}
    <View style = {styles.overlay}>
        <View style = {styles.overlayContent}>
            <Text style = {styles.overlayTitle}/>
            <Text style = {styles.overlaySubTitle}/>
        </View>
    </View>
</View>

 

Footer item Styles Usage in footer of the card

<View style = {styles.footer}>
    {/*For each footer item below markup is used*/}
    <TouchableHighlight style = {styles.footerItemLink}>
        <View style = {styles.footerItemContainer}>
            {/*In case icon is provided*/}
            <Icon name={item.icon} style={styles.footerItemIcon}/>
            <Text style = {styles.footerItemText}/>
        </View>
    </TouchableHighlight>
</View>

Published On October 14, 2020 12:27 PM

Last Updated October 14, 2020 12:27 PM