| Actual Project Usage | Sample | | :---: | :----: |
| | |

🏁 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

| Prop | Description | Type | Default | | :--- | :----: | ---: |---: | | items | Array of tab items to be displayed | Array | | | onPress | Handle when a tab item is pressed | (route: RouteProps) => void | | | selected | ident of tab item that is selected | number | 0 |

Optional

| Prop | Description | Type | Default | | :--- | :----: | ---: |---: | | upperCase | Change text to uppercase | boolean | false | | textStyle | Style for menu items | StyleProp | #8C8C8C | | buttonStyle | Style for menu buttons | StyleProp | marginRight: 10 | | activeTextColor | Selected/active tab item text color | string | #ffffff | | activeBackgroundColor | Selected/active tab item background colour | string | #000000 | | scrollAreaStyle | Style for the scroll area | StyleProp | height: 50 | | keyboardShouldPersistTaps | | boolean | always | never | handled | always | | itemWidth | Width of each tab item | number | 100 |

Example

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

cd example

yarn / npm i

expo start