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

Created on 1 Mar 2017 · 20Comments · Source: GeekyAnts/NativeBase

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>
        );
    }
}

Source

cjmling

Most helpful comment

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;

ketankulkarni on 28 Jul 2017

👍22 ❤13 🎉5

All 20 comments

The docs say: 'Note: You need to create your own SideBar component and import it.'

chiichuy on 9 Mar 2017

Actually it has been added later. Thanks @cjmling for reporting! Closing this now.

sankhadeeproy007 on 9 Mar 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 28 Apr 2017

👍2

Example here

sankhadeeproy007 on 28 Apr 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.

jeremyrempel on 17 Jun 2017

👍26

Please send me link for react base drawer

rsp8055 on 19 Jul 2017

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;

ketankulkarni on 28 Jul 2017

👍22 ❤13 🎉5

@ketankulkarni hey!!! thank you so much for showing me this!!! I cannot swipe from left to right, and open the drawer!!

Edit:
Actually, it opens!! but in kitchen sink app, navigation while swiping left to right opens smoothly, wherein with mine, I have to exactly have to push from the extreme left!

senthilbalajiganesan on 31 Aug 2017

This is fine, I tried it. But I added a list on the sidebar and tried to navigate...thats where my problems began. Kindly help.

githeyj on 26 Sep 2017

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

import styles from './styles';

import DrawerHeader from '../components/drawer/header';
import Passbook from '../components/drawer/passbook';
import Profile from '../components/drawer/profile';
import Settings from '../components/drawer/settings';

import {Actions} from 'react-native-router-flux';

import {
  Content,
  List,
  ListItem,
  Text,
  Icon,
  Left,
  Body,
  Right,
  Thumbnail
} from 'native-base';


export default class Sidebar extends Component {
  render() {
    return (
          <Content style={{backgroundColor:'#FFFFFF'}}>
                <DrawerHeader/>
         <List>
              <ListItem icon onPress={()=>{Actions.passbook()}}>
                <Left>
                  <Icon name="paper" />
                </Left>
                <Body >
                  <Text>Passbook</Text>
                </Body>
              </ListItem>
              <ListItem icon onPress={()=>{Actions.profile()}}>
                <Left>
                  <Icon name="person" />
                </Left>
                <Body>
                  <Text>Profile</Text>
                </Body>
              </ListItem>
              <ListItem icon onPress={()=>{Actions.settings()}}>
                <Left>
                  <Icon name="settings" />
                </Left>
                <Body>
                  <Text>Settings</Text>
                </Body>
              </ListItem>
         </List>

          </Content>
    );
  }
}

module.exports = Sidebar;

ketankulkarni on 27 Sep 2017

I am not getting an error due to onPress={()=>{Actions.profile()}}
In your case .profile() is a method.
I want to navigate to another page, say Profile.js which is not a method.
Note that, I have not used scenes anywhere. I am navigating using StackNavigator

githeyj on 28 Sep 2017

Find the example at https://github.com/vijaychouhan-rails/AllInOne

vijaychouhan-rails on 26 Oct 2017

{
headerMode: 'none' ,
drawerPosition: 'right',
contentComponent: props => />
}

Arshiamidos on 26 Feb 2018

how to close drawer whenever any option is selected from drawer component

varkrishna on 24 Mar 2018

this.props.navigation.navigate("closeDrawer")
@varkrishna

Arshiamidos on 24 Mar 2018

this error is coming
undefined is not an object (evaluating '_this2.props.navigation.navigate')
@Arshiamidos

varkrishna on 24 Mar 2018

Which library are you using for navigation?
react-native-router-flux or react-navigation?

In react-native-router-flux: you can just make
onPress={ () => Action.drawerClose() }

and in react-navigation :
props.navigation.navigate('DrawerClose') or NavigationActions.navigate('DrawerClose')

if still, you are facing issue then share some code snippet.

rsp8055 on 24 Mar 2018

I am using React native router flux for navigation , and drawer component is imported from Native base. In Main view i have used drawer like -
<Drawer
ref={(ref) => { this.drawer = ref; }}
content={<CustomDrawer navigator={this.navigator} />}
onClose={() => this.closeDrawer()} >
// View code
</Drawer>

and CustomDrawer is drawer component .

In main View two functions are \:
closeDrawer = () => {
this.drawer._root.close()
};
openDrawer = () => {
this.drawer._root.open()
};

and i want to close drawer from Drawer Component
Help @rsp8055

varkrishna on 25 Mar 2018

You are using native-base drawer which supports the react-navigation library but you are using react-native-router-flux for navigation. Instead, you may use drawer API itself by react-native-router-flux.

here is the documentation:
https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#drawer-drawer-or-scene-drawer
here is the code(example):
https://github.com/aksonov/react-native-router-flux/blob/master/Example/components/drawer/DrawerContent.js

Here you can find the better solution.

rsp8055 on 25 Mar 2018

NativeBase-KitchenSink has demo app with RNRF as well https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/RNRF