props.navigation undefined

[vvasiloud]

Hello,
I am trying React native for the first time and I want to implement the Basic Tutorial into a new react native project but I get an "this.props.navigation" undefined error when opening the main page.

It seems that this.props doesn't have a navigation method.

In main app page:
const App = StackNavigator({ Signup: { screen: SignupScreen }, });

In page Render:
const { navigate } = this.props.navigation;
<Text onPress={() => navigate('Signup')} Sign Up</Text>

What am I may miss in this case?

[ChristianTucker]

I'm having the same problem, I went over the tutorial several times to make sure I didn't miss anything. Was wanting to give react-navigation a try since it's so popular and can't even get through the basic tutorial.

I'm on react-native 0.43 and I'm on master, so that may have to do with the problem.

[zcsongor]

Same problem as well. Did you find any solution for this? Using the latest version: 0.43.3

[DarthRumata]

Same problem. react-navigation@1.0.0-beta.7

[DarthRumata]

Now it works. Problem was in callback for button
onPress={this.openList}>
It wasn't binded to this.

[codemonkey1337]

Same problem here (react-native 0.43.3)

[grabbou]

Can anyone please post a reproduction?

[gogeta95]

Had same problem, fixed it be going through this: https://reactnavigation.org/docs/intro/#Introducing-Stack-Navigator

in the last few lines:

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen }, //Default entry screen
});

AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

You have to use your Navigator assigned variable i.e SimpleApp as registry component, and first screen will be the screen added on top while creating StackNavigator.

[cif]

I am able to reproduce this issue.

import EditProfile from './EditProfile'
class Me extends Component {
  render() {
    return (
      <View style={styles.container}>
        <MeNavbar
          gotoView={this.props.gotoView}
          onEditPress={() => console.log(this.props)}
        />
      </View>
    )
  }
}
// THE ABOVE CONSOLE OUPUTS ONLY: 
// {"navigation":{"state":{"routeName":"Base","key":"Init"}}}
// navigate method and any other expected properties of the navigation prop are undefined


const Navigator = StackNavigator(
  {
    Base: { screen: Me },
    Edit: { screen: EditProfile },
  },
  {
    // headerMode:'none',
  },
)

export default Navigator

I also tried adding AppRegistry.registerComponent('Navigator', () => Navigator) as per @gogeta95 but this did not change the result

[coreform]

@gogeta95 's solution fixed it for me, to be clearer:

const WhateverYouWantToCallMe = StackNavigator({
  Home: { screen: HomeScreen }, //Default entry screen
});

AppRegistry.registerComponent('SimpleApp', () => WhateverYouWantToCallMe);

...and SimpleApp is (has to be) the name of your App.

[ooransoy]

Well, I found my own fix, if you are using this.props.navigation in the constructor, just move that to the componentWillMount() function. In the constructor of a component, this.props is undefined. You can trust me, because console.debug() does not lie. Well, that is if you were using this.props.navigation in the constructor. Otherwise, I do not have a solution
.

[regitasfrk97]

@nolcay can you give me the example of your code with componentWillMount()?

[ooransoy]

@regitasfrk97 I don't remember doing it, but I seem to have abandoned that solution and just made a function that fetches stuff from the nav, if this.props.navigation is not undefined. Otherwise, it just returns an empty function/array/string.

data = (key) => {
    return ("navigation" in this.props ? this.props.navigation.state.params.data[key] : [])
}

Or, in the render you can just return an empty View if navigation doesn't exist, because if it doesn't it is not being shown on the screen anyways.

[danijelsamec]

This worked for me.

Replace this: onPress={this.handlePress} with onPress={() => this.handlePress() }.

[MehediH]

Is there any fix for this issue yet? I am still getting the same undefined error despite doing exactly as noted by the starter docs.

[dekm]

I am getting this error as well and there is no this.props.navigation when I do a log. All my other nav functions work correctly like menu and tabs. I have this setup with redux also. I think my issue might be related to using Expo as there is some extra setup you have to do for redux. Is there any work around for this?

[ianrandmckenzie]

I did a straight up copy/paste of this guide up to and including the "Adding a new screen" section here:
https://reactnavigation.org/docs/intro/

I am getting this error and am completely stumped. I made my app with create-react-native-app

[oseifrimpong]

Hey, guys, have anyone found the solution for this issue. I made my app with create-react-native-app. I have been on this error for 4 days.

[gowthamkumar7]

It seems not working. The issue is still open. No one is assigned on this issue for the past six months.

[kelset]

I'll have a look at it this weekend, sorry guys but we have a huge workload and we are starting now to get back on track.

[frantisek-dobrota]

Same problem here, cannot even get through the tutorial 👎

[kelset]

Hey guys, you were right there was a mistake in the code in that page - I've submitted a PR and I'm quite sure it will be merged soon 😉

