Morioh
Login
Ethan Whitehead

Ethan Whitehead

3 years ago

Fully customizable Gradient Card View for React Native

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.

Download Details:

Author: WrathChaos

Demo: https://freakycoder.com/

Source Code: https://github.com/WrathChaos/react-native-gradient-card-view

#react #react-native #mobile-apps

Fully customizable Gradient Card View for React Native
9.30 GEEK