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
    }
});

Where are you using "tapak"? It doesn't look like its in your Stack — QoP
– QoP, Commented Jun 1, 2017 at 10:45

Harry B · Accepted Answer · 2019-08-27 13:48:11Z

5

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.

edited Aug 27, 2019 at 13:48

Harry B

3,0011 gold badge28 silver badges47 bronze badges

answered Jun 2, 2017 at 4:29

Nguyên Hoàng

1,0739 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nidhi Patel · Accepted Answer · 2017-06-01 11:17:59Z

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.

edited Jun 1, 2017 at 11:17

answered Jun 1, 2017 at 10:35

Nidhi Patel

1,29211 silver badges17 bronze badges

7 Comments

digit Over a year ago

Hi, thanks for help. It's not working, same error. Hmm

Nidhi Patel Over a year ago

try this : onPress={() => this.props.navigation.navigate('Signup')}

Nidhi Patel Over a year ago

remove constructor from component

Nidhi Patel Over a year ago

remove export default class tapak extends Component { } because your index.ios.js file display stack

digit Over a year ago

Does that mean my index.ios must be in the Stacks in order for it to working?

|

Kim · Accepted Answer · 2017-06-01 11:21:35Z

0

I think you need to include navigationOptions, for example:

class MyComponent extends React.Component {
  static navigationOptions = {
    title: 'Great',
    // other configurations
  }

  render() {
    return (
      // your view
    )
  }
}

Also yu need to make sure you use AppRegistry.registerComponent('glfm', () => Stacks); rather than AppRegistry.registerComponent('glfm', () => tapak);

edited Jun 1, 2017 at 11:21

answered Jun 1, 2017 at 11:09

Kim

5,5157 gold badges42 silver badges65 bronze badges

1 Comment

digit Over a year ago

Hi, thanks for the help. It's not working, same error :-(.

kunal pal · Accepted Answer · 2018-09-14 06:45:39Z

0

The only answer to this question is to just put const { navigate } = this.props.navigation in your render() function and then you can use it in any component that you need

For Example

render() {
const { navigate } = this.props.navigation;
 return (
  <View>
    <Text>This is the home screen of the app</Text>
    <Button
      onPress={() => navigate('Profile', { name: 'Brent' })}
      title="Go to Brent's profile"
    />
  </View>
);
}

Please read this doc for https://reactnavigation.org/docs/en/navigation-prop.html

answered Sep 14, 2018 at 6:45

kunal pal

3242 silver badges9 bronze badges

Comments

deva26 · Accepted Answer · 2023-04-01 15:19:28Z

0

I had the same issue, we must know that stack.navigator provides a default prop called 'navigation' to it's children. So, make sure you provide that default prop as a prop to further children as well. Now the function navigation will not be undefined.

answered Apr 1, 2023 at 15:19

deva26

11 bronze badge

Collectives™ on Stack Overflow

Cannot read property 'navigate' of Undefined in React Navigation

5 Answers 5

Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

7 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related