Can't find variable: navigate

android, javascript, react-native, reactjs

Solution

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

Problem

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

Original source

Related problems