Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/native-ly/native-color-cards
🦄 Color cards (Shortcuts.app style) for React Native
https://github.com/native-ly/native-color-cards
android apple card color component expo ios list mobile react react-native shortcuts style web workflow
Last synced: 3 months ago
JSON representation
🦄 Color cards (Shortcuts.app style) for React Native
- Host: GitHub
- URL: https://github.com/native-ly/native-color-cards
- Owner: native-ly
- License: mit
- Created: 2019-01-11T12:50:09.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-26T15:56:59.000Z (about 2 years ago)
- Last Synced: 2024-05-28T17:20:39.614Z (9 months ago)
- Topics: android, apple, card, color, component, expo, ios, list, mobile, react, react-native, shortcuts, style, web, workflow
- Language: TypeScript
- Homepage: https://snack.expo.io/@jbiesiada/native-color-cards
- Size: 1.22 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# [native-color-cards](https://github.com/native-ly/native-color-cards) (WIP)
[](https://www.npmjs.com/package/native-color-cards)
[](https://www.npmjs.com/package/native-color-cards)
[](https://www.npmjs.com/package/native-color-cards)
[](https://snack.expo.io/@jbiesiada/native-color-cards)
[](https://codecov.io/gh/native-ly/native-color-cards)
[](https://travis-ci.com/native-ly/native-color-cards)
## About
Color cards (Shortcuts.app style) for React Native
## How to Install
First, install the library in your project by npm:
```sh
$ npm install native-color-cards
```
Or Yarn:
```sh
$ yarn add native-color-cards
```
## Getting Started
**• Connect library with project using ES6 import:**
```js
import { List, Card } from 'native-color-cards'
```
## Options
**List (extends FlatList)**
**Card (extends TouchableScale props), Flat card (extends TouchableOpacity props)**
| Name | Type | Default | Description | Available options |
| --------------- | -------- | ------------ | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| backgroundColor | string | ` ` | Card element background color | e.g.: `#D23440` |
| checkBoxProps | object | `null` | Props for checkbox (`View` component) | `{ /* options here */ }` |
| color | string | `adjust` | Card title & icon color | `adjust` - geterates color based on card color, `contrast` - chooses `#fff` or `#000` based on card background color, static color in `rgb`, `hex` etc. |
| flat | boolean | `false` | Make flat card (without options, gradient, animation, select) | `true` - enable, `false` - dusable |
| gradient | boolean | `false` | Enable or disable gradient layer over card | `true` - enable, `false` - disable |
| icon | string | ` ` | Icon name | `@expo/vector-icons` icons |
| gradientProps | object | `null` | Props for gradient (`LinearGradient` component) | `{ /* options here */ }` |
| onLongPress | function | `() => void` | Callback on long press | `() => { /* code */ }` |
| optionsProps | object | `null` | Props for options (`TouchableOpacity` component) | `{ /* options here */ }` |
| scalable | boolean | `true` | Enable or disable scale change on card press | `true` - enable, `false` - disable |
| shadow | boolean | `false` | Display shadow for card | `true` - enable, `false` - disable |
| title | string | ` ` | Card title text | Title of your card |
## License
This project is licensed under the MIT License © 2019-present Jakub Biesiada