Can't find variable: navigate

Question

I am trying to navigate between two screen with the help of react-navigation. I am able to access navigate inside the render method as its scope is also inside that method.

Where should I declare so I can access it any method of this component. I am trying to access navigate inside the onPressButton method but it giving an error.

Can't find variable: navigate

import React, { Component } from "react";
import { View, Text, Image, Button, Alert, StyleSheet } from "react-native";
import styles from "./Styles";
import * as strings from "./Strings";
import RoundButton from "./RoundButton";
var DialogAndroid = require("react-native-dialogs");
import { StackNavigator } from "react-navigation";

export default class CreateMessageScreen extends Component {
  render() {  
    const { navigate } = this.props.navigation;

    return (
      <View style={styles.container}>
        <Image source={require("./img/create_message.png")} />
        <Text style={styles.textStyle}>{strings.create_message}</Text>

        <RoundButton
          textStyle={styles.roundTextStyle}
          buttonStyle={styles.roundButtonStyle}
          onPress={this.onPressButton}
        >
          CREATE MESSAGE
        </RoundButton>

      </View>
    );
  }

  onPressButton() {
    var options = {
      title: strings.app_name,
      content: strings.create_message,
      positiveText: strings.OK,
      onPositive: () => navigate("DashboardScreen")
    };
    var dialog = new DialogAndroid();
    dialog.set(options);
    dialog.show();
  }
}

@Ved I have this in `render` method `const { navigate } = this.props.navigation;` — N Sharma, May 01 '17 at 10:18
Yes. I know. Can you test what I asked. I will update answer in detail than. — Ved, May 01 '17 at 10:19
change const { navigation } = this.props, and , onPositive: () => navigation("DashboardScreen") — Ved, May 01 '17 at 10:20
@Ved Should I define `const { navigation } = this.props; ` in onPressButton() ? — N Sharma, May 01 '17 at 10:22

score 5 · Accepted Answer · answered May 01 '17 at 10:28

You need to move const { navigate } = this.props.navigation; into the onPressButton function instead of the render function (don't forget to bind the function so that this has the correct value):

export default class CreateMessageScreen extends Component {
  constructor() {
    super();

    // need to bind `this` to access props in handler
    this.onPressButton = this.onPressButton.bind(this);
  }

  render() {  
    return (
      <View style={styles.container}>
        <Image source={require("./img/create_message.png")} />
        <Text style={styles.textStyle}>{strings.create_message}</Text>

        <RoundButton
          textStyle={styles.roundTextStyle}
          buttonStyle={styles.roundButtonStyle}
          onPress={this.onPressButton}
        >
          CREATE MESSAGE
        </RoundButton>

      </View>
    );
  }

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

    var options = {
      title: strings.app_name,
      content: strings.create_message,
      positiveText: strings.OK,
      onPositive: () => navigate("DashboardScreen")
    };
    var dialog = new DialogAndroid();
    dialog.set(options);
    dialog.show();
  }
}

score 2 · Answer 2 · answered May 01 '17 at 10:25

Object destructuring work like this,

Destructuring objects:

const obj = { first: 'Jane', last: 'Doe' };
const {first: f, last: l} = obj;
    // f = 'Jane'; l = 'Doe'

// {prop} is short for {prop: prop}
const {first, last} = obj;
    // first = 'Jane'; last = 'Doe'

In Your Case:

1. const { navigation:navigate } = this.props;

or:

2. const {navigation} = this.props;





export default class CreateMessageScreen extends Component {
  render() {  
 const { navigation:navigate } = this.props;

    return (
      <View style={styles.container}>
        <Image source={require("./img/create_message.png")} />
        <Text style={styles.textStyle}>{strings.create_message}</Text>

        <RoundButton
          textStyle={styles.roundTextStyle}
          buttonStyle={styles.roundButtonStyle}
          onPress={this.onPressButton}
        >
          CREATE MESSAGE
        </RoundButton>

      </View>
    );
  }



    onPressButton() {
  const { navigation:navigate } = this.props;
        var options = {
          title: strings.app_name,
          content: strings.create_message,
          positiveText: strings.OK,
          onPositive: () => navigate("DashboardScreen")
        };
        var dialog = new DialogAndroid();
        dialog.set(options);
        dialog.show();
      }
    }

Same error I tried this but getting an error "undefined is not an object(evaluating this.props.navigation) — N Sharma, May 01 '17 at 10:32
@Williams change to onPress={this.onPressButton.bind(this)} and test. — Ved, May 01 '17 at 10:35

Shubham Khatri · Answer 3 · 2017-05-01T10:32:35.460

2

That happens because you are not destructuring it from the props as you have done in your render() function

onPressButton = () => {
    var {navigate} = this.props.navigation;
    var options = {
      title: strings.app_name,
      content: strings.create_message,
      positiveText: strings.OK,
      onPositive: () => navigate("DashboardScreen")
    };
    var dialog = new DialogAndroid();
    dialog.set(options);
    dialog.show();
  }

edited May 01 '17 at 10:32

answered May 01 '17 at 10:25

Shubham Khatri

270,417
55
406
400

2

I tried this but getting an error "undefined is not an object(evaluating `this.props.navigation`) – N Sharma May 01 '17 at 10:29
Also you need to bind you onPressButton function to access the props – Shubham Khatri May 01 '17 at 10:32
How to call this onPressButton now – N Sharma May 01 '17 at 10:35
As I added in the answer, binding can be acieved by using arrow function or in the constructor. I used the arrow function approach like `onPressButton = () => {` – Shubham Khatri May 01 '17 at 10:36
Yes I see. How I can call this from `RoundButton` ` onPressButton} >` – N Sharma May 01 '17 at 10:37
Teh way you have used it in our question will work, However you can also call it like ` this.onPressButton()} >` which is also another method of binding – Shubham Khatri May 01 '17 at 10:39
Check this answer `http://stackoverflow.com/questions/41113798/react-event-handler-bindthis-fat-arrow-or-no-fat-arrow/41113862#41113862` – Shubham Khatri May 01 '17 at 10:41

score 1 · Answer 4 · answered Jul 31 '22 at 01:56

1

For those looking for the hooks version in react-navigation v6

import {useNavigation} from '@react-navigation/native

then inside the components call the hook

const someFunction = () => {
const navigate = useNavigation() 


}

answered Jul 31 '22 at 01:56

JM210

21
2

Can't find variable: navigate

4 Answers4

Linked