Colored Cards

List of colored Cards that can be configured to fit your design.

Usage

import {ColoredCards} from "react-native-lights";
const ColoredCards = () => {
const cardItems = [
{
title: 'Colored cards ',
description: 'You can add a list of colored cards',
buttonTitle: 'Get Started',
backgroundColor: 'green',
buttonFunction: function(){
console.log("Lights")
}
},
{
title: 'Pintest cards',
description: 'Pinterest style can that can be used with ease',
buttonTitle: 'Get Started',
backgroundColor: 'Pink',
buttonFunction: function(){
Alert.alert("Thank You", "for choosing Lights!", [{text:"Welcome"}])
},
},
{
title: 'You can also check out',
description: 'Bottomsheet, Input',
buttonTitle: 'Get Started',
backgroundColor: 'blue',
buttonFunction: function(){
Alert.alert("Thank You", "for choosing Lights!", [{text:"Welcome"}])
},
}
];
return (
<View style={{flex:1}}>
<ColoredCards data={cardItems} />
</View>
);
};

Props

NametitleTypestringdefault-descriptionCard title
NamedescriptionTypestringdefaultdescriptionCard description
NamebuttonTitleTypestringdefaultGet StarteddescriptionButton title
NamebuttonFunctionTypefunctiondefault-descriptionFunction for the respective card button
NamebackgroundColorTypestringdefault#399ce3descriptionBackbround color for the card
NamecardHeightTypeintdefault320descriptionOverall Height of the card
NamecardWidthTypeintdefaultnulldescriptionrespective card width
NamecardMarginTypeintdefault10descriptionMargin of the respective card
NamecardBorderRadiusTypeintdefault20descriptionBorder radius of the respective card
NamecardPaddingTypeintdefault16descriptionpadding of the respective card
NameprimaryTextSizeTypeintdefault28descriptionTitle text Size
NameprimaryTextColorTypestringdefaultwhitedescription Title text Color
NameprimaryTextWeightTypestringdefaultbolddescription Title font weight
NameprimaryTextTopTypeintdefault15description Set Top Value for the Title text
NamecardHeaderJustifyContentTypestringdefaultflex-startdescription Title content justification along the height
NamecardHeaderAlignItemTypestringdefaultflex-startdescription Title content align along the width
NamecardBodyJustifyContentTypestringdefaultflex-startdescription Description content justification along the height
NamecardBodyAlignItemTypestringdefaultflex-startdescription Description content align along the width
NamecardButtomJustifyContentTypestringdefaultflex-startdescription Button alignment along the height
NamecardButtonAlignItemTypestringdefaultflex-startdescription Button alignment along the width
NamesecondaryTextSizeTypeintdefault14descriptionTitle text Size
NamesecondaryTextAlignTypestringdefaultleftdescription Text alignment of the description
NamesecondaryTextColorTypestringdefaultWhitedescription Description text Color
NamesecondaryTextSizeTypeintdefault16description Description font size
NamebuttonWidthTypeintdefault150description Button Width
NamebuttonHeightTypeintdefault50description Button height
NamebuttonTopTypeintdefault50description Top value for the respective button
NamebuttonBackgroundTypestringdefault#05ada5description Button Background
NamebuttonBorderRadiusTypeintdefault12description Button Radius
NamebuttonPaddingTypeintdefault8description Padding for Button
NamebuttonTextColorTypestingdefaultwhitedescription button Text Color
NamebuttonTextAlignTypestingdefaultcenterdescriptionAlign text within button
NamebuttonTextTopTypeintdefault8descriptionSet Top value for the text within the button
NamebuttonTextBottomTypeintdefault8descriptionSet Bottom value for the text within the button
NamebuttonTextSizeTypeintdefault8descriptionFont size of the text in the Button