National Pizza Magistrate

    react-native-section-menu

    0.1.0 • Public • Published

    react-native-section-menu

    Build Status

    A multi-platform React Native sectioned menu.

    iOS menu Android 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

    Install

    npm i react-native-section-menu

    DownloadsWeekly Downloads

    3

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • apsl