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](https://stackoverflow.com/questions/43717456/cant-find-variable-navigate) — Shubham Khatri, Jun 24 '17 at 08:51

score 5 · Accepted Answer · answered Jun 24 '17 at 08:40

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 '17 at 08:40

Rafik

395
1
2
12

ahhh i went through the doc but miss this : const { navigate } = this.props.navigation; bad for me, thanks – dtjmsy Jun 24 '17 at 08:44
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') – dtjmsy Jun 24 '17 at 08:50
Change this: AppRegistry.registerComponent('MoviesTickets_YCH', () => FirstPage); to this AppRegistry.registerComponent('MoviesTickets_YCH', () => SimpleApp); – Rafik Jun 24 '17 at 08:51
Thanks very much, that' s it, i have my head away this time, cheers – dtjmsy Jun 24 '17 at 08:55

score 2 · Answer 2 · answered Jun 24 '17 at 08:40

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 '17 at 08:40

Andrii Starusiev

7,564
2
28
37

score 0 · Answer 3 · answered Dec 31 '18 at 07:14

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 '18 at 07:14

Keshav Gera

10,807
1
75
53

Can't find variable: Navigate with react-navigation

3 Answers3