Horizontal Scrollable Menu

Horizontal Scrollable menu is a React native library for listing the horizontal menus .

Installation

Use the package manager to install the package.

npm install react-native-scrollable-menu

Usage

import React from "react";
import { HorizontalMenu } from 'HorizontalMenu';

export default function App() {

    const data = [{key : 'Bread'}, {key : 'Piza'}, {key : 'Burgers'}, {key : 'Cafe'}, {key : 'Salad'}, {key : 'Starters'}, {key: 'Vegetarian Curries'}, {key: 'Non Vegetarian'}]
    
    const menuItemSelected = (selectedItem) => {
        // Handle the action
    }
  
    return (
      <View style={{marginTop: 30}}>
        <HorizontalMenu 
          data={data}
          displayKey='key'
          borderRadius={5} 
          borderWidth={0}
          backgroundColor='#D3D3D3'
          borderColor='#5b5b5b'
          fontSize={15}
          selectedMenuColor="#22AF44"
          selectedMenuBorderColor="red"
          fontColor="#36454F"
          selectedMenuFontColor="#ffffff"
          menuSpacing={5}
          width={100}
          textAlign='center'
          onPress={(value) => menuItemSelected(value)}
        />
      </View>
    );
  }

Release Note 2.0.0

• More props added so that developers can customize menu as per your needs. Please refer props table for more information.
• Active menu highlight issue fixed.

Report bug fix

Please report the bugs to [email protected]

Props

| Key | value | | :------------------------:| :------------------------------------------------------------------------------:| | data | pass the menu array of objects | | displayKey | set which key you need to display from the object | | borderRadius | set borderRadius 0 for square shape and set another value to round shaped menu | | borderWidth | set borderWidth to display default border | | borderColor | set borderColor to display default border color | | selectedMenuBorderColor | set selectedMenuBorderColor to change selected menu border color | | selectedMenuColor | set selectedMenuColor to change selected menu color | | fontSize | set fontSize to adjust font size | | width | set custom menu width using width props | | height | set custom menu height using height props | | menuSpacing | use menuSpacing props to set spacing between menus | | textAlign | use textAlign props to set text align | | onPress | onPress function will return selected menu object |

Demo

License

MIT