Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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

card circular circular-card design material-design mobile mobile-app-development react react-native software ui ux

Last synced: 3 months ago
JSON representation

Fully customizable Circular Card View for React Native

Host: GitHub
URL: https://github.com/wrathchaos/react-native-circular-card-view
Owner: WrathChaos
License: mit
Created: 2019-09-07T13:37:13.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2023-10-21T00:16:16.000Z (over 1 year ago)
Last Synced: 2024-10-08T13:40:39.965Z (4 months ago)
Topics: card, circular, circular-card, design, material-design, mobile, mobile-app-development, react, react-native, software, ui, ux
Language: JavaScript
Homepage: https://www.freakycoder.com
Size: 5.2 MB
Stars: 20
Watchers: 3
Forks: 3
Open Issues: 3
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-circular-card-view)

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

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

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

![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)

[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)



  

  



## Installation

Add the dependency:

### React Native:

```ruby

npm i react-native-circular-card-view

```

## Peer Dependencies

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

```

"react": ">= 16.x.x",

"react-native": ">= 0.55.x",

"react-native-androw": ">= 0.0.33",

"react-native-vector-icons": ">= 6.6.0"

"react-native-material-ripple": ">= 0.8.0",

"react-native-dynamic-vector-icons": ">= 0.2.1",

"@freakycoder/react-native-helpers": ">= 0.0.21",

```

## Import

```js

import { CircularCard } from "react-native-circular-card-view";

```

# Simple Usage 

```jsx

```

# Advanced Custom Usage 

Please check the example for the custom usage

```jsx

```

### Configuration - Props

| Property         |     Type     |      Default      | Description                             |

| ---------------- | :----------: | :---------------: | --------------------------------------- |

| title            |    string    |  check the code   | set the title                           |

| description      |    string    |  check the code   | set the description                     |

| priceText        |    string    |  check the code   | set the right bottom text               |

| width            |    number    | ScreenWidth * 0.9 | change the card's width                 |

| height           |    number    |        125        | change the card's height                |

| source           | string (uri) |  Unsplash String  | set the image source as uri             |

| shadowColor      |    color     |       #000        | change the card's shadow color          |

| backgroundColor  |    color     |      #fcfcfc      | change the card's main background color |

| iconOnPress      |   function   |       null        | set the icon onPress function           |

| imageStyle       |    style     |       style       | set your own style for image            |

| titleStyle       |    style     |       style       | set your own style for title            |

| priceStyle       |    style     |       style       | set your own style for price            |

| shadowStyle      |    style     |       style       | set your own style for shadow           |

| descriptionStyle |    style     |       style       | set your own style for description      |

### ToDos

- [x] ~~LICENSE~~

- [ ] Write an article about the lib on Medium

# Change Log

# Credits

I could not find the artist of this design, please find me :) 

## Author

FreakyCoder, [email protected]

## License

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