https://github.com/gaetanozappi/react-native-dashboard
React Native library to generate a dashboard.
https://github.com/gaetanozappi/react-native-dashboard
dashboard react-native
Last synced: 8 months ago
JSON representation
React Native library to generate a dashboard.
- Host: GitHub
- URL: https://github.com/gaetanozappi/react-native-dashboard
- Owner: gaetanozappi
- License: apache-2.0
- Created: 2018-07-25T11:04:23.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-08T06:32:54.000Z (about 5 years ago)
- Last Synced: 2025-01-18T07:29:29.436Z (over 1 year ago)
- Topics: dashboard, react-native
- Language: JavaScript
- Homepage:
- Size: 217 KB
- Stars: 9
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Native: react-native-dashboard
[](https://github.com/gaetanozappi/react-native-dashboard)
[](https://www.npmjs.com/package/react-native-dashboard)
[](https://github.com/gaetanozappi/react-native-dashboard)
[](https://www.npmjs.com/package/react-native-dashboard)
[](https://github.com/gaetanozappi/react-native-dashboard/issues)
[](https://github.com/gaetanozappi/react-native-dashboard/issues?q=is%3Aissue+is%3Aclosed)
[](http://github.com/gaetanozappi/react-native-dashboard/issues)
[]()
- [Usage](#-usage)
- [License](#-license)
## 💻 Usage
```javascript
import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Dashboard from 'react-native-dashboard';
import { FontAwesome } from 'react-native-vector-icons';
const Icon = ({ icon, item, background }) => (
);
const data = [
{
name: 'Me',
background: '#3498db',
icon: (item, background) => Icon({ icon: 'user', item, background }),
iconColor: '#0d47a1',
rippleColor: '#000',
},
{
name: 'Family',
background: '#b71c1c',
icon: (item, background) => Icon({ icon: 'gratipay', item, background }),
styleIcon: { color: '#0d47a1' },
},
{
name: 'Lovely',
background: '#ffeb3b',
icon: (item, background) => Icon({ icon: 'heart', item, background }),
},
{
name: 'Team',
background: '#4caf50',
icon: (item, background) => Icon({ icon: 'users', item, background }),
styleName: { color: '#0d47a1', fontWeight: 'bold' },
},
{
name: 'Friends',
nameColor: '#3498db',
background: '#02cbef',
icon: (item, background) => Icon({ icon: 'group', item, background }),
},
{
name: 'Calendars',
background: '#ff5722',
icon: (item, background) => Icon({ icon: 'calendar', item, background }),
},
];
export default function App() {
const card = ({ name }) => console.log('Card: ' + name);
return (
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#ecf0f1',
},
});
```
## 💡 Props
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `data` | `array` | | We need to pass an array, as in the example.
| `background` | `bool` | `false` | It allows to choose whether to use the value of the background that is in the array.
| `card` | `function` | | Function that lets you know which card has been selected.
| `column` | `number` | `2` | Number of cards per line.
| `rippleColor` | `string` | `#fff` | Ripple color, does not work on the web version.
- **items type `array`**
## 💡 Props
| Prop | Type | Default | Note |
| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `background` | `string` | `#fff` |Background card.
| `name` | `string` | | Name card.
| `nameColor` | `string` | `#000` |Name color.
| `styleName` | `obj` | `{}` |Name style.
| `icon` | `function(item, background)` | |
| `iconColor` | `string` | `#3498db` |Icon color.
| `styleIcon` | `obj` | `{}` |Icon style.
| `rippleColor` | `string` | `#fff` | Ripple color, does not work on the web version.
## 📜 License
This library is provided under the Apache License.