0.0.4 • Published 7 years ago

react-native-scrolling-button-menu v0.0.4

Weekly downloads
13
License
GNU
Repository
github
Last release
7 years ago

react-native-scrolling-button-menu

React native scrolling button menu horizontal like google play.

npm version

Screenshot

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

KeyTypeDescription
itemsArrayArray for button menu is required
onPressFunction(menu)Function when press button is required
upperCaseBooleanUppercase text (optional) default value => true
selectedOpacityNumberOpacity when pressed button (optional) default value => 0.7
fontSizeNumberFont size text (optional) default value => 12
fontWeightStringFont weight text (optional) default value => bold
borderItemWidthNumberBorder width button menu (optional) default value => 1
borderItemRadiusNumberBorder radius button menu (optional) default value => 25
marginItemRightNumberMargin left on button menu (optional) default value => 7
paddingItemTopNumberPadding top button menu (optional) default value => 7
paddingItemBottomNumberPadding bottom button menu (optional) default value => 7
paddingItemLeftNumberPadding left button menu (optional) default value => 16
paddingItemRightNumberPadding right button menu (optional) default value => 16
paddingListEndNumberPadding end on list (optional) default value => 7