React Native Gradient Card View

Installation

Add the dependency:

Pure React Native:

npm i react-native-gradient-card-view

Expo Version:

"react-native-gradient-card-view": "WrathChaos/react-native-gradient-card-view#expo"

Peer Dependencies

IMPORTANT! You need install them.

"react-native-linear-gradient": ">= 2.x.x"

Expo Version Peer Dependencies:

"react-native-expo-image-cache": ">= 3.x.x"

Basic Usage

<GradientCard />

Advanced Usage

You can check the example for the advanced usage

<GradientCard
  style={{ marginTop: 16 }}
  title={item.name}
  subtitle={item.shortName}
  centerTitle={item.value}
  centerSubtitle={item.change}
  rightComponent={
    <LineChart
      data={item.data}
      style={styles.chartStyle}
      contentInset={styles.chartContentInset}
      svg={{
        strokeWidth: 1.5,
        fill: item.fillColor,
        stroke: item.strokeColor,
      }}
    />
  }
/>

Configuration - Props

Property	Type	Default	Description
gradientColors	[color]	check the example	change the gradient's color array
style	style	null	add any style to the whole container
shadowStyle	style	check the example	set your own shadow style
shadowColor	color	#595959	change the shadow color
outerContainer	style	style	set your own outer container style (NOT recommended!)
width	number	device width * 0.95	change the card's width
height	number	70	change the card's height
borderRadius	number	20	change the card's border radius
innerContainerStyle	style	style	set your own inner container style (NOT recommended!)
imageComponentStyle	component	FastImage	set your own image component
imageStyle	style	style	change the image's style
imageWidth	number	35	change the image's width
imageHeight	number	35	change the image's height
imageBorderRadius	number	10	change the image's border radius
imageSource	file	default image	set your own image source
title	string	"BTC"	change the title string with your data
subtitle	string	"Bitcoin"	change the subtitle string with your data
centerText	string	"\$ 4081,95"	change the center title string with your data
centerSubtext	string	"+ 1,48 ↑"	change the center subtitle string with your data
titleTextStyle	style	style	set your own style for title component
subtitleTextStyle	style	style	set your own style for subtitle component
leftComponent	component	text based component	set your component for the left part
centerTextStyle	style	style	set your own style for center title component
centerSubtextStyle	style	style	set your own style for center subtitle component
centerComponent	component	text based component	set your component for the center part
rightComponent	component	null	set your own component for the right component

ToDos

[x] ~~Make an Expo Version~~
[x] ~~LICENSE~~
[ ] Write an article about the lib on Medium

Author

FreakyCoder, kurayogun@gmail.com

License

React Native Gradient Card View Library is available under the MIT license. See the LICENSE file for more info.

WrathChaos / react-native-gradient-card-view

readme