NativeBase: [Docs] Drawer sample won't work as there is no Sidebar import.

Sidebar component are being used but wasn’t imported. Is sidebar templates available and ready to import ? Should it be mentioned ?

import React, { Component } from 'react';
import { Drawer } from 'native-base';

export default class DrawerExample extends Component {
    render() {
      closeDrawer = () => {
        this._drawer._root.close()
      };
      openDrawer = () => {
        this._drawer._root.open()
      };
        return (
            <Drawer
              ref={(ref) => { this._drawer = ref; }}
              content={<SideBar navigator={this._navigator} />}
              onClose={() => this.closeDrawer()}
            >
            // Main View
          </Drawer>
        );
    }
}

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (3 by maintainers)

Most upvoted comments

sidebar.js

import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

import styles from './styles';
import {Content} from 'native-base';

export default class Sidebar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
            <Text>Drawer</Text>
          </Content>
    );
  }
}

module.exports = Sidebar;

Main.js


import React, { Component } from 'react';
import {
  AppRegistry,
  Text
} from 'react-native';

import {Drawer} from 'native-base';

import AppHeader from './appHeader';
import AppBody from './appBody';
import AppFooter from './appFooter';

import Sidebar from './sidebar';

export default class Main extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {
    return (
              <Drawer
                ref={(ref) => { this.drawer = ref; }}
                content={<Sidebar/>}
                onClose={() => this.closeDrawer()} >

                <AppHeader
                    openDrawer={this.openDrawer.bind(this)}
                />
                <AppBody/>
                </Drawer>
    );
  }
}

module.exports = Main;

AppHeader.js


import React, { Component } from 'react';
import {
  Text,
} from 'react-native';

import {Header,Left,Button,Icon,Right,Body,Title} from 'native-base';

export default class AppHeader extends Component {
  render() {
    return (
      <Header>
       <Left>
       <Button transparent
              onPress={()=>this.props.openDrawer()}
       >
         <Icon name='menu' />
       </Button>
       </Left>
       <Body>
         <Title>SDCC Wallet</Title>
       </Body>
       <Right>
         <Button transparent>
           <Icon name='bulb' />
         </Button>
       </Right>
     </Header>
    );
  }
}

module.exports = AppHeader;

+40

ketankulkarni on Jul 28, 2017

I think improving the documentation to show a complete working example would be helpful including hooking into the appropriate button. I’m having a lot of trouble getting the component working inside my application.

+26

jeremyrempel on Jun 17, 2017

Please what does the Sidebar Template looks like?? and how do we invoke the open and close drawer??? I think it will be more appropriate if a link is provided as to what the Sidebar Component might look like…

LordRahl90 on Apr 28, 2017