0

Getting errors when navigating one page to other page in React Native.

error:

undefined is not an object(evaluating 'this,props.navigation.navigate')

code: 

import { StackNavigator,NavigationActions } from "react-navigation";
 const Navigation = StackNavigator({
   Home : {
    screen : Home
  },
})
export default class App extends React.Component {
  submit = () => {
    this.props.navigation.navigate('Home');

 }
  render() {
    return (
      <View style={styles.container}>
        <Text>Enter Log</Text>
        <TextInput style={styles.input}
          multiline={true}
          underlineColorAndroid="transparent"
          placeholder="Enter Log"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handlePassword} />
        <TouchableOpacity style={styles.submitButton} onPress={() => submit } >     
                  <Text style={styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>
      </View>
    );
  }
}
}
ɢʀᴜɴᴛ
  • 32,025
  • 15
  • 116
  • 110
Manish Mishra
  • 31
  • 1
  • 3

2 Answers2

1

You have to bind your method:

import { StackNavigator,NavigationActions } from "react-navigation";
 const Navigation = StackNavigator({
   Home : {
    screen : Home
  },
})
export default class App extends React.Component {

  constructor(props) {
      super(props);

      this.submit = this.submit.bind(this);
  }


  render() {
    return (
      <View style={styles.container}>
        <Text>Enter Log</Text>
        <TextInput style={styles.input}
          multiline={true}
          underlineColorAndroid="transparent"
          placeholder="Enter Log"
          placeholderTextColor="#9a73ef"
          autoCapitalize="none"
          onChangeText={this.handlePassword} />
        <TouchableOpacity style={styles.submitButton} onPress={this.submit} >     
                  <Text style={styles.submitButtonText}> Submit </Text>
        </TouchableOpacity>
      </View>
    );
  }

  submit()  {
      this.props.navigation.navigate('Home');
  }

}

Explanation: Binding context when calling ES6 method. How to access object from within method called as callback?

Toni Spöck
  • 154
  • 1
  • 4
0

  1. Try changing your onPress value to this:

    onPress={this.submit}

  2. Also, I don't see you importing your Home component to where you assign it as a screen.

Eduard
  • 8,437
  • 10
  • 42
  • 64
  • gives error after change: Cannot find variable:submit used link:https://facebook.github.io/react-native/docs/tutorial.html – Manish Mishra Aug 12 '17 at 04:53
  • Have you made any other changes, apart from what I have proposed? Try leaving just "{submit}" without "this." and without "() =>". The reason behind that is that you don't need to call the submit function, simply pass it. – Eduard Aug 12 '17 at 10:32