Geek Answers Handbook

React Native - navigation issue "undefined is not an object (this.props.navigation.navigate)"

Im following this guide https://reactnavigation.org/docs/intro/ and I am having some problems.

I use the Expo Client application to render my application every time, not a simulator / emulator.

my code is shown below.

Initially, I had the "SimpleApp" constant defined above "ChatScreen", but this gave me the following error:

The chat route should announce the screen. For example: ... etc.

so I moved the SimpleApp declaration just above "AppRegistry" and that meant a new error

Element type is invalid: expected string ..... You probably forgot to export your component..etc

in the textbook, the keywords "export by default" were not added to any component that, I think, may be related to the fact that I run it in the Expo application? so I added “default export” to “HomeScreen” and the error went away.

The new error that I cannot remove (based on the code below) is as follows:

undefined is not an object (rating "this.props.navigation.navigate")

I can’t get rid of it if I don’t remove the "{}" around the "const {navigate}", but it will break the navigation when I press the button on the main screen

import React from 'react';
import {AppRegistry,Text,Button} 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 (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat')}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}



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

const SimpleApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});
AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
+6
source share
2 answers

Expo , Expo , , : View Button native-native: :

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

 class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

 class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

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

const AppNavigation = () => (
  <SimpleAppNavigator  />
);

export default class App extends React.Component {
  render() {
    return (
        <AppNavigation/>
    );
  }
}
+11
const AppNavigation =()=>{  <SimpleApp  />}

export default class App extends React.Componet{
   render(){
      return (
        <AppNavigation/>
     );
  }
}
-2

More articles:


All Articles