Navigating between screens with StackNavigator

Question

I am having problems to understand what is wrong in my App.js when it says undefined is not an object (evaluating 'this.props.navigation.navigate'). I have been following react native documentation when it switches between homescreen and chatsrceen. I still cant make it work. Could someone help me?

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

class App 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 App1 = StackNavigator({
  Home: { screen: App },
  Chat: { screen: ChatScreen },
});

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 default App1

Answer 1

You need to export App1 not App.