Drawer Button is not working

sa63 commented 7 years ago

I can't get why Button in the HomeScreen is not opening a Drawer. Button shows but nothing happens when you click on it. Here is a code, I did all needed imports while its still not working. Are there any examples of this approach which will work?

HomeDrawer.js

import React from 'react';
import { DrawerNavigator } from 'react-navigation';
import HomeScreen from '../screens/HomeScreen';
import FoodScreen from '../screens/FoodScreen';
import RestaurantsScreen from '../screens/RestaurantsScreen';
import ProfileScreen from '../screens/ProfileScreen';
import FavoritesScreen from '../screens/FavoritesScreen';
import SettingsScreen from '../screens/SettingsScreen';
import SideBar from './SideBar';

const HomeDrawer = DrawerNavigator({
  home: { screen: HomeScreen },
  food: { screen: FoodScreen },
  restaurants: { screen: RestaurantsScreen},
  profile: { screen: ProfileScreen },
  settings: { screen: SettingsScreen }
}, {
  contentComponent: (props) => <SideBar {...props} />
});

export default HomeDrawer;

HomeScreen.js

import React from "react";
import { StatusBar } from "react-native";
import {
  Button,
  Text,
  Container,
  Card,
  CardItem,
  Body,
  Content,
  Header,
  Title,
  Left,
  Icon,
  Right
} from "native-base";

export default 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>
          <Right />
        </Header>
      </Container>
    );
  }
}

How to make that button open a drawer?

Jasbir23 commented 7 years ago

Hi @sa63, Did u try to log this.props.navigation inside your HomeScreen.js component? We can have some insight with what it returns. Also, if you have nested different kinds of routers in your project. It might not be receiving the correct navigation prop. Things look fine with the two snippets you provided above.

davidstoneham commented 6 years ago

Just a heads up if anyone else runs into this issue, I'm using nested navigators (a drawer navigator inside a stack navigator) and I was able to get the drawer button responding by calling this.props.navigation.openDrawer() instead of this.props.navigation.navigate("DrawerOpen")

hedza06 commented 5 years ago

@davidstoneham not working for me.

hedza06 commented 5 years ago

@Jasbir23 did you have any solution for this? I have console log this.props.navigation but I got undefined. When I try to console log this.props only I got empty Object.

GeekyAnts / native-base-react-navigation-stack-navigator

Drawer Button is not working #3