evaluating ( this.props.navigator ) Undefined is not an object

Question

I'm getting this error even though i'm passing in the navigator porp properly.

MySetup is in this way : Main navigator Page -> FirstView (onBtnPress) -> Details

I'm getting the error when i'm calling this.navigator.push in the firstView page.

Main File:

import React, { Component, PropTypes } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator
} from 'react-native';

class app extends Component{

    constructor(props) {
        super(props); 
    }


   navigatorRenderScene(route, navigator) {
        return <route.component navigator={navigator}/>

  }
     configureScene() {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }


    render() {

      return (
     <Navigator
        style={styles.container}
        initialRoute= {{component: MainMapView}}
        renderScene={this.navigatorRenderScene}/>
      );
    }
}


const styles = StyleSheet.create({
  container: { flex: 1, flexDirection: 'column', padding: 20 }
});

AppRegistry.registerComponent('app', () => app);

First Component:

    <ActionButton buttonColor="rgba(30,144,255,1)" style={styles.fabIcon}
                  onPress={this.fabPress}>
    </ActionButton>


  fabPress() {
  this.props.navigator.push({
      component : DetaislView
    });
  }

The error occurs on fabPress.

Any ideas on what i'm doing wrong?

score 8 · Accepted Answer · edited Jun 20 '20 at 09:12

try this in your FirstComponent.js:

class FirstComponent extends Component {

    constructor(props) {
        super(props); 
        this.fabPress = this.fabPress.bind(this);
    }

    // ... rest of the code remains the same

Why we had to do this?

Back in time when we were using React.createClass (ES5), class methods were automatically bound to the class. But when we started to extend (ES6 classes), we need to bind the methods explicitly to the class env.

fabPress being passed as an event's callback function, it is executed in another env outside the class; hence the this will be coming from the scope of execution env. But we need this of our class to access this.props.navigator :)

no Change. sam error. btw.. what does this code do? – Akash Gutha Nov 27 '16 at 03:45 — Akash Gutha, Nov 27 '16 at 03:45

score 4 · Answer 2 · edited May 23 '17 at 11:47

4

Just in case if anyone is interested in why this doesn't work even if you are having the function inside the class.

The function isn't binded to the class if declared as shown in the following.

  theFunctionName() {
         // your code
  }

The function is binded to the class if it is declared with the following syntax.

  theFunctionName = () => {
         // your code
  }

thus you can omitt the bind(this) code.

reference taken from here

Please make sure you have the necessary presets. Since the arrow function is highly experimental feature (as of this period in time)

edited May 23 '17 at 11:47

Community

1
1

answered Nov 27 '16 at 04:26

Akash Gutha

601
8
21

**Caveat:** Defining class methods as [Arrow Functions](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) is a highly experimental feature. Make sure you've the necessary presets. – yadhu Nov 27 '16 at 04:32

score 0 · Answer 3 · answered Apr 28 '17 at 00:36

0

For my case I passed in the navigator:

  onPress={this.fabPress(navigator)}

  fabPress(navigator) {
    navigator.push({component: DetaislView});
  }

answered Apr 28 '17 at 00:36

RainCast

4,134
7
33
47

what is component: DetaislView? – shweta c Sep 21 '17 at 07:03

evaluating ( this.props.navigator ) Undefined is not an object

3 Answers3

Why we had to do this?