0.0.4 • Published 7 years ago
react-native-scrolling-button-menu v0.0.4
react-native-scrolling-button-menu
React native scrolling button menu horizontal like google play.
Installation
npm install --save react-native-scrolling-button-menu
Usage
import React, { Component } from 'react';
import {
View
} from 'react-native';
//import this
import ScrollingButtonMenu from 'react-native-scrolling-button-menu';
//define menu
let menus = [
{
text:'England',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
},
{
text:'Australia',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
},
{
text:'Indonesian',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
},
{
text:'USA',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
},
{
text:'Canada',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
},
{
text:'Spain',
textColor:'#FFFFFF',
backgroundColor:'#388E3C',
borderColor:'#388E3C',
}
];
export default class Example extends Component {
onPressButtonMenu(menu) {
console.log(menu.text);
}
render() {
return (
//render this
<ScrollingButtonMenu
items={menus}
style={{padding:15}}
onPress={this.onPressButtonMenu.bind(this)}
/>
);
}
}
Props
Key | Type | Description |
---|---|---|
items | Array | Array for button menu is required |
onPress | Function(menu) | Function when press button is required |
upperCase | Boolean | Uppercase text (optional) default value => true |
selectedOpacity | Number | Opacity when pressed button (optional) default value => 0.7 |
fontSize | Number | Font size text (optional) default value => 12 |
fontWeight | String | Font weight text (optional) default value => bold |
borderItemWidth | Number | Border width button menu (optional) default value => 1 |
borderItemRadius | Number | Border radius button menu (optional) default value => 25 |
marginItemRight | Number | Margin left on button menu (optional) default value => 7 |
paddingItemTop | Number | Padding top button menu (optional) default value => 7 |
paddingItemBottom | Number | Padding bottom button menu (optional) default value => 7 |
paddingItemLeft | Number | Padding left button menu (optional) default value => 16 |
paddingItemRight | Number | Padding right button menu (optional) default value => 16 |
paddingListEnd | Number | Padding end on list (optional) default value => 7 |