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": ">= 16.x.x",
"react-native": ">= 0.55.x",
"react-native-svg": ">= 9.x.x",
"react-native-fast-image": ">= 5.x.x",
"react-native-linear-gradient": ">= 2.x.x"

#Expo Version Peer Dependencies:

"expo": ">= 32.x.x",
"react": ">= 16.x.x",
"react-native": ">= 0.55.x",
"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}
        centerSubtitleStyle={{
          fontSize: 12,
          marginLeft: 8,
          textAlign: "center",
          color: item.strokeColor
        }}
        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 | | ------------------- | :--------: | :--------------------------: | ---------------------------------------------------------- | | start | {x,y} | { x: 0, y: 0 } | change the direction of the gradient | | end | {x,y} | { x: 1, y: 0 } | change the direction of the gradient | | 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!) | | height | number | 70 | change the card's height | | width | number | device width * 0.95 | change the card's width | | borderRadius | number | 20 | change the card's border radius | | innerContainer | style | style | set your own inner container style (NOT recommended!) | | imageComponent | 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 | | imageResizeMode | resizeMode | FastImage.resizeMode.contain | change the FastImage.sizeMode's any mode which is provided | | title | string | "BTC" | change the title string with your data | | subtitle | string | "Bitcoin" | change the subtitle string with your data | | centerTitle | string | "$ 4081,95" | change the center title string with your data | | centerSubtitle | string | "+ 1,48 ↑" | change the center subtitle string with your data | | titleStyle | style | style | set your own style for title component | | subtitleStyle | style | style | set your own style for subtitle component | | leftComponent | component | text based component | set your component for the left part | | centerTitleStyle | style | style | set your own style for center title component | | centerSubtitleStyle | 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

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

Author

FreakyCoder, [email protected]

License

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