@reactuniversal/drawer v0.0.2

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