Cannot read property 'navigate' of Undefined in React Navigation

Question

i'm React Native newbie. What i'm trying to do is added react navigation to my login page where user can click a button and navigate to the sign up page but i'm getting an error Cannot read property 'navigate' of Undefined. I've already searched the solution over an internet but no luck. This So does not help me - React Navigation - cannot read property 'navigate' of undefined and same with others .

Here is my code

index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

export default class tapak extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }
}

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

Answer 1

Render the StackNavigator in your index.ios.js and move the button to the Login component:

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

class tapak extends Component {
  render() {
    return (
      <Stacks />
    );
  }
}

Login.js :

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.buttonPress = this.buttonPress.bind(this);
  }

  buttonPress() {
    console.log('called');
    this.props.navigation.navigate('Signup');
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={{color: 'blue'}} onPress={this.buttonPress}>sign up</Text>
      </View>
    );
  }
}

Working example here.

Answer 2

Write this code to index.ios.js

import React, { Component } from 'react'; 
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {StackNavigator} from 'react-navigation';
import Login from './src/screens/Login';
import Signup from './src/screens/Signup';

const Stacks = StackNavigator({
    Login: {
      screen: Login
    },
    Signup:{
      screen: Signup
    }
});

Login.js

import React ,{Component} from 'react';
import {
  Text, View , Button,Image,
} from 'react-native';

export default class HomeScreen extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text
          onPress={() => navigate('Signup')}
        > SignUp</Text>
      </View>
    );
  }
}

Hope this help you.