# react-native-scrolling-button-menu

> React native scrolling button menu horizontal like google play

Latest version **0.0.4** (published 2017-04-21) · GNU license · 0 weekly downloads

## Install

```sh
npm install react-native-scrolling-button-menu
pnpm add react-native-scrolling-button-menu
yarn add react-native-scrolling-button-menu
bun add react-native-scrolling-button-menu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2017-04-21 |
| First published | 2017-04-21 |
| Weekly downloads | 0 |
| License | GNU |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 14 |
| Author | Herudi |
| Maintainers | herudi |
| Keywords | scrolling button menu horizontal like google play, react, react-native, scrolling, button, menu, horizontal, like google play |

## Links

- npm: https://www.npmjs.com/package/react-native-scrolling-button-menu
- Repository: https://github.com/herudi/react-native-scrolling-button-menu
- Homepage: https://github.com/herudi/react-native-scrolling-button-menu#readme
- Issues: https://github.com/herudi/react-native-scrolling-button-menu/issues
- npm.io page: https://npm.io/package/react-native-scrolling-button-menu

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.4 (latest) — 2017-04-21
- 0.0.3 — 2017-04-21
- 0.0.2 — 2017-04-21
- 0.0.1 — 2017-04-21

## README

# react-native-scrolling-button-menu
React native scrolling button menu horizontal like google play.

[![npm version](https://img.shields.io/badge/npm-0.0.4-blue.svg)](https://www.npmjs.com/package/react-native-scrolling-button-menu)

![Screenshot](https://drive.google.com/uc?export=view&id=0BwIOCc0bQ1AnNV90Z0p1azJ5SXc)

## Installation
`npm install --save react-native-scrolling-button-menu`

## Usage
```JavaScript
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|

---
_Source: https://npm.io/package/react-native-scrolling-button-menu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._