Implement drawer from native base in react native app

Question

I need to use drawer from native base into react native app for both android ios et android. Here is the link for native base http://nativebase.io/docs/v2.0.0/components#drawer and below you'll find my code :

import { Container, Header, Title, Content, Button, Icon, Left,  Body, Text } from 'native-base';
import { Drawer } from 'native-base';    
import SideBar from '../components/SideBar';   
class App extends Component {
        closeDrawer = () => {
        this._drawer._root.close();
    }
    openDrawer = () => {
        alert('open');
        this._drawer._root.open();
    }
    render() {   
        return (
            <Container>
                <Header style={{ backgroundColor: '#C0C0C0' }}>
                    <Left>
                        <Button transparent onPress={this.openDrawer.bind(this)}>
                            <Icon style={style.icon} name='menu'  />
                        </Button>    
                    </Left>
                    <Body style={style.body}>
                    <Title style={{ color: '#FFF'}}> title </Title>
                    </Body>   
                </Header>
                 <Content>
                     <Drawer
                    ref={(ref) => { this._drawer = ref; }}
                    content={<SideBar />} >
                    </Drawer>
                </Content>

            </Container>
        );
    }

the alert in the method open drawer is working fine, so i know it's not a problem in the button.

Was there no correct answer given? @user3521011 – FabricioG Apr 04 '19 at 20:42 — FabricioG, Apr 04 '19 at 20:42

score 7 · Answer 1 · answered Mar 17 '17 at 11:30

I believe you want to wrap everything in the drawer, like so

render() {   
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<SideBar />} >
        <Container>
            <Header style={{ backgroundColor: '#C0C0C0' }}>
                <Left>
                    <Button transparent onPress={this.openDrawer.bind(this)}>
                        <Icon style={style.icon} name='menu'  />
                    </Button>    
                </Left>
                <Body style={style.body}>
                <Title style={{ color: '#FFF'}}> title </Title>
                </Body>   
            </Header>
             <Content>
               // Your other content here
            </Content>
        </Container>
      </Drawer>
    );
}

Also, on your self-made sidebar component - make sure it has a backgroundColor. Set it to something like #F0F0F0 otherwise it ends up looking mighty strange.

Edit your question to include your sidebar and what you tried and I can try to help out — cssko, Mar 20 '17 at 10:47

Rishabh · Answer 2 · 2019-12-11T15:56:48.093

I am writing answer for anyone who is new to developing apps using react native, for this answer the important thing which I will be using is react-navigation.

First is the app.js where we declare the drawer and the other screens which includes a login screen without the drawer menu. The authLoading Screen is used to navigate the users to login or home screen based on the fact whether they are authenticated or not.

App.js

const HomeScreenRouter = createDrawerNavigator(
  {
    Home: { screen: HomeScreen }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);


const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: HomeScreenRouter,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

with the contentComponent we get the sliding menu in our home screen the Sidebar is a simple component which can have things as desired. Now for the homescreen we will have a button which will also allow users to open the menu from anywhere.

class HomeScreen extends React.Component {

    render() {
        return (

        <Container>
        <Header>
      <Left>
        <Button
          transparent
          onPress={() => this.props.navigation.openDrawer()}>
          <Icon name="menu" />
        </Button>
      </Left>
      <Body>
        <Title>Be-in</Title>
      </Body>
      <Right />
    </Header>
             <Content>

             </Content>
        </Container>

        );
    }

}
export default HomeScreen

versions used in this example are

"react": "16.6.1",
"react-native": "0.57.7",
"react-navigation": "^3.0.8",

I hope it will be helpful to anyone who is intending to implement a drawer and also enable navigation.

the motivation behind writing this answer is for anyone who wants to implement drawer functionality in their apps — Rishabh, Dec 11 '19 at 15:44

Implement drawer from native base in react native app

2 Answers2