React Native: react-native-collapsing

• Usage
• License

📖 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.