Implement drawer from native base in react native app

android ios react-native native-base

12,592

Solution 1

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.

Solution 2

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.

12,592

Author by

user3521011

Updated on July 04, 2022

Comments

user3521011 almost 2 years

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.

user3521011 about 7 years

Hi, I did that but it didn't solve my problem .. any idea ?
cssko about 7 years

Edit your question to include your sidebar and what you tried and I can try to help out
FabricioG about 5 years

But you are not using NativeBase drawer @Rishabh
Rishabh over 4 years

the motivation behind writing this answer is for anyone who wants to implement drawer functionality in their apps