0_side-menu-with-react-native-drawer.md

Code Examples for my Blog Post: How to create a side-menu with react-native-drawer

drawerStyles.js

export default {
    drawer: {
        shadowColor: '#000000',
        shadowOpacity: 0.8,
        shadowRadius: 3,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
    },
    main: {paddingLeft: 3},
}

example-1.js

<Drawer>
  APPLICATION_CONTENT_GOES_HERE
</Drawer>

example-2.js

<Drawer
content={'CONTENT GOES HERE'}
styles={YOUR_CUSTOM_STYLES}>
  APPLICATION_CONTENT_GOES_HERE
</Drawer>

example-3.js

<Drawer
content={'CONTENT GOES HERE'}
styles={YOUR_CUSTOM_STYLES}
onClose={() => {
  //handle close event here
}}>
  APPLICATION_CONTENT_GOES_HERE
</Drawer>

example-4.js

<Drawer
open={this.state.drawerOpen}
content={'CONTENT GOES HERE'}
type="overlay"
tapToClose={true}
styles={YOUR_CUSTOM_STYLES}
openDrawerOffset={0.2}
panCloseMask={0.2}
closedDrawerOffset={-3}
onClose={() => {
  this.setState({drawerOpen: false});
}}
panOpenMask={0.80}
captureGestures="open"
acceptPan={false}>
  APPLICATION_CONTENT_GOES_HERE
</Drawer>

example-5.js

import React, { Component } from 'react';
import {Platform, TouchableHighlight, Text, View} from 'react-native';
import styles from './styles';
import drawerStyles from './drawerStyles';
import Drawer from 'react-native-drawer';

export default class App extends Component<{}> {
  constructor (props) {
    super(props);
    this.state = {drawerOpen: null};
  };

  renderSideMenuContent = () => {
    return (
      <View style={{height: '100%'}}>
        <Text style={styles.sideMenuContentItem}>
          This is the side menu
        </Text>
      </View>
    )
  }

  renderMainContent = () => {
    if (!this.state.drawerOpen) {
      return (
        <View>
          <Text style={styles.welcome}>Push to Open Side Menu</Text>
        </View>
      )
    } else {
      return (
        <Text style={styles.drawerOpen}>
          The side menu is open
        </Text>
      )
    }
  }

  render() {
    return (
      <Drawer
      open={this.state.drawerOpen}
      content={this.renderSideMenuContent()}
      type="overlay"
      tapToClose={true}
      styles={drawerStyles}
      openDrawerOffset={0.2}
      panCloseMask={0.2}
      closedDrawerOffset={-3}
      onClose={() => {
        this.setState({drawerOpen: false});
      }}
      panOpenMask={0.80}
      captureGestures="open"
      acceptPan={false}>
        <View style={styles.container}>
        <TouchableHighlight
          onPress={() => {
            this.setState({drawerOpen: true});
          }}>
          {this.renderMainContent()}
          </TouchableHighlight>
        </View>
      </Drawer>
    );
  }
}

package.json

{
  "name": "reactNativeDrawerExample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-drawer": "^2.5.0"
  },
  "devDependencies": {
    "babel-jest": "22.0.4",
    "babel-preset-react-native": "4.0.0",
    "jest": "22.0.4",
    "react-test-renderer": "16.0.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

styles.js

import { StyleSheet } from 'react-native';

export default StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        padding: 20,
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
        backgroundColor: '#aec6cf'
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
      sideMenuContentItem: {
        marginTop: 20,
        marginLeft: 20,
        marginRight: 20,
        borderWidth: 1,
        borderColor: '#fff',
        padding: 10,
        backgroundColor: '#557f90',
      }
});