react-native-section-menu

react-native-section-menu

A multi-platform React Native sectioned menu.

Installation

$ npm i --save-dev react-native-section-menu

Usage

To render a basic menu, take the following code as an example. It will render a green header in Android with a drawer-based animation and a TabBar navigation for iOS. You can combine this component with react-native-vector-icons to fully customize the icons of your menu.

import { Menu } from 'react-native-section-menu'

class MyMenu extends React.Component {
  render () {
    return (
      <Menu
        header={<View style={{height: 150, backgroundColor: '#27ae60'}} />}
        initialEntry={0}
        tintColor='#27ae60'
        entries={[
          {
            id: 0,
            element: <View style={{flex: 1, backgroundColor: '#95a5a6'}} />,
            title: 'Bookmarks',
          },
          {
            id: 1,
            element: <View style={{flex: 1, backgroundColor: '#2c3e50'}} />,
            title: 'Contacts',
          },
          {
            id: 2,
            element: <View style={{flex: 1, backgroundColor: '#ecf0f1'}} />,
            title: 'Search',
          }
        ]}
      />
    )
  }
}

API

Required

Prop	Type	Description
entries	Array<Entry>	An array of menu entries.

Entry object

Prop	Type	Description
id	number	A numeric identifier.
title	string	The title of the section.
element	element	The element to render in the section.

Not required

Prop	Type	Description
initialEntry	number	A number to mark the entry to render by default.

iOS specific

Prop	Type	Description
	TabBarIOS.propTypes	You can pass all the props. Docs here.

Entry object

Prop	Type	Description
itemComponent	func	Pass here Icon.TabBarItemIOS to use react-native-vector-icons TabBar item.
iconName	string	The react-native-vector-icons icon name.
selectedIconName	string	The react-native-vector-icons selected icon name.
iconSize	number	The react-native-vector-icons icon size.

Android specific

Prop	Type	Description
	DrawerLayoutAndroid.propTypes	DrawerLayoutAndroid available props.
containerStyle	View.propTypes.style	The style of the parent container view.
header	node	Optional header to display above the menu list.

Entry object

Prop	Type	Description
androidIcon	node	A React node to render as an icon.
androidBackground	TouchableNativeFeedback.propTypes.background	The background effect of the entry section.
tintColor	string	The tint color of the selected entry.

License

MIT

How to contribute

Please open an issue or send a PR ☺️.

Authors

Álvaro Medina Ballester amedina at apsl.net.

Dani Sastre sastred at apsl.net