react-native-gradient-card-view

KO | EN

gitlite — search

#react #typescript #llm #go #android #deep-learning #macos #nodejs #java #kubernetes #awesome-list #security #pytorch #open-source

react-native-gradient-card-view

(★ 67)

Fully customizable Gradient Card View for React Native.

react-native-gradient-card-view 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

[![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
<GradientCard />
```

## Advanced Usage

You can check the example for the advanced usage

```jsx
<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.

react-native-gradient-card-view

react-native-gradient-card-view 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-gradient-card-view

react-native-gradient-card-view 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README