React Native navigation: undefined is not an object

Question

I try to implement a navigation in React Native with react-navigation according to this tutorial, but I am facing the following error when launching the app:

undefined is not an object (Evaluating 'this.props.navigation.navigate') render index.android.js:17:12

My index.android.js:

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



export default class Abc extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Button
        title="Go to List"
        onPress={() =>
          navigate('Liste')
        }
      />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
export class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to List"
        onPress={() =>
          navigate('Profile')
        }
      />
    );
  }
}
export class Liste extends React.Component {
  static navigationOptions = {
    title: 'Liste',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Liste"
      />
    );
  }
}
const App = StackNavigator({
  Home: { screen: HomeScreen },
  Liste: { screen: Liste },
});
AppRegistry.registerComponent('Abc', () => Abc);

Do you have any suggestions? Thank you!

@KhalilKhalaf That's irrelevant: he already had const { navigate } = this.props.navigation; — Danny
– Danny, Commented Aug 4, 2021 at 13:12

dotcomXY · Accepted Answer · 2017-07-25 02:43:04Z

2

I believe what you wanted to do is to register your App component in your AppRegistry instead of the Abc component.

The reason that you ran into this undefined is not an object (Evaluating 'this.props.navigation.navigate') is because the props.navigation is not available in your Abc component. If you look closely to the bottom of your code, you have:

const App = StackNavigator({
  Home: { screen: HomeScreen },
  Liste: { screen: Liste },
});

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

So you have created a StackNavigator component, but you are not registering this component but instead you are registering the Abc component in the AppRegistry, and since Abc component is not any of the screen under your StackNavigator, it won't have access to the this.props.navigation thus you would run into the exception.

answered Jul 25, 2017 at 2:43

dotcomXY

1,5961 gold badge16 silver badges18 bronze badges

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

Comments

gaback · Accepted Answer · 2017-07-24 22:01:30Z

1

You don't have Profile screen.
If you want to go to Liste screen from HomeScreen use:

onPress={() => navigate('Liste')}

If you want to go to Profile screen then you need to make Profile Screen and add it on StackNavigator, example:

export class Profile extends React.Component {
    static navigationOptions = {
        title: 'Profile',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <Button
                title="Profile"
            />
        );
    }
}
const App = StackNavigator({
    Home: { screen: HomeScreen },
    Liste: { screen: Liste },
    Profile: {screen: Profile},
});

answered Jul 24, 2017 at 22:01

gaback

6381 gold badge6 silver badges13 bronze badges

Comments

Laurence · Accepted Answer · 2020-04-21 16:46:55Z

0

almost 3 years since the original question was asked. I had the same problem and landed on this page.

react-navigation is v5 now. The problem I had was because 'navigation' was not passing to the child component.

After a bit more research I fixed the problem using this solution from here.

I need to pass the props to child component like this.

<GoToButton navigation={props.navigation} />

https://reactnavigation.org/docs/connecting-navigation-prop

Hopefully this helps to new comers like me.

answered Apr 21, 2020 at 16:46

Laurence

7,85322 gold badges84 silver badges129 bronze badges

Collectives™ on Stack Overflow

React Native navigation: undefined is not an object

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related