Is the component the screen of a navigator as seen in the example above in https://reactnavigation.org/docs/intro#Introducing-Stack-Navigator ?

@matthamil
Sorry I can't understand you clearly but if you mean using StackNavigator part, It's code is like below:

const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});

Can you post your full code?

I meet the same problem, how do you fix it?

@IcyCC Can you post your code?

I write these in index.android.js

const HomeNav = StackNavigator(
    {

        HomeMain: {
            screen: HomePage,
            navigationOptions: {
                headerLeft: null
            }
        },
    }
);
const MovieNav = StackNavigator(
    {

        MovieMain: {
            screen: MoviePage,
            navigationOptions: {
                headerLeft: null
            }
        },
        Choose:{
            screen: MovieChoose
        },
        Card:{
            screen:MovieCard
        }
    }
);

const Ticket = TabNavigator({
        Main: { screen: HomeNav },
        Movie:{screen:MovieNav},
        Social:{screen:SocialPage},
        Setting:{screen:SettingPage},

    },
    {tabBarPosition:'bottom'}
)
AppRegistry.registerComponent('Ticket', () => Ticket);

And when I write in MovieCard.js

export default class MovieCard extends Component {
    constructor(props)
    {
        super(props);

    }

    render() {
        const { navigate } = this.props.navigation;
        return (
            <TouchableOpacity >
            <View >
            <Image style={style.bgImage} source={{uri:this.props.imgUrl}} />
                <Text style={style.tittle}>{this.props.tittle}</Text>
                <Text style={style.detail}>{this.props.detail}</Text>
            </View>
            </TouchableOpacity>
        );
    }
}

the error happen . And I put const { navigate } = this.props.navigation; in other component there no error

@IcyCC Do you have a repo with the entire source code? It's hard to tell from what you posted to see where the bug is. It could be an issue with incorrect import names.

like this ?https://github.com/IcyCC/Ticket-app

@IcyCC You are trying to render a MovieCard component without explicitly passing navigation down as a prop. https://github.com/IcyCC/Ticket-app/blob/master/components/MoviePage/MovieContainer.js#L35

navigation is only accessible in a component if it is the screen of a navigator (or passed via props from a screen component). If you are trying to render the component in the render method of another component, you won't magically have access to the navigation prop unless you explicitly pass it as a prop in the render method.

The MovieCard component that is rendered by the navigator will have the navigation prop. If you try to render MovieCard in another component, it will not have this prop unless you give it one.

Thank you !!! I get it!You did me a big favor！

I'm having the same issue with the sample code from: https://reactnavigation.org/docs/intro#Introducing-Stack-Navigator

I basically copied and pasted the code into my editor (with the small difference that here I export the default HomeScreen and removed the AppRegistry). When I open it on Expo, I get the error: "undefined is not an object (evaluating 'this.props.navigation.navigate)'".

Any help? It's a bit frustrating that the example from the documentation does not work :)

Thank you in advance!
Fred

import React from 'react';
import {
AppRegistry,
Button,
Text,
View,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class ChatScreen extends React.Component {
static navigationOptions = {
title: 'Chat with Lucy',
};
render() {
return (

Chat with Lucy

);
}
}

export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};

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

Hello, Chat App!
<Button
onPress={() => navigate('Chat')}
title="Chat with Lucy"
/>

);
}

}

const TheApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});

Getting the same error with the example from the documentation here: https://facebook.github.io/react-native/docs/navigation.html

`import React from 'react';
import { Alert, AppRegistry, Text, TextInput, View } from 'react-native';

import {
StackNavigator,
} from 'react-navigation';

export default class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigate('Profile', { name: 'Jane' })
}
/>
);
}
}

class ProfileScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return (
Here we are

);

}
}

const App = StackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
`

Any idea what might be wrong? I will be happy to send a PR to update the documentation if we can manage to understand the problem here.

It looks like you are exporting your screen components. You should be exporting the navigator. If you render the screen components, you will not have access to navigation as a prop because the navigator did not render them. If you render the navigator, it will pass navigation as a prop down to any children screen components. This is the same issue that was brought up above :)

Thanks @matthamil ! Is there any up-to-date documentation on that?

It is documented here: https://reactnavigation.org/docs/navigators/navigation-prop#Screen-Navigation-Prop, although this isn't the first time someone has encountered this problem. If you know a way to word the documentation better to prevent this from happening for other users, feel free to open a PR to help everyone out :)

