🏁 Getting Started

npm i react-native-horizontal-scroll-menu

yarn add react-native-horizontal-scroll-menu

Usage

 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	color: '#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"
itemWidth	Width of each tab item	number	100

Example

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

cd example

yarn / npm i

expo start