@sekizlipenguen/react-native-scroll-menu

A lightweight and customizable horizontal scrolling menu component for React Native. Designed for simplicity and flexibility, this package helps you create smooth and interactive menus for your mobile applications.

Note: This package is now part of the @sekizlipenguen scope to improve maintainability and provide better support for future updates.

---

Installation

Install the package using npm or yarn:

npm install @sekizlipenguen/react-native-scroll-menu

yarn add @sekizlipenguen/react-native-scroll-menu

---

Example

Example

---

Usage

Here’s a simple example of how to use the @sekizlipenguen/react-native-scroll-menu:

Class Component Example

import React, { Component } from 'react';
import { View } from 'react-native';

// Import the component
import ScrollingButtonMenu from '@sekizlipenguen/react-native-scroll-menu';

export default class Example extends Component {
  render() {
    return (
        <ScrollingButtonMenu
            items={[
              {id: "1", name: 'Life'},
              {id: "2", name: 'Time'},
              {id: "3", name: 'Faith'},
              {id: "4", name: 'Cosmos'},
              {id: "5", name: 'Fall'},
            ]}
            onPress={(e) => console.log(e)}
            selected={"1"}
        />
    );
  }
}

Functional Component with Hook Example

import React, { useState } from 'react';
import { View, Text } from 'react-native';

// Import the component
import ScrollingButtonMenu from '@sekizlipenguen/react-native-scroll-menu';

const ExampleWithHook = () => {
  const [selectedItem, setSelectedItem] = useState("1");

  const handlePress = (item) => {
    console.log(item);
    setSelectedItem(item.id);
  };

  return (
      <View>
        <ScrollingButtonMenu
            items={[
              {id: "1", name: 'Life'},
              {id: "2", name: 'Time'},
              {id: "3", name: 'Faith'},
              {id: "4", name: 'Cosmos'},
              {id: "5", name: 'Fall'},
            ]}
            onPress={handlePress}
            selected={selectedItem}
        />
        <Text>Selected Item: {selectedItem}</Text>
      </View>
  );
};

export default ExampleWithHook;

Using Custom Components and Images in Items

You can now use custom React components (e.g. images, icons, or any JSX) instead of just plain text labels.
To do this, use the component property instead of name:

items = {
  [
      {id: "1", name: 'Life'},
{
  id: "2",
      component
:
  (
      <View style={{alignItems: 'center'}}>
        <Image source={require('./icon.png')} style={{width: 24, height: 24}}/>
        <Text style={{fontSize: 12, marginTop: 4}}>Icon</Text>
      </View>
  ),
}
,
{
  id: "3", name
:
  'Faith'
}
,
]
}

You can combine images with labels using any layout (e.g. View, Text, etc.) to create richer item content.

If the component field is present, the name field will be ignored and only the custom component will be rendered.

Per-Item onPress Function

You can define a custom onPress function for each item individually. If provided, it will override the global onPress for that specific item.

items = {
  [
      {id: "1", name: 'Home'},
{
  id: "2",
      name
:
  'Profile',
      onPress
:
  () => {
    console.log("Profile pressed!");
  },
}
,
{
  id: "3", name
:
  'Settings'
}
,
]
}

If onPress is provided on an item, it will be executed instead of the global onPress passed to the component.

Optional Button Style (No Default)

If you want full control over styling and don't want the default button style, you can omit it by passing an empty buttonStyle:

<ScrollingButtonMenu
    items={...}
    buttonStyle={{}} // no default style will be applied
/>

When buttonStyle is set, the default internal style will not be applied. This allows full customization from the outside.

---

Props

Key	Type	Description
items	Array	Array for button menu (required).
onPress	Function(menu)	Function triggered on button press (required).
upperCase	Boolean	Convert text to uppercase. Default: false.
selectedOpacity	Number	Opacity when button is pressed. Default: 0.7.
containerStyle	Object	Style for the container.
contentContainerStyle	Object	Style for the content container.
scrollStyle	Object	Style for the scroll view.
textStyle	Object	Style for the text.
buttonStyle	Object	Style for the button.
activeButtonStyle	Object	Style for the active button.
firstButtonStyle	Object	Style for the first button.
lastButtonStyle	Object	Style for the last button.
activeTextStyle	Object	Style for the active text.
activeColor	String	Active button text color. Default: "#ffffff".
activeBackgroundColor	String	Active button background color. Default: "#ffffff".
selected	String or Number	Selected item id. Default: 1.
keyboardShouldPersistTaps	String	Default: "always".

---

Thank You!

We appreciate your support and feedback! If you encounter any issues, feel free to open an issue.