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>