Cannot read property 'navigate' of undefined - React Native Navigation

Question

I am currently working on a app which works with react native and I tried to make a flow using react-navigation working on this tutorial but I am having trouble at the point of running my project, I've done a lot of research and i just cant get to the solution, first for all I am using react-native-cli: 2.0.1 and react-native: 0.48.3, this is my code:

App.js:

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

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

    render() {
        console.log(this.props.navigation);
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Go to maps!</Text>
                <Button
                    onPress={() => navigate('Map')}
                    title="MAP"
                />
            </View>
        );
    }
}

export default App;

my Router.js

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

  import MapMarker from './MapMarker';
  import App from './App';

  export const UserStack = StackNavigator({
    ScreenMap: 
    {
        screen: MapMarker,
        navigationOptions:
        {
            title: "Map",
            header:null
        },
    },
    ScreenHome: 
    {
        screen: App,
        navigationOptions:
        {
            title: "Home",
            headerLeft:null
        },
    },
});

As you can see this is a pretty basic App which i just cant make work, this is a screenshot of my error on the simulator:

I would really really appreciate if you guys could help me with this. Thanks.

i think you are not passing "navigation" prop to your App component const { navigate } = this.props.navigation; is undefined because of this — blacksun
– blacksun, Commented Sep 22, 2017 at 14:41
how can pass navigation to my app component?, IK'm really new with react native @blacksun — miguelacio
– miguelacio, Commented Sep 22, 2017 at 17:28
where do you import App? <App navigation={your_navigation} /> — blacksun
– blacksun, Commented Sep 22, 2017 at 17:36
I dont think I am getting the things you say?. in my index.ios/android ive got this: import { AppRegistry } from 'react-native'; import App from './src/App'; AppRegistry.registerComponent('MAPS', () => App); @blacksun — miguelacio
– miguelacio, Commented Sep 22, 2017 at 18:27
I'm not using expo, i am using the react native with native code — miguelacio
– miguelacio, Commented Sep 22, 2017 at 18:29

Md Isfar Uddin · Accepted Answer · 2019-10-27 08:57:27Z

2

You should change the code onPress={() => navigate('Map')} to onPress={() => navigate('ScreenMap')} and ScreenHome should be the first screen then ScreenMap as you want to navigate from App to MapMarker. Or you can set initialRouteName: ScreenHome in the stacknavigator.

edited Oct 27, 2019 at 8:57

answered Sep 22, 2017 at 8:37

Md Isfar Uddin

73211 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

miguelacio Over a year ago

thanks but I am getting the same old error on "const { navigate } = this.props.navigation;", idk what to do, I am really new into react native

Md Isfar Uddin Over a year ago

can you tell me the index.android.js/index.ios.js code...your code is perfectly running in my pc...

pwcremin · Accepted Answer · 2017-09-23 20:04:33Z

0

You create your StackNavigator, but where do you use it? You should have something like

import React, { Component } from 'react';
import {
    AppRegistry,
    View
} from 'react-native';

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

    export default class MyApp extends Component {
      render() {
        return (
          <View style={{flex:1}}>
            <StackNavigator/>
          </View>
        );
      }
    }

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

Now that your StackNavigator is controlling what is shown, your App component will have navigation in its props. Note, you do not "pass" the navigation prop. This is handled for you.

answered Sep 23, 2017 at 20:04

pwcremin

7556 silver badges7 bronze badges

Collectives™ on Stack Overflow

Cannot read property 'navigate' of undefined - React Native Navigation

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related