@reactuniversal/drawer

A React Material Drawer component that works on the Web, Android, iOS, Electron, and anywhere else React Native is supported. This component is a part of the React Universal ecosystem of universal React and React Native components. Checkout the React Universal docs to learn more.

Storybook Demos

Installation

npm i @reactuniversal/drawer --save

Modal Drawer

Push Drawer

Permanent

Usage

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

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

export default class App extends Component {
  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
                onPress={() => 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
direction	Where should the drawer open: left or right	string	left
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