undefined is not an object (evaluating '_this2.props.navigation.navigate') - React Native

Question

I really can't get my navigation to work.I am using react-navigation (StackNavigator).

This is my structure: http://i.imgur.com/IKExx9g.png

My navigation works in HomeScreen.js: I navigate from HomeScreen.js to NewScreen.js without problems.

App.js:

import React from 'react';
import {
    StatusBar, AppRegistry
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import {HomeScreen} from './screens/HomeScreen';
import AboutScreen from "./screens/AboutScreen";
import NewScreen from "./screens/NewScreen";
import CalendarScreen from "./screens/CalendarScreen";
import AddAgendaScreen from "./screens/AddAgendaScreen";

const SimpleApp = StackNavigator({
    Home: {screen: HomeScreen},
    About: {screen: AboutScreen},
    New: {screen: NewScreen},
    Calendar: {screen: CalendarScreen},
    AddAgenda: {screen: AddAgendaScreen}
});

console.disableYellowBox = true;
StatusBar.setHidden(true);
export default SimpleApp; // Export root navigator as the root component

Homescreen.js (working):

export class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => {
    const {state, navigate} = navigation;
    return {
      title: 'eXopera'
    };
  };

  constructor() {
    super();
    this.state = {
      address: [],
      refreshing: false,
      page: 1,
      lastPage: 1,
      loading: true,
      listOpacity: 0,
    };
  }

  render() {   
    return (
      <ScrollableTabView style={{backgroundColor: '#fff'}} renderTabBar={() => <DefaultTabBar  />}>
        <View style={{flex: 1, backgroundColor: '#fff'}} tabLabel="Adressen">
          <Button color="#33cd5f" title="NEW"
            onPress={() => this.props.navigation.navigate('New') }/>
        </View>
      </ScrollableTabView>
    );
  }
}

Then there is another component called CalendarScreen.js (where I also try to navigate to NewScreen.js), even if I completely copy and paste the code from HomeScreen.js, I am unable to navigate. It always gives me "undefined is not an object (evaluating '_this2.props.navigation.navigate')".

I really don't know what I can do now.. Have been struggling with this for hours.

Thanks in advance!

Answer 1

Apart from react-navigation, I was also using react-native-scrollable-tab-view.

I have solved it by passing the navigation props through the tab navigation:

<CalendarScreen navigation={this.props.navigation} tabLabel="Agenda"/>

Then you can access it in the other components as this.props.navigation as well.

Answer 2

I changed my method from renderHeader(){ ... } to

renderHeader = () => {
    const title= 'Sign Up';
    return (
      <View style={{
        padding: 20,
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between'
      }}>
        <Icon
          onPress={() => {
                           this.props.navigation.navigate('find');
                         }
                  }
          name='arrow-back'
          type='MaterialIcons'
          color='white'
        />
      </View>
    );
} 

it solved this problem.

use renderHeader = () => {} instead of using renderHeader(){} is critically important in solving my issue.

Answer 3

It sounds like your new screen is not registered with the app navigator and so doesn't have the navigation props. Your constructor should be like this:

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  New: { screen: NewScreen }, // Add this
});