react-native-scrollable-menu

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 [e-mail]

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