Unable to find variable: navigate

Question

I am trying to navigate between two screens using react-navigation . I can access navigate inside the render method, since its scope is also inside this method.

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

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

Answer 1

You need to move const { navigate } = this.props.navigation; to the onPressButton function instead of the render function (don't forget the bind 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(); } } 

Answer 2

Destructuring an object works as follows:

Objects of destruction:

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

Answer 3

This is because you do not destroy it from props, as was 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(); }