2.0.0 • Published 1 year ago
react-native-scrollable-menu v2.0.0
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 shinuvs2007@outlook.com
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 |