Skip to content

gaetanozappi/react-native-collapsing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

React Native: react-native-collapsing

GitHub package version github home platforms github home npm

github issues github closed issues Issue Stats github license

PNG

πŸ“– Getting started

$ npm install react-native-collapsing --save

$ react-native link react-native-vector-icons

πŸ’» Usage

import * as React from 'react';
import { StyleSheet, View } from 'react-native';

import Collapsing from 'react-native-collapsing';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: '',
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Collapsing
          selected={this.state.selected}
          title="Primo gruppo"
          background="#22252A"
          backgroundBarNormal="#2D3035"
          backgroundBarFocus="#2D3035"
          iconBarNameNormal="videogame-asset"
          iconBarNameFocus="book"
          iconBarColorNormal="#1194ff"
          iconBarColorFocus="#ffb600"
          textBarColorNormal="#1194ff"
          textBarColorFocus="#ffb600"
          iconBarSize={25}
          showOnStart={true}
          animateIconNameNormal="chevron-down"
          animateIconNameFocus="chevron-up"
          animateIconColorNormal="#1194ff"
          animateIconColorFocus="#ffb600"
          badgeText="100"
          badgeColor="#fff"
          badgeBackground="#1194ff"
          badgeRadius={4}
          badgeFunction={e => {
            return e > 99 ? '99+' : e;
          }}
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('1)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub0',
              title: 'Home page',
              icon: 'home',
              colorText: '#fff',
              colorTextFocus: '#f2a307',
              colorIcon: '#c1c1c1',
              colorIconFocus: '#0480CB',
              background: 'transparent',
              backgroundFocus: '#1E2125',
              badgeText: '1000',
              badgeColor: '#fff',
              badgeBackground: '#1194ff',
              badgeRadius: 4,
            },
            {
              name: 'sub1',
              title: 'Book',
              icon: 'book',
              colorText: '#fff',
              colorTextFocus: '#f9041d',
              colorIcon: '#fff',
              colorIconFocus: '#f9041d',
              //background: '#1194ff',
              backgroundFocus: '#1E2125',
            },
            {
              type: 'menu',
              name: 'sub11',
              title: 'Movie',
              icon: 'film',
              colorText: '#fff',
              colorTextFocus: '#0480CB',
              colorIcon: '#fff',
              colorIconFocus: '#0480CB',
              //background: '#1194ff',
              backgroundFocus: '#1E2125',
            },
          ]}
        />
        <Collapsing
          selected={this.state.selected}
          iconBarNameNormal="videogame-asset"
          iconBarNameFocus="videogame-asset"
          iconBarColorNormal="#0480CB"
          title="Secondo gruppo"
          color="#4CAF50"
          showOnStart={false}
          animateIconNameNormal="chevron-down"
          animateIconNameFocus="chevron-up"
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('2)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub2',
              title: 'Movie',
              icon: 'home',
            },
            {
              name: 'sub3',
              title: 'Tv',
              icon: 'film',
            },
          ]}
        />
        <Collapsing
          selected={this.state.selected}
          title="Terzo gruppo"
          showOnStart={true}
          onPress={e => {
            this.setState({ selected: e.name });
            console.log('2)' + this.state.selected);
          }}
          menu={[
            {
              name: 'sub4',
              title: 'Theater',
            },
            {
              name: 'sub5',
              title: 'Opera',
              icon: 'film',
            },
          ]}
        />
      </View>
    );
  }
}

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

πŸ’‘ Props

Prop Type Default Note
selected string Indicates the selected item.
title string Menu title.
background string Menu background color.
backgroundBarNormal string Background color of the menu title, when the menu is in normal state.
backgroundBarFocus string Background color of the menu title, when the menu is in focus state.
iconBarNameNormal MaterialIcons Menu name icon, when the menu is in normal state.
iconBarNameFocus MaterialIcons Menu name icon, when the menu is in focus state.
iconBarColorNormal string Menu color icon, when the menu is in normal state.
iconBarColorFocus string Menu color icon, when the menu is in focus state.
iconBarSize number Icon size.
textBarColorNormal string Menu color text, when the menu is in normal state.
textBarColorFocus string Menu color text, when the menu is in focus state.
showOnStart bool false Indicates whether the menu is normal or focus.
animateIconNameNormal FontAwesome Menu name animate icon, when the menu is in normal state.
animateIconNameFocus FontAwesome Menu name animate icon, when the menu is in focus state.
animateIconColorNormal string Menu color animate icon, when the menu is in normal state.
animateIconSize number Animated icon size.
iconBarSize number Menu title icon, when the menu is in normal state.
badgeText string Badge text.
badgeColor string Color of the badge text.
badgeBackground string Background color of the badge.
badgeRadius number Badge radius.
badgeFunction function Use in case you want to define a function, for the badgeText attribute.
onPress function It is used to recover the pressure event.
rippleColor string Ripple color.
menu array It is used to define the menu.

Menu

Prop Type Default Note
name string Unique name to assign to the item.
title string Title of the element.
icon string FontAwesome Icon name.
colorText string #000000 Text color.
colorTextFocus string #607D8B Text color status focus.
colorIcon string #000000 Icon color.
colorIconFocus string #607D8B Icon color status focus.
background string transparent Background element.
backgroundFocus string #e8e8e8 Background element status focus.
badgeText string Text badge.
badgeColor string Text color badge.
badgeBackground string Background badge.
badgeRadius number Badge radius.

πŸ“œ License

This library is provided under the Apache License.

About

React Native library to generate menu collapsing.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published