Can't find variable: Navigate with react-navigation

Question

i am having this simple code in the same index.android.js file:

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View,
  Button
} from 'react-native';
import {StackNavigator} from 'react-navigation';

// First Page
class FirstPage extends Component {
  static navigationOptions = {
    title: 'Welcome',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello First Page</Text>
        <Button 
          onPress={() => navigate('SecondPage')}
          title="Go to second page"
        />
      </View>
    );
  }
}

// Second Page
class SecondPage extends Component {
  static navigationOptions = {
    title: 'Second Page',
  };

  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello Second Page</Text>
        <Button 
          onPress={() => navigate('FirstPage')}
          title="Go to first page"
        />
      </View>
    );
  }
}


const SimpleApp = StackNavigator({
  FirstPage: { screen: FirstPage},
  SecondPage: { screen: SecondPage},
});

AppRegistry.registerComponent('MoviesTickets_YCH', () => FirstPage);

All i want is to navigate between the screens, but i have the error message: can't find variable: navigate, i have no clue why it happens, any idea how?

Thanks for your help

Possible duplicate of Can't find variable: navigate

Shubham Khatri
– Shubham Khatri

2017-06-24 08:51:43 +00:00
Commented Jun 24, 2017 at 8:51 — Shubham Khatri
– Shubham Khatri, Commented Jun 24, 2017 at 8:51

Rafik · Accepted Answer · 2017-06-24 08:40:36Z

5

In the render method add the following:

const {navigate} =this.props.navigation;

Your render should look like this

render(){
const {navigate} =this.props.navigation;
return (
  .... ) ;
}

in each component you use navigate. for more infos, follow the documentation, it's pretty easy. reactnavigation

answered Jun 24, 2017 at 8:40

Rafik

4551 gold badge4 silver badges14 bronze badges

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

4 Comments

dtjmsy Over a year ago

ahhh i went through the doc but miss this : const { navigate } = this.props.navigation; bad for me, thanks

dtjmsy Over a year ago

i add it just below the render as described, now i am having another error message: undefined is not an object ( evaluating 'this.props.navigation.navigate')

Rafik Over a year ago

Change this: AppRegistry.registerComponent('MoviesTickets_YCH', () => FirstPage); to this AppRegistry.registerComponent('MoviesTickets_YCH', () => SimpleApp);

dtjmsy Over a year ago

Thanks very much, that' s it, i have my head away this time, cheers

Andrii Starusiev · Accepted Answer · 2017-06-24 08:40:54Z

2

If i'm clear, react native docs say navigate it's an action creator and you can get acces to it in this.props.navigation;

const { navigate } = this.props.navigation; in render.

answered Jun 24, 2017 at 8:40

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

Comments

Keshav Gera · Accepted Answer · 2018-12-31 07:14:51Z

0

remove node_modules and package-lock.json
npm install
npm install --save react-navigation
npm install --save react-native-gesture-handler
react-native link

answered Dec 31, 2018 at 7:14

Keshav Gera

11.3k1 gold badge78 silver badges56 bronze badges

Collectives™ on Stack Overflow

Can't find variable: Navigate with react-navigation

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related