react-native-material-drawer

React Native Material Drawer for iOS, Android, Web, Electron, and other platforms. If you need more cross-platform material components, check out Material Bread.

Storybook Demos

Modal Drawer

Push Drawer

Permanent

Table of Contents

• Installation
• Usage
• Props

Installation

npm install react-native-material-drawer --save

Usage

import React, { Component } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { Drawer } from 'react-native-material-drawer';

const styles = {
  container: {
    width: '100%',
  },
  body: {
    backgroundColor: '#eee',
  },
};

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isOpen: false
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Drawer
          open={this.state.isOpen}
          drawerContent={<View><Text>Drawer Content</Text></View>}
          onClose={() => this.setState({ isOpen: false })}
          animationTime={250}>
          <View style={styles.body}>
             <View style={{ marginTop: 20, alignItems: 'center', width: '100%', flex: 1 }}>
              <Text style={{ marginBottom: 20 }}>
                This is a page
              </Text>
              <TouchableOpacity onTouch={() => this.setState({ isOpen: !this.state.isOpen })}>
                <Text>Toggle</Text>
              </TouchableOpacity>
            </View>
          </View>
        </Drawer>
      </View>
    );
  }
}

Props

| Name | Description | Type | Default | |-----------------------|----------------------------------------------------------------------------|--------|--------------| | animationTime | How long the drawer animation should be, in ms | number | 200 | | appbar | Render appbar above drawer and page content for clipping purposes | node | | | contentContainerStyle | Styles wrapper around page content | object | | | drawerContent | Components displayed inside the drawer | node | | | drawerStyle | Styles drawer | object | | | fullHeight | Drawer takes up full height of the page so conent is not scrolled | bool | false | | onClose | Callback when clicking outside of drawer | func | | | pageHeight | Override calculated pageHeight, useful for demos as shown | number | ScreenHeight | | pageWidth | Override calculated pageWidth, useful pages that do not take up full space | number | ScreenWidth | | position | Position of drawer | string | absolute | | open | Whether drawer is shown or hidden | bool | false | | style | Styles container element | object | | | scrim | Whether scrim is shown | bool | true | | scrimColor | Color of scrim | object | black | | scrimOpacity | The ending opacity for the scim | number | .4 | | type | Determines the type of drawer from modal, push, and permanenent | string | modal | | width | Specific drawer width in pixels, will override widthPercentage | number | 240 | | widthPercentage | Percentage of pageWidth the drawer should take up | 0-1 | .40 |