React Native: react-native-collapsing
📖 Getting started
$ npm install react-native-collapsing --save
$ react-native link react-native-vector-icons
💻 Usage
;; ; Component { superprops; thisstate = selected: '' ; } { return <View style=stylescontainer> <Collapsing selected=thisstateselected 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= { return e > 99 ? '99+' : e; } onPress= { this; console; } 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=thisstateselected iconBarNameNormal="videogame-asset" iconBarNameFocus="videogame-asset" iconBarColorNormal="#0480CB" title="Secondo gruppo" color="#4CAF50" showOnStart=false animateIconNameNormal="chevron-down" animateIconNameFocus="chevron-up" onPress= { this; console; } menu= name: 'sub2' title: 'Movie' icon: 'home' name: 'sub3' title: 'Tv' icon: 'film' /> <Collapsing selected=thisstateselected title="Terzo gruppo" showOnStart=true onPress= { this; console; } menu= name: 'sub4' title: 'Theater' name: 'sub5' title: 'Opera' icon: 'film' /> </View> ; } const styles = StyleSheet;
💡 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.