🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

react-native-dashboard

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-dashboard

React Native library to generate a dashboard.

0.0.6
latest
Source
npm
Version published
Weekly downloads
28
833.33%
Maintainers
1
Weekly downloads
 
Created
Source

React Native: react-native-dashboard

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

  • Usage
  • License

💻 Usage

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 }) => (
    <FontAwesome
        name={icon}
        size={40}
        color={
            item.iconColor || (!item.background || !background ? '#3498db' : '#fff')
        }
        style={item.styleIcon}
    />
);

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 (
        <View style={styles.container}>
            <Dashboard
                data={data}
                background={true}
                card={card}
                column={2}
                rippleColor={'#3498db'}
            />
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#ecf0f1',
    },
});

💡 Props

PropTypeDefaultNote
dataarrayWe need to pass an array, as in the example.
backgroundboolfalseIt allows to choose whether to use the value of the background that is in the array.
cardfunctionFunction that lets you know which card has been selected.
columnnumber2Number of cards per line.
rippleColorstring#fffRipple color, does not work on the web version.
  • items type array

💡 Props

PropTypeDefaultNote
backgroundstring#fffBackground card.
namestringName card.
nameColorstring#000Name color.
styleNameobj{}Name style.
iconfunction(item, background)
iconColorstring#3498dbIcon color.
styleIconobj{}Icon style.
rippleColorstring#fffRipple color, does not work on the web version.

📜 License

This library is provided under the Apache License.

Keywords

react-native

FAQs

Package last updated on 08 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts