{"id":25407879,"url":"https://github.com/gaetanozappi/react-native-dashboard","last_synced_at":"2025-10-31T03:30:31.122Z","repository":{"id":57336453,"uuid":"142288410","full_name":"gaetanozappi/react-native-dashboard","owner":"gaetanozappi","description":"React Native library to generate a dashboard.","archived":false,"fork":false,"pushed_at":"2021-05-08T06:32:54.000Z","size":222,"stargazers_count":9,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-18T07:29:29.436Z","etag":null,"topics":["dashboard","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gaetanozappi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-25T11:04:23.000Z","updated_at":"2023-09-02T21:10:54.000Z","dependencies_parsed_at":"2022-09-03T07:11:20.490Z","dependency_job_id":null,"html_url":"https://github.com/gaetanozappi/react-native-dashboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gaetanozappi%2Freact-native-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gaetanozappi","download_url":"https://codeload.github.com/gaetanozappi/react-native-dashboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239098755,"owners_count":19581300,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dashboard","react-native"],"created_at":"2025-02-16T07:19:08.216Z","updated_at":"2025-10-31T03:30:30.770Z","avatar_url":"https://github.com/gaetanozappi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native: react-native-dashboard\n\n[![GitHub package version](https://img.shields.io/github/package-json/v/gaetanozappi/react-native-dashboard.svg?style=flat\u0026colorB=2b7cff)](https://github.com/gaetanozappi/react-native-dashboard)\n[![github home](http://img.shields.io/npm/v/react-native-dashboard.svg?style=flat)](https://www.npmjs.com/package/react-native-dashboard)\n![platforms](https://img.shields.io/badge/platforms-Android%20%7C%20iOS%20%7C%20Web-brightgreen.svg?style=flat\u0026colorB=191A17)\n[![github home](https://img.shields.io/badge/gaetanozappi-react--native--dashboard-blue.svg?style=flat-square)](https://github.com/gaetanozappi/react-native-dashboard)\n[![npm](https://img.shields.io/npm/dm/react-native-dashboard.svg?style=flat\u0026colorB=007ec6)](https://www.npmjs.com/package/react-native-dashboard)\n\n[![github issues](https://img.shields.io/github/issues/gaetanozappi/react-native-dashboard.svg?style=flat)](https://github.com/gaetanozappi/react-native-dashboard/issues)\n[![github closed issues](https://img.shields.io/github/issues-closed/gaetanozappi/react-native-dashboard.svg?style=flat\u0026colorB=44cc11)](https://github.com/gaetanozappi/react-native-dashboard/issues?q=is%3Aissue+is%3Aclosed)\n[![Issue Stats](https://img.shields.io/issuestats/i/github/gaetanozappi/react-native-dashboard.svg?style=flat\u0026colorB=44cc11)](http://github.com/gaetanozappi/react-native-dashboard/issues)\n[![github license](https://img.shields.io/github/license/gaetanozappi/react-native-dashboard.svg)]()\n\n\u003cimg src=\"https://github.com/gaetanozappi/react-native-dashboard/raw/master/screenshot/react-native-dashboard.png\" /\u003e       \n\u003cimg src=\"https://github.com/gaetanozappi/react-native-dashboard/raw/master/screenshot/react-native-dashboard2.png\" /\u003e       \n\n-   [Usage](#-usage)\n-   [License](#-license)\n\n## 💻 Usage\n\n```javascript\nimport React, { Component } from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\nimport Dashboard from 'react-native-dashboard';\nimport { FontAwesome } from 'react-native-vector-icons';\n\nconst Icon = ({ icon, item, background }) =\u003e (\n    \u003cFontAwesome\n        name={icon}\n        size={40}\n        color={\n            item.iconColor || (!item.background || !background ? '#3498db' : '#fff')\n        }\n        style={item.styleIcon}\n    /\u003e\n);\n\nconst data = [\n    {\n        name: 'Me',\n        background: '#3498db',\n        icon: (item, background) =\u003e Icon({ icon: 'user', item, background }),\n        iconColor: '#0d47a1',\n        rippleColor: '#000',\n    },\n    {\n        name: 'Family',\n        background: '#b71c1c',\n        icon: (item, background) =\u003e Icon({ icon: 'gratipay', item, background }),\n        styleIcon: { color: '#0d47a1' },\n    },\n    {\n        name: 'Lovely',\n        background: '#ffeb3b',\n        icon: (item, background) =\u003e Icon({ icon: 'heart', item, background }),\n    },\n    {\n        name: 'Team',\n        background: '#4caf50',\n        icon: (item, background) =\u003e Icon({ icon: 'users', item, background }),\n        styleName: { color: '#0d47a1', fontWeight: 'bold' },\n    },\n    {\n        name: 'Friends',\n        nameColor: '#3498db',\n        background: '#02cbef',\n        icon: (item, background) =\u003e Icon({ icon: 'group', item, background }),\n    },\n    {\n        name: 'Calendars',\n        background: '#ff5722',\n        icon: (item, background) =\u003e Icon({ icon: 'calendar', item, background }),\n    },\n];\n\nexport default function App() {\n    const card = ({ name }) =\u003e console.log('Card: ' + name);\n    return (\n        \u003cView style={styles.container}\u003e\n            \u003cDashboard\n                data={data}\n                background={true}\n                card={card}\n                column={2}\n                rippleColor={'#3498db'}\n            /\u003e\n        \u003c/View\u003e\n    );\n}\n\nconst styles = StyleSheet.create({\n    container: {\n        flex: 1,\n        backgroundColor: '#ecf0f1',\n    },\n});\n```\n\n## 💡 Props\n\n| Prop              | Type       | Default | Note                                                                                                       |\n| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |\n| `data`      | `array`   |  | We need to pass an array, as in the example.\n| `background`       | `bool`   | `false`   | It allows to choose whether to use the value of the background that is in the array.\n| `card`          | `function`   |    | Function that lets you know which card has been selected.\n| `column`     | `number`   | `2`  | Number of cards per line.\n| `rippleColor`     | `string`   | `#fff`  | Ripple color, does not work on the web version.\n\n- **items type `array`**\n\n## 💡 Props\n\n| Prop              | Type       | Default | Note                                                                                                       |\n| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- |\n| `background`       | `string`   | `#fff`   |Background card.\n| `name`      | `string`   |  | Name card.\n| `nameColor`       | `string`   | `#000`   |Name color.\n| `styleName`       | `obj`   | `{}`   |Name style.\n| `icon`     | `function(item, background)`   |  | \n| `iconColor`       | `string`   | `#3498db`   |Icon color.\n| `styleIcon`       | `obj`   | `{}`   |Icon style.\n| `rippleColor`     | `string`   | `#fff`  | Ripple color, does not work on the web version.\n\n## 📜 License\nThis library is provided under the Apache License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgaetanozappi%2Freact-native-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgaetanozappi%2Freact-native-dashboard/lists"}