1.0.11 • Published 1 year ago

@nyashanziramasanga/react-native-horizontal-scroll-menu v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago
Actual Project UsageSample
Horizontal Scroll Menu 1Horizontal Scroll Menu 2

🏁 Getting Started

npm i @nyashanziramasanga/react-native-horizontal-scroll-menu

or

yarn add @nyashanziramasanga/react-native-horizontal-scroll-menu

🧰 Usage

import HorizontalScrollMenu, { RouteProps } from '@nyashanziramasanga/react-native-horizontal-scroll-menu/src';

 const [selectedIndex, setSelectedIndex] = useState(1);

  const NavigationTabs = [
    {
      id: 0,
      name: 'Tab1',
    },
    {
      id: 1,
      name: 'Tab2',
    },
    {
      id: 2,
      name: 'Tab3',
    },
    {
      id: 3,
      name: 'Tab4',
    },
    {
      id: 4,
      name: 'Tab5',
    },
  ];

const onPress = (route: RouteProps) => {
    setSelectedIndex(route.id);
    console.log('Tab pressed', route);
  };

  return (
    <HorizontalScrollMenu
      items={NavigationTabs}
      onPress={onPress}
      selected={selectedIndex}
      itemWidth={80}
      scrollAreaStyle={{ height: 50 }}
    />
  )

⚙️ Props

Required

PropDescriptionTypeDefault
itemsArray of tab items to be displayedArray
onPressHandle when a tab item is pressed(route: RouteProps) => void
selectedident of tab item that is selectednumber0

Optional

PropDescriptionTypeDefault
upperCaseChange text to uppercasebooleanfalse
textStyleStyle for menu itemsStyleProp#8C8C8C
buttonStyleStyle for menu buttonsStylePropmarginRight: 10
activeTextColorSelected/active tab item text colorstring#ffffff
activeBackgroundColorSelected/active tab item background colourstring#000000
scrollAreaStyleStyle for the scroll areaStylePropheight: 50
keyboardShouldPersistTapsbooleanalwaysneverhandledalways
itemWidthWidth of each tab itemnumber100

Example

Clone the project and cd into example folder to see a sample

cd example

yarn / npm i

expo start