react-native-side-reveal-menu

Animated menu component for React Native. Inspired by this native android component: https://android-arsenal.com/details/1/1388

Installation

npm install --save react-native-side-reveal-menu

Example usage

This example uses react-native-vector-icons package but feel free to put anything else into the MenuItem components.

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableNativeFeedback, Alert } from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { Menu, MenuItem } from 'react-native-side-reveal-menu';

export default class SideRevealMenuDev extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpened: true
    }

    this.onBtnPress = this.onBtnPress.bind(this);
  }

  onBtnPress() {
    this.setState({
      menuOpened: !this.state.menuOpened
    });
  }

  render() {
    return (
      <View style={styles.container}>

        <TouchableNativeFeedback onPress={this.onBtnPress}>
          <View style={styles.btn}><Text style={styles.text}>Toggle Menu</Text></View>
        </TouchableNativeFeedback>

        <Menu isOpened={this.state.menuOpened}>
          <MenuItem onPress={() => console.log('Adress book pressed')}>
            <Icon name="address-book" size={25} color="#fff" />
          </MenuItem>
          <MenuItem onPress={() => console.log('Calendar pressed')}>
            <Icon name="calendar" size={25} color="#fff" />
          </MenuItem>
          <MenuItem onPress={() => console.log('Envelope pressed')}>
            <Icon name="envelope" size={25} color="#fff" />
          </MenuItem>
          <MenuItem onPress={() => console.log('Info pressed')}>
            <Icon name="info" size={25} color="#fff" />
          </MenuItem>
          <MenuItem onPress={() => console.log('User pressed')}>
            <Icon name="user" size={25} color="#fff" />
          </MenuItem>
        </Menu>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 30,
    alignItems: 'center',
    justifyContent: 'flex-end',
    backgroundColor: '#F5FCFF'
  },
  btn: {
    padding: 20, backgroundColor: '#00ab6b', alignItems: 'center', justifyContent: 'center'
  },
  text: {
    color: 'white'
  }
});

AppRegistry.registerComponent('SideRevealMenuDev', () => SideRevealMenuDev);

Properties

| Prop | Description | Default | |---|---|---| |onShow|Method that runs when menu is showing.|empty| |onHide|Method that runs when menu is hiding.|empty| |borderRadius|Border radius of menu items. Keep in mind that if items are rendered together, only first and last items will have rounded corners.|0| |showActiveItem|Highlights pressed menu item with the activeItemColor color if set to true.|true| |showItemsSeparator|Renders a separator between each item.|true| |inactiveItemColor|Default background color of every item. Must be a valid hex value (won't work with named colors like 'red').|#33334C| |activeItemColor|Default background color of selected item. Must be a valid hex value (won't work with named colors like 'red').|#D64A73| |itemsDistribution|Defines how menu items are distributed. Similar to flex justifyContent.|'top', 'center', 'bottom', 'space-between', 'space-around'| |itemAnimDuration|Duration of animation of single menu item in miliseconds.|150| |itemAnimDelay|Delay of susequent menu item animations.|50| |itemAnimEasing|Allow to specify custom easing function. Must be a valid react native easing function.|Easing.inOut(Easing.ease)|