react-native-horizontal-scroll-menu

KO | EN

gitlite — search

#javascript #python #ai #typescript #llm #machine-learning #rust #macos #nodejs #awesome #cli #vue #openai #mcp

react-native-horizontal-scroll-menu

(★ 11)

A horizontally scrolling tab/picker component for React Native

react-native-horizontal-scroll-menu Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<div align="center">
    <h1> React Native Horizontal Scroll Menu </h1>
    <p>
      <i>A horizontally scrolling tab/picker component for React Native</i>
    </p>
</div>

|  Actual Project Usage      | Sample |
| :---:        |    :----:   |  
| ![Horizontal Scroll Menu 1](https://raw.githubusercontent.com/NyashaNziramasanga/react-native-horizontal-scroll-menu/main/images/example-usage.gif)      | ![Horizontal Scroll Menu 2](https://raw.githubusercontent.com/NyashaNziramasanga/react-native-horizontal-scroll-menu/main/images/horizontal-scroll-menu.gif)   |

## 🏁 Getting Started

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

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

## 🧰 Usage

```javascript
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

### Optional

## Example

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

```bash
cd example

yarn / npm i

expo start
```

react-native-horizontal-scroll-menu

react-native-horizontal-scroll-menu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

react-native-horizontal-scroll-menu

react-native-horizontal-scroll-menu Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README