@sekizlipenguen/react-native-scroll-menu

Modern horizontal scrolling menu for React Native.

Plain React source + TypeScript definitions. Auto-centers the active chip, supports custom items, indicators, and optional tab scenes with swipe + fade/scale effects.

---

Demo

Tab scenes (swipe + content)	Chips / autoCenter / indicator

Recorded from the iOS Simulator playground (example/).

---

Installation

npm install @sekizlipenguen/react-native-scroll-menu
# or
yarn add @sekizlipenguen/react-native-scroll-menu

Peer deps: react, react-native (>= 0.64).

Local playground

cd example
npm install
bundle install && bundle exec pod install --project-directory=ios
npm start -- --port 8083
npx react-native run-ios --port 8083

example/ is in git for development — not published to npm.

---

Quick start

import React, {useState} from 'react';
import {Text, View} from 'react-native';
import ScrollingButtonMenu from '@sekizlipenguen/react-native-scroll-menu';

export default function Example() {
  const [selected, setSelected] = useState('1');

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

---

Tab menu + content scenes

Instagram / App Store style: chips on top, a page underneath.

import {ScrollingTabScenes} from '@sekizlipenguen/react-native-scroll-menu';

<ScrollingTabScenes
  items={[
    {id: 'overview', name: 'Overview'},
    {id: 'gallery', name: 'Gallery'},
    {id: 'reviews', name: 'Reviews'},
  ]}
  selected={selected}
  onChange={(item) => setSelected(item.id)}
  animation="slide" // 'slide' | 'fade' | 'scale'
  swipeEnabled
  indicator
  renderScene={({item}) => <YourPage id={item.id} />}
/>

• Height is automatic (measures active scene). Pass height only for a fixed viewport.
• slide = pager + parallax fade/scale
• fade / scale = cross-fade transitions
• Menu props (gap, indicator, styles, …) are forwarded to ScrollingButtonMenu.

Heavier alternatives if you need Material TabView / collapsing headers:
react-native-tab-view · reanimated-tab-view · collapsible-fluid-tabs

---

More examples

Custom component item

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>
    ),
  },
]}

If component is set, name is not rendered.

Per-item onPress

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

Item-level onPress overrides the menu-level handler.

Disabled, gap, indicator, unstyled

<ScrollingButtonMenu
  items={[
    {id: '1', name: 'Home'},
    {id: '2', name: 'Soon', disabled: true},
    {id: '3', name: 'Settings'},
  ]}
  selected={selected}
  onPress={(item) => setSelected(item.id)}
  gap={12}
  indicator
  indicatorStyle={{backgroundColor: '#007AFF', height: 3}}
  // unstyled
/>

Imperative scroll (ref)

const menuRef = useRef(null);

<ScrollingButtonMenu
  ref={menuRef}
  items={items}
  selected={selected}
  onPress={(item) => setSelected(item.id)}
/>

menuRef.current?.scrollToId('3');
menuRef.current?.scrollToIndex(0);

Custom renderItem

<ScrollingButtonMenu
  items={items}
  selected={selected}
  onPress={(item) => setSelected(item.id)}
  renderItem={({item, selected}) => (
    <Text style={{fontWeight: selected ? '700' : '400'}}>{item.name}</Text>
  )}
/>

---

API

ScrollingButtonMenu props

Key	Type	Default	Description
items	MenuItem[]	—	Menu items (required)
onPress	(item) => void	—	Item press handler
selected	string | number	—	Selected id (controlled)
upperCase	boolean	false	Uppercase labels
selectedOpacity	number	0.7	Press opacity
gap	number	10	Space between items
autoCenter	boolean	true	Center selected item
unstyled	boolean	false	Skip built-in chip styles
indicator	boolean	false	Sliding underline
indicatorStyle	ViewStyle	—	Indicator style
renderItem	(info) => ReactNode	—	Custom item renderer
containerStyle	ViewStyle	—	Outer container
contentContainerStyle	ViewStyle	—	Scroll content
scrollStyle	ViewStyle	—	ScrollView style
textStyle / activeTextStyle	TextStyle	—	Label styles
buttonStyle / activeButtonStyle	ViewStyle	—	Item styles
firstButtonStyle / lastButtonStyle	ViewStyle	—	Edge item styles
activeColor	string	—	Active text color
activeBackgroundColor	string	#1e1e1e	Active background
scrollEnabled	boolean	true	Horizontal scroll
showsHorizontalScrollIndicator	boolean	false	Scroll indicator
keyboardShouldPersistTaps	string | boolean	'always'	Keyboard taps
bounces	boolean	true	iOS bounce
testID / accessibilityLabel	string	—	Testing / a11y

MenuItem

Key	Type	Description
id	string | number	Unique id (required)
name	string	Label
component	ReactNode	Custom content
onPress	(item) => void	Per-item handler
disabled	boolean	Disable item
accessibilityLabel / testID	string	A11y / tests

Ref (ScrollingButtonMenu)

Method	Description
scrollToId(id, animated?)	Center by id
scrollToIndex(index, animated?)	Center by index

ScrollingTabScenes extras

Key	Type	Default	Description
onChange	(item, index) => void	—	Selection changed
renderScene	(info) => ReactNode	—	Scene renderer
scenes	Record<id, ReactNode>	—	Alternate scene map
height	number	auto	Fixed height (optional)
swipeEnabled	boolean	true	Swipe between scenes
animation	'slide' | 'fade' | 'scale'	'slide'	Transition style
sceneContainerStyle	ViewStyle	—	Scene wrapper style

Ref: goToId(id), goToIndex(index).

---

Thank You!

Issues & feedback: GitHub Issues.