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-imaged-carousel-card

Fully customizable & Lovely Imaged Carousel Card for React Native
https://github.com/wrathchaos/react-native-imaged-carousel-card

android apple card carousel freakycoder front-end google image imaged imaged-carousel-card ios kuray mobile react react-native reactjs software

Last synced: 13 days ago
JSON representation

Fully customizable & Lovely Imaged Carousel Card for React Native

Host: GitHub
URL: https://github.com/wrathchaos/react-native-imaged-carousel-card
Owner: WrathChaos
License: mit
Created: 2020-04-13T12:55:02.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2023-07-18T21:42:47.000Z (over 1 year ago)
Last Synced: 2024-05-01T14:29:15.902Z (7 months ago)
Topics: android, apple, card, carousel, freakycoder, front-end, google, image, imaged, imaged-carousel-card, ios, kuray, mobile, react, react-native, reactjs, software
Language: JavaScript
Homepage: https://freakycoder.com
Size: 2.74 MB
Stars: 100
Watchers: 3
Forks: 4
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md

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-imaged-carousel-card)

[![Fully customizable & Lovely Imaged Carousel Card for React Native](https://img.shields.io/badge/-Fully%20customizable%20%26%20Lovely%20Imaged%20Carousel%20Card%20for%20React%20Native-lightgrey?style=for-the-badge)](https://github.com/WrathChaos/react-native-imaged-carousel-card)

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

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

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

```ruby

npm i react-native-imaged-carousel-card

```

## Peer Dependencies

**Zero Dependency**

# Usage

## Import

```js

import ImagedCarouselCard from "react-native-imaged-carousel-card";

```

## Basic Usage

```js

```

## Advanced Usage

```js

```

# Configuration - Props

| Property                       |     Type      |         Default         | Description                                           |

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

| text                           |    string     | California Festive 2020 | change the text                                       |

| width                          | number/string |           300           | change the main card's width                          |

| height                         | number/string |           300           | change the main card's height                         |

| source                         |     asset     |         default         | change the main card's background source              |

| borderRadius                   |    number     |           16            | change the main card's border radius                  |

| textStyle                      |     style     |         default         | set your own text style                               |

| shadowColor                    |     color     |          #000           | change the shadow color                               |

| shadowStyle                    |     style     |         default         | set your own shadow style                             |

| overlayHeight                  |    number     |           50            | change the black overlay's height                     |

| overlayBackgroundColor         |     color     |     rgba(0,0,0,0.3)     | change the black overlay's background color           |

| overlayBorderBottomLeftRadius  |    number     |           16            | change the black overlay's border bottom left radius  |

| overlayBorderBottomRightRadius |    number     |           16            | change the black overlay's border bottom right radius |

| shadowPaddingBottom            |    number     |           18            | This is a **need** for shadow but you can change it   |

## Future Plans

- [x] ~~LICENSE~~

- [ ] Typescript Challenge!

- [ ] Write an article about the lib on Medium

## Author

FreakyCoder, [email protected]

## License

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