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