CODEWITHSUNDEEP
reactjsreact-nativereact-navigationnative-base
Arvigeus
Arvigeus

Reputation: 373

Unable to open drawer in native-base

No errors in console, nothing to point out what is wrong.All examples seem outdated, maybe I am using wrong version(s)? I am using this as a reference.

Dependencies:

"react-native-scripts": "1.14.0",
"expo": "^27.0.1",
"native-base": "^2.7.2",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-navigation": "^2.12.1"

Code:

import React from "react";
import { createDrawerNavigator } from "react-navigation";
import { Text, Root, Container, Content, Header, Left, Button, Icon, Body, Title } from "native-base";
import StyleProvider from "theme/StyleProvider";

class HomeScreen extends React.Component {
  render() {
    return (
      <Container>
          <Header>
            <Left>
              <Button
                transparent
                onPress={() => this.props.navigation.navigate("DrawerOpen")}
              >
              <Icon name="menu" />
              </Button>
            </Left>
            <Body>
              <Title>HomeScreen</Title>
            </Body>
          </Header>
        <Content padder />
      </Container>
    );
  }
}

const SideBar = () => (
  <Container>
    <Content>
      <Text>Text</Text>
    </Content>
  </Container>
);

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

export default class App extends React.Component {
  render() {
    return (
      <StyleProvider>
        <Root>
          <HomeScreenRouter />
        </Root>
      </StyleProvider>
    );
  }
}

I don't know what else I can provide. Not sure if this is a bug, or I am doing things wrong.

Upvotes: 1

Views: 1197

Answers (1)

Mahdi Bashirpour
Mahdi Bashirpour

Reputation: 18803

You just use

this.props.navigation.openDrawer();

insted of

this.props.navigation.navigate("DrawerOpen")

This link can help you

Upvotes: 4

Related Questions