@sekizlipenguen/react-native-scroll-menu v1.8.3

@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

Thank You!

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