https://github.com/wrathchaos/react-native-gradient-card-view

Fully customizable Gradient Card View for React Native.
https://github.com/wrathchaos/react-native-gradient-card-view

Last synced: 6 months ago
JSON representation

Fully customizable Gradient Card View for React Native.

• Host: GitHub
• URL: https://github.com/wrathchaos/react-native-gradient-card-view
• Owner: WrathChaos
• License: mit
• Created: 2019-03-30T09:22:48.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-06T22:13:49.000Z (almost 2 years ago)
• Last Synced: 2025-04-14T03:12:55.478Z (6 months ago)
• Language: TypeScript
• Homepage: https://www.freakycoder.com
• Size: 5.18 MB
• Stars: 67
• Watchers: 2
• Forks: 10
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-button)

[![Fully customizable Gradient Card View for React Native](https://img.shields.io/badge/-Fully%20customizable%20Gradient%20Card%20View%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-gradient-card-view)

[![npm version](https://img.shields.io/npm/v/react-native-gradient-card-view.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-gradient-card-view)

[![npm](https://img.shields.io/npm/dt/react-native-gradient-card-view.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-gradient-card-view)

![expo-compatible](https://img.shields.io/badge/Expo-compatible-9cf.svg?style=for-the-badge)

![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)

[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)







## Installation

Add the dependency:

### Pure React Native:

```bash

npm i react-native-gradient-card-view

```

### Expo Version:

```bash

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

```

## Peer Dependencies

##### IMPORTANT! You need install them.

```bash

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

```

#Expo Version Peer Dependencies:

```bash

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

```

## Basic Usage

```jsx

```

## Advanced Usage

You can check the example for the advanced usage

```jsx

  }

/>

```

### 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.