0.0.4 • Published 9 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 |