Card Slider

Highly configurable card slider.

Usage

import {CardSlider} from "react-native-lights";
const CardComponent = () => {
const cardItems = [
{
title: 'Card 1 ',
description: 'Include images to your card',
buttonTitle: 'Get Started',
backgroundImage: {uri:'https://i.imgur.com/2nCt3Sbl.jpg'},
buttonFunction: function(){
Alert.alert("Thank You", "for choosing Lights!", [{text:"Welcome"}])
}
},
{
title: 'Card 2',
description: 'You can choose to just have background color',
buttonTitle: 'Get Started',
backgroundColor: 'black',
},
{
title: 'Card 3 ',
description: 'onPress function is tagged to the image.',
buttonTitle: 'Get Started',
backgroundImage: {uri:'https://i.imgur.com/2nCt3Sbl.jpg'},
buttonFunction: function(){
Alert.alert("Thank You", "for choosing Lights!", [{text:"Welcome"}])
}
},
{
title: 'Card 4',
description: 'Lorem ipsum dolor sit amet et nuncat mergitur',
buttonTitle: 'Get Started',
backgroundImage:{uri:'https://i.imgur.com/KZsmUi2l.jpg'},
},
];
return (
<CardSlider data={cardItems} />
)
}
NamebackgroundImageTypeimage URLdefault-descriptionFont size of the text in the Button
NamecardBorderRadiusTypeintdefault15descriptionBorder radius of the respective card
NamecardHeightTypeintdefault200descriptionHeight of the card
NamecardWidthTypeintdefault155descriptionrespective card width
NamebuttonFunctionTypefunctiondefault-descriptionFunction for the respective card button
NamecardPaddingTypeintdefault10descriptionpadding of the respective card
NamecardHeaderJustifyContentTypestringdefaultflex-startdescription Title content justification along the height
NamecardHeaderAlignItemTypestringdefaultflex-startdescription Title content align along the width
NameprimaryTextColorTypestringdefaultblackdescription Title text Color
NameprimaryTextSizeTypeintdefault20descriptionTitle text Size
NametitleTypestringdefault-descriptionCard title
NamecardBodyHeightTypeintdefault100descriptionHeight of the description container(Card Body)
Name cardBackgroundTypestringdefault#2675FCdescriptionBackground color of the card
Name cardMargin(background image cards)Typeintdefault10descriptionSet the card margin if you include image as a background image
NamecardBodyAlignItemTypeintdefaultflex-startdescriptionAlign the content in the description container along the width
NamecardBodyJustifyContentTypeintdefaultflex-startdescriptionjustify the content in the description container along the height
NamesecondaryTextColorTypestringdefault#777description Title text Color
NamesecondaryTextMarginTypeintdefault5descriptionMargin for the description content
NamedescriptionTypestringdefaultdescriptionCard description
NamebuttonWidthTypestring in percentagedefault70%description Button Width
NamebuttonHeightTypeintdefault40description Button height
NamebuttonTopTypeintdefault14description Top value for the respective button
NamebuttonBackgroundTypestringdefault#05ada5description Button Background
NamebuttonBorderRadiusTypeintdefault10description Button Radius
NamebuttonPaddingTypeintdefault4description Padding for Button
NamebuttonTextColorTypestingdefaultwhitedescription button Text Color
NamebuttonTextAlignTypestingdefaultcenterdescriptionAlign text within button
NamebuttonTextTopTypeintdefault7descriptionSet Top value for the text within the button
NamebuttonTextSizeTypeintdefault12descriptionFont size of the text in the Button