undefined is not an object (evaluating 'this.props.navigation.navigate') (common ques) (CRNA)

Question

I am using CRNA v0.44 . I am making a two screen signup . I am on 1st screen ,now I want to goto second screen using react-navigation.

But getting error:

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

I have explored the internet and found need to pass prop to button but not able to figuring out how?

SignupForm.js:

 import {
  StackNavigator,
} from 'react-navigation'
import SignupForm2 from './SignupForm2'
const App = StackNavigator({
  SignupForm2: { screen: SignupForm2 },
});
export default class SignupForm extends Component {

render () {
 const { navigate } = this.props.navigation
return (
 <Button
        title="Go to Jane's profile"
        onPress={() =>
          navigate('SignupForm2', { name: 'SignupForm2' })
        }
      />
  )
  }
}

Are you passing navigation prop to the component anywhere? – Tim Rijavec Jun 16 '17 at 05:59 — Tim Rijavec, Jun 16 '17 at 05:59

score 1 · Answer 1 · answered Jun 16 '17 at 08:09

I think your rendering SignupForm in your AppRegistry.registerComponent, instead try the below code. You need to also include SignupForm in the StackNavigator and render variable App in your AppRegistry.registerComponent.

import {
 StackNavigator,
} from 'react-navigation'

import SignupForm2 from './SignupForm2'

const App = StackNavigator({
  SignupForm: { screen: SignupForm }
  SignupForm2: { screen: SignupForm2 },
});

export default class SignupForm extends Component {

render () {
const { navigate } = this.props.navigation
  return (
    <Button
      title="Go to Jane's profile"
      onPress={() =>
       navigate('SignupForm2', { name: 'SignupForm2' })
      }
    />
  )
 }
}

AppRegistry.registerComponent('yourApp', () => App);

score 0 · Answer 2 · answered Jun 16 '17 at 02:54

0

I guess the first SignupForm has to be part of the navigator as well, and then tell the navigator that the initial screen is SignupForm.

answered Jun 16 '17 at 02:54

Armando Pérez Marqués

5,661
4
28
45

tried that too...can you check it via remote access ? – YaSh Chaudhary Jun 16 '17 at 03:44

undefined is not an object (evaluating 'this.props.navigation.navigate') (common ques) (CRNA)

2 Answers2