React-native-navigation: Error: undefined is not an object (evaluating '_this.props.navigator.toggleDrawer')

Created on 3 Jun 2018 · 3Comments · Source: wix/react-native-navigation

Issue Description

Hi, every time I try to run the following code, I get this error: undefined is not an object (evaluating '_this.props.navigator.toggleDrawer')

export class Navbar extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <Container style={styles.background}>
                <Header>
                    <Left>
                        <Button
                            transparent
                            onPress={() => this.onPressButton()}>
                            <Icon name='menu' />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Home</Title>
                    </Body>
                    <Right />
                </Header>
            </Container >
        );
    }
    onPressButton = () => {
        this.props.navigator.toggleDrawer({
            side: 'left',
            to: 'missing'
        })
    }
}

And yes, I did register it:

import { Home } from './Home';
import { Navbar } from './Navbar';

import { Navigation } from 'react-native-navigation';

export function registerScreens() {
    Navigation.registerComponent('test.Home', () => Home);
    Navigation.registerComponent('test.Navbar', () => Navbar);
};

Steps to Reproduce / Code Snippets / Screenshots

./index.js

import { Navigation } from 'react-native-navigation';
import { registerScreens } from './screens/index';

registerScreens();
let application = screen: {
                        screen: 'test.Home',
                        title: 'Home'
                    },
                    drawer: {
                        left: {
                            screen: 'test.Sidebar',
                            fixedWidth: 500,
                        }
                    }
let app = Navigation.startSingleScreenApp(application);

./screens/index.js

import { Home } from './Home';
import { Sidebar } from './Sidebar';
import { Navbar } from './Navbar';

import { Navigation } from 'react-native-navigation';

export function registerScreens() {
    Navigation.registerComponent('test.Home', () => Home);
    Navigation.registerComponent('test.Navbar', () => Navbar);
    Navigation.registerComponent('test.Sidebar', () => Sidebar);
};

./screens/Home

import React, { Component } from 'react';
import { Container, Header, Left, Button, Icon, Right, Body, Title, Text } from 'native-base';

export class Home extends Component {
  constructor() {
    super();
  }

  static navigationOptions = {
    title: 'Home',
  };

  render() {
    return (
      <Container style={styles.background}>
        <Text>Hi</Text>
        <Button onPress={() => this.onPressButton()}> <Text> Click me</Text>
      </Container>
    );
  }
}

./screens/Navbar

import React, { Component } from 'react';
import { FlatList, View, Image } from 'react-native';
import styles from '../styles.js';
import { Container, Header, Left, Button, Icon, Right, Body, Title, Text } from 'native-base';

export class Navbar extends Component {
    constructor() {
        super();
    }

    render() {
        return (
            <Container style={styles.background}>
                <Header>
                    <Left>
                        <Button
                            transparent
                            onPress={() => this.onPressButton()}>
                            <Icon name='menu' />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Home</Title>
                    </Body>
                    <Right />
                </Header>
            </Container >
        );
    }
    onPressButton = () => {
        this.props.navigator.toggleDrawer({
            side: 'left',
            to: 'missing'
        })
    }
}

This is where the issue is, this.props.navigator.toggleDrawer()
Thing is, this.props.navigator is undefined in Navbar.js, yet its defined in Home.js

Environment

React Native Navigation version: 1.1.397
React Native version: 0.52.2
Platform(s) (iOS, Android, or both?): Android
Device info (Simulator/Device? OS version? Debug/Release?): Simulator, Nexus 5 API 23

questiostack overflow

Source

Chipped1

All 3 comments

We use the issue tracker exclusively for bug reports and feature requests. This issue appears to be a general usage or support question. Instead, please ask a question on Stack Overflow with the react-native-navigation tag.