React-native-side-drawer NPM

react-native-side-drawer

The following is taken from App.js in the example dir (blue is the safe area, which would need to be configured as seen in the example - taken on iPhone 13)

Status

Simple & lightweight side menu drawer.

Install

yarn add react-native-side-drawer

npm install react-native-side-drawer

Usage

The below is a simple snippet of usage. It is recommended to use this library in conjunction with safe-area-context-view see React advise on this as well.

For a (near) full example used with SafeAreaContextView please go to the example: App example with SafeAreaContextView

import React from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import MenuDrawer from 'react-native-side-drawer'

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false
    };
  }

  toggleOpen = () => {
    this.setState({ open: !this.state.open });
  };

  drawerContent = () => {
    return (
      <TouchableOpacity onPress={this.toggleOpen} style={styles.animatedBox}>
        <Text>Close</Text>
      </TouchableOpacity>
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MenuDrawer
          open={this.state.open}
          position={'left'}
          drawerContent={this.drawerContent()}
          drawerPercentage={45}
          animationTime={250}
          overlay={true}
          opacity={0.4}
        >
          <TouchableOpacity onPress={this.toggleOpen} style={styles.body}>
            <Text>Open</Text>
          </TouchableOpacity>
        </MenuDrawer>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    marginTop: 30,
    zIndex: 0
  },
  animatedBox: {
    flex: 1,
    backgroundColor: "#38C8EC",
    padding: 10
  },
  body: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#F04812'
  }
})

Props

Coming soon

iOS SafeArea support - Works with SafeAreaContextView with minor adjustments see: example App.js
Custom width of drawer and sliding time
Right and left drawer
Opacity fade of background screen