Sure thing! It's a bit frustrating that the Hello World example in the Getting Started does not work :)
I will check the link you sent, try to reproduce it here and send a PR with updated documentation.

Thank you so much!
---q

@matthamil Having the same problem - can you give more explicit instructions on how to pass navigation as a prop? Thanks! :)

@pmuldoon86 I managed to set my navigation correctly after watching this screencast:
https://hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4

It shows some basic tab + stack navigation hints that's exactly what I was looking for.

If you're writing a normal screen, you have to "export" it in the end of the code to make sure it can be navigated to:

import React, {Component} from 'react';

import { ScrollView, Text } from 'react-native';

`import React, {Component} from 'react';

import { ScrollView, Text } from 'react-native';

class Tools extends Component {

render() {
return (

Hello!

);
}
}

export default Tools;
`

@pmuldoon86 Within your screen component, you have access to this.props.navigation. You can pass the prop down to child components like so:

render() {
  return <MyOtherComponent navigation={this.props.navigation}/>
}

This is no different from how you would pass props down in React because that's exactly what it is :)

I'm going to close this issue for now. This seems to be a fairly common issue, so I will see how the documentation describes how navigation works as a prop. Feel free to submit a PR to improve our documentation if you find it lacking. 👍

I am assuming that one of these solutions resolves your problem @payamka. If your issue is not resolved, please comment or open another issue.

Thanks!

If using Expo, you need something like this: export default SimpleApp
not AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

@matthamil

Hi Matt, I am hoping you can help me. I have been working on the same problem the past three days, trying everything. It seems like you have been able to help people solve this problem in the past. Somehow "navigation" is not being passed to my "navigated" components. I have tried putting the StackNavigator code everywhere - own file, like it is now, in App.js, in the files of one of my components. Nothing has worked. Here is a link to my repository.. https://github.com/rscharfer/mobileflashcards

Do you think you can help? The StackNavigator code is in stack.js currently.

I was having the same issue. It was solved by changing onPress={() => this.navigation.navigate(data)} to onPress={() => this.props.navigation.navigate(data)}.

Never use stack navigation in 'index.android.js' file
if we intend to use navigation in 'index.android.js'. this line execute ' this.props.navigation'before the component is registered in App registry. that is the reason we get

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

Try this Code your Navigation will work perfectly
Code for navigation
// index.android.js file
import React, { Component } from 'react';
import { Platform,StyleSheet, Text,AppRegistry,StatusBar,View } from 'react-native';
import MainActivity from './src/components/MainActivity';

type Props = {};
class HelloUser extends Component {
render() { return ( < MainActivity / >);}
}
AppRegistry.registerComponent('CommunityApp', () => HelloUser);

// MainActivity.js
import React, { Component} from 'react';
import { AppRegistry, WebView,TouchableOpacity, StyleSheet, FlatList, Platform, Image, Text, View, Button } from 'react-native';
import {StackNavigator} from 'react-navigation';
import ThirdActivity from './ThirdActivity';
import pin from '../utils/pin.png';

class MainActivity extends Component {
static navigationOptions = { title: 'Welcome', };

FunctionToOpenSecondActivity = () => {this.props.navigation.navigate('Second');}
FunctionToOpenThirdActivity = () => {this.props.navigation.navigate('Third');}
render() {
return (
< View style = { stylesMainActivity.Container } >
< View style = {stylesMainActivity.TopContainer} >
< Image style = { stylesMainActivity.picture} source = {pin} />
< /View>
< View style = {stylesMainActivity.MiddleContainer} >
< Image style = { stylesMainActivity.picture} source = {pin} />
< /View>

< View style = {stylesMainActivity.BottomContainer} >
  <TouchableOpacity style={stylesMainActivity.BottomContainer } onPress={
   this.FunctionToOpenSecondActivity}>
   < Image style = { stylesMainActivity.picture} source = {pin} />
   < Image style = { stylesMainActivity.picture} source = {pin} />
  </TouchableOpacity>
  < /View>

  < Button onPress = { this.FunctionToOpenThirdActivity}
  title = 'Click Here To Open Third Activity' / >
  < /View>
);

}
}

Undefined is not an object error message occuring in line
appRegistery.registerComponent('albums', () => App);