In the meantime, basically you need to change export default const SimpleApp = StackNavigator({ to export const SimpleApp = StackNavigator({ if you go via the standard react-native route.

[GuillotJessica]

@kelset still navigate of undefined

[kelset]

@GuillotJessica weird.

Can you tell me if you followed the react-native init or the create-react-native-app route?

Can you copy/paste your code so I can have a look at it?

[GuillotJessica]

Hello I'm using react-native init [image: Images intégrées 1] App/Components/Navigation/Navigation.js

import { StackNavigator } from 'react-navigation'; import BaseM2SScreen from "../BaseM2S"; import BonsPlansScreen from "../BonsPlansScreen"; import Login from "../Login"; export const SimpleApp = StackNavigator({ BonsPlansScreen: { screen: BonsPlansScreen }, Login: { screen: Login } }); Footer.js

import React, { Component } from 'react'; import { Container, Header, Content, Footer, FooterTab, Button, Icon, Text, Badge } from 'native-base'; import { SimpleApp } from '../Navigation/Navigation'; export default class FooterM2S extends Component { render() { const { navigate } = this.props.navigation; return ( <Footer> <FooterTab customStyleProp vertical="true" > <Button badge vertical onPress={alert(this.props)}> <Badge><Text>2</Text></Badge> <Icon name="store" /> <Text>Commerces</Text> </Button> <Button vertical onPress={() => navigate('BonsPlansScreen')}> <Icon name="euro-symbol" /> <Text>Bons Plans</Text> </Button> <Button active badge vertical disabled> <Badge><Text>51</Text></Badge> <Icon active name="Ajouter-au-panier" /> <Text>Fidelité</Text> </Button> <Button vertical disabled> <Icon name="list" /> <Text>Actualités</Text> </Button> <Button vertical onPress={() => navigate('Login')}>> <Icon name="person" /> <Text>Profil</Text> </Button> </FooterTab> </Footer> ); }} BonsPlansScreen .js

…

import React, { Component } from "react"; import { Text } from 'react-native'; import { StyleProvider, Container, Content, Header } from "native-base"; import getTheme from "../../native-base-theme/components"; import material from '../../native-base-theme/variables/material.js'; import HeaderM2S from "./Header/HeaderM2S"; import Filter from './Filter/Filter'; import FooterM2S from "./Footer/FooterM2S"; export default class BonsPlansScreen extends Component { render() { return ( <StyleProvider style={getTheme(material)}> <Container> <Header> <Body> <Text>BonsPlansScreen</Text> </Body> </Header> <FooterM2S/> </Container> </StyleProvider> ); } } Thank you for helping me out @GuillotJessica <https://github.com/guillotjessica> weird. Can you tell me if you followed the react-native init or the create-react-native-app route? Can you copy/paste your code so I can have a look at it?

[kelset]

Well, this code seems not the one from the tutorial 😶

Anyway, your issue I think it's related to the fact that in Footer.js you are trying to use the navigation props but the component is not "attached" to the StackNavigator, only Login and BonsPlansScreen are.

--
EDIT: fix is live! https://reactnavigation.org/docs/intro/

[GuillotJessica]

But I put the const navigate= this.prop.navigate onPress for each the component i want to navigate into what do you mean by attach the footer? Thanks again <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Garanti sans virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> 2017-10-03 16:05 GMT+02:00 Gant Laborde <notifications@github.com>:

…

Closed #832 <#832> via #2679 <#2679>. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#832 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AUK_HUmO55l_JkJxuc4a9OPC-s177IM9ks5soj8-gaJpZM4MpnbR> .

[jackson-sandland]

The issue here, as mentioned above, is that the context of the function calling this.props is not bound to the component. To resolve, you can try the following:

class BindMe extends Component {
  constructor(props){
    super(props)
    this.bindThisFunction = this.bindThisFunction.bind(this)
  }
}

This should now show defined for the navigation props!

[Ishjot]

I have tried to bind the function calling this.props and am still running into a similar issue.

   constructor(props) {
        super(props)

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

    _navigateTo(pageName) {
        this.props.navigation.navigate(pageName)
    }

And I am calling the function later like this...
onPress={() => this._navigateTo('PageToNavigateTo')}

And I am seeing
undefined is not an object (evaluating this.props.navigation.navigate)

[rscharfer]

@Ishjot Did you figure out how to solve the problem? I have the exact same issue.

[Ishjot]

@rscharfer yes, you need to define a StackNavigator that contains the two pages that you are trying to navigate between.

[NasarudinAbdulShukor]

@Ishjot Can you elaborate on how did you define the StackNavigator? is it on main.js / App.js where people usually define the navigator(stack, drawer, tab) for their pages or inside the function onPress?

[Ishjot]

@NasarudinAbdulShukor this should help - https://facebook.github.io/react-native/docs/navigation.html

[connorwaslo]

@Ishjot I still get "TypeError: undefined is not an object (evaluating 'this.props.navigation.navigate')" as an error even following the tutorial you just linked.

[randyqiu]

You should pass the navigation prop to the screen component of navigator YOURSELF. For example:

import PlayerView from 'player-view';
const PlayerScreen = ({ navigation }) => (<PlayerView navigation={navigation}/>);

Then you will have this.props.navigation in your component.

[cglacet]

flow-bin 0.56.0
react 16.0.0
react-navigation 1.0.0-beta.19

If you manually add a type for the Props objects that your Component is supposed to handle then it will remove the error (at least it does for me)

type Props = { navigation: Function }
class HomeScreen extends Component<Props> {
    render() {
      const { navigate } = this.props.navigation; 
      ...
   }
}

This only help ignoring the problem until a real solution is found, but it's still decent if the only thing you are doing with props is calling the navigation function.

Nevertheless I guess there is a way to retrieve the actual type of Props that should be used here, but I can't find it and it seems that most people really don't care and just ignore this error. This doesn't change much in the end because types are really just here to help you 😛.

PS, here the definition I have for React.Component:

declare class React$Component<Props, State = void>

[hugoh59]

I'm still experiencing the same issue, is this thing still not fixed? 🤒

[DiegoFelipe]

I'm facing the same problem I still can't understand how to do it, I got a component with a button that needs to call another screen, I'm importing StackNavigator from react-navigation and when I try to call another screen with 'this.props.navigation.navigate('Quadros')' it says that it's not an object. I could understand, by reading this issue that my component can't see my navigation props, but I haven't figured out how to pass the navigation props in order to be able to call the screen from my custom component. It's actually a screen that render a component inside drawer and this component inside drawer call another component <- this is the one that needs to call another screen.

[GuillotJessica]

show us us your code with the navigator settings

[DiegoFelipe]

I could made it work, like I said I had a 'home screen' that called a 'sidebar' custom component that called a nother custom component called webservice that called another component WSBody, to make it work I did the following:

In Home screen:

I called the sidebar component this way:

<Sidebar nav = {this.props.navigation}/>

In my Sidebar component:

constructor(props) {
    super(props);
    this.state = {};
    const nav = this.props.nav; 
  }

still in sidebar I called the webservice component this way:

<WebService nav = {this.props.nav}/>

I did the same thing that I've done in sidebar in webservice, finally in WSbody I could use:

this.props.nav.navigate('MyScreen');

I hope it help other peoples with the same issue.

[GuillotJessica]

I was thinking of something like this

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

from documentation website
In this particular architecture, you may use the navigation props and go from Home and Profile and vice versa

[GuillotJessica]

I was thinking of something like this

const ModalStack = StackNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Profile: {
    path: 'people/:name',
    screen: MyProfileScreen,
  },
});

from documentation website
In this particular architecture, you may use the navigation props and go from Home and Profile and vice versa

[GuillotJessica]

but if your are using different kind of navigation like tab then you may nest them together

[EricWiener]

You need to pass the navigation prop down to the component (it doesn't just magically get it). So if you are trying to navigate from a child component, you would need to do something like:

//parent Component
export default class Parent extends Component{
  //...
  render(){
    const {navigate} = this.props.navigation; //recieves prop from StackNavigator
    return(
      //...
      <Child navigate={navigation}>
      //...
    );
  }
}

//child Component
export default class Child extends Component{
  //...
  render(){
    const {navigate} = this.props.navigation; //this is the navigation prop passed from the prop
    return(
      //...
      <Button onPress={()=>navigate('Home')}> 
      //...
    );
  }
}

[uanthwal]

@EricWiener : I tried your solution but no luck. May be I am missing something. Please help me out.
Here's my code:
LoginScreen.js

export default class LoginScreen extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		return (
			<SignupSection navigate={this.props.navigation} />
		);
	}
}

SignupSection.js

export default class SignupSection extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		const {navigate} = this.props.navigation; -- tried printing this it shows the data but on button click (added below: Create account), it says cannot find variable navigate
		return(
			<TouchableOpacity style={styles.button}
			onPress={this.props.navigation.navigate('signupScreen')} >
				{
					<Text style={styles.text}>Create account</Text>
				}
			</TouchableOpacity>
		);
	}
}

AppNavigation.js

// login stack
const LoginStack = StackNavigator({
	loginScreen: { screen: LoginScreen },
	signupScreen: { screen: SignupScreen }
}, {
	headerMode: 'float',
	navigationOptions: {
	headerStyle: {backgroundColor: '#E73536'},
	headerTintColor: 'white'
}
})

const PrimaryNav = StackNavigator({
	loginStack: { screen: LoginStack }
	}, {
	// Default config for all screens
	headerMode: 'none',
	title: 'Main',
	initialRouteName: 'loginStack',
	transitionConfig: noTransitionConfig
})

export default PrimaryNav

One thing I have noticed is if I move the sign up screen content to Loginscreen then the navigation is working but want to know the solution where we have nested navigations.

[brentvatne]

hi there. please create a new issue and follow the issue template if this problem persists for you. thank you!