<commit_before>## Drawer

Drawer for both iOS and Android.<br />
Drawer can be the perfect option to provide navigation options. <br />

![Preview ios Drawer](https://docs.nativebase.io/docs/assets/ios/components/drawer.png)
![Preview android Drawer](https://docs.nativebase.io/docs/assets/android/components/drawer.png)

**Syntax**

<pre class="line-numbers"><code class="language-jsx">import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
  render() {
    closeDrawer = () => {
      this.drawer._root.close()
    };
    openDrawer = () => {
      this.drawer._root.open()
    };
    return (
      &lt;Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={&lt;SideBar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()} >
      // Main View
      &lt;/Drawer>
    );
  }
}</code></pre><br />

Note: You need to create your own SideBar component and import it.<commit_msg>Added table for drawer component<commit_after>## Drawer

Drawer for both iOS and Android.<br />
Drawer can be the perfect option to provide navigation options. <br />

![Preview ios Drawer](https://docs.nativebase.io/docs/assets/ios/components/drawer.png)
![Preview android Drawer](https://docs.nativebase.io/docs/assets/android/components/drawer.png)

**Syntax**

<pre class="line-numbers"><code class="language-jsx">import React, { Component } from 'react';
import { Drawer } from 'native-base';
import SideBar from './yourPathToSideBar';
export default class DrawerExample extends Component {
  render() {
    closeDrawer = () => {
      this.drawer._root.close()
    };
    openDrawer = () => {
      this.drawer._root.open()
    };
    return (
      &lt;Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={&lt;SideBar navigator={this.navigator} />}
        onClose={() => this.closeDrawer()} >
      // Main View
      &lt;/Drawer>
    );
  }
}</code></pre><br />

Note: You need to create your own SideBar component and import it.

**Configuration**<br />
    <table class = "table table-bordered">
        <thead>
            <tr>
                <th>Property</th>
                <th>Default</th>
                <th>Option</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>type</td>
                <td>overlay</td>
                <td>-</td>
                <td>Type of drawer</td>
            </tr>
            <tr>
                <td>tapToClose</td>
                <td>true</td>
                <td>boolean</td>
                <td>Close drawer on tap</td>
            </tr>
             <tr>
                <td>openDrawerOffset</td>
                <td>0.2</td>
                <td>number</td>
                <td>Define drawer's margin when open</td>
            </tr>
             <tr>
                <td>panCloseMask</td>
                <td>0.2</td>
                <td>number</td>
                <td>Defines the screen width for the start of pan close action</td>
            </tr>
             <tr>
                <td>closedDrawerOffset</td>
                <td>0</td>
                <td>number</td>
                <td>-</td>
            </tr>
            <tr>
                <td>tweenHandler</td>
                <td>null</td>
                <td>Function</td>
                <td>-</td>
            </tr>
        </tbody>
    </table><br />

{'fraction_non_alphanumeric': 0.15459212778094694, 'fraction_numerical': 0.001426126640045636, 'mean_word_length': 1.7745253164556962, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 109, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5416570', 'n_tokens_mistral': 1089, 'n_tokens_neox': 1054, 'n_words': 228}