native-color-cards (WIP)
Color cards (Shortcuts.app style) for React Native
First, install the library in your project by npm:
$ npm install native-color-cards
Or Yarn:
$ yarn add native-color-cards
• Connect library with project using ES6 import:
import { List, Card } from 'native-color-cards'
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 |
This project is licensed under the MIT License © 2019-present Jakub Biesiada