title: React Native "TypeError: Object(...) is not a function" Error for react navigation stack
body: <p>I'm having an issue with my react-navigation-stack, I believe it could be a problem with dependencies, but I'm not sure if that's it. I am simply trying to have some text redirect to another page. If there is code that is irrelevant to the issue, such as a button, I apologize as I am trying to learn react native. The problem is being pointed at homeStack.js at the first import, "import { createStackNavigator } from '@react-navigation/stack';" , but previously I just used react-navigation-stack there, which I believe was a part of old dependencies, but it gave me a module not found error at first, which changed to what I have now when I put @react-navigation/stack instead. I was learning from a video tutorial, but the code from the tutorial was not compiling. I redownloaded react navigation multiple times and have tried some thing that did not work. I will post my code below and would really appreciate help and input as to what can help my problem. Thanks you!
  <a href="https://i.stack.imgur.com/xA6sH.png" rel="nofollow noreferrer">Picture of error</a></p>
  
  <p>homeStack.js</p>
  
  <pre><code>import { createStackNavigator } from '@react-navigation/stack';
  //import { createAppContainer } from '@react-navigation/native';
  //import { createStackNavigator } from 'react-navigation-stack';
  import { createAppContainer } from 'react-navigation';
  import Home from '../screens/home';
  import ReviewDetails from '../screens/reviewDetails';
  
  const screens = {
  Home: {
  screen: Home,
  },
  ReviewDetails: {
  screen: ReviewDetails,
  },
  };
  
  // home stack navigator screens
  const HomeStack = createStackNavigator(screens);
  
  export default createAppContainer(HomeStack);
  </code></pre>
  
  <p>home.js</p>
  
  <pre><code>import React from 'react';
  import { StyleSheet, View, Text, } from 'react-native';
  import { globalStyles } from '../styles/global';
  
  export default function Home() {
    return (
      &lt;View style={globalStyles.container}&gt;
         &lt;Text style={globalStyles.titleText}&gt;Home Screen&lt;/Text&gt;
      &lt;/View&gt;
    );
  }
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>//import React from 'react';
  import React, { Component } from 'react';
  import { StyleSheet, Text, View, Image, Button } from 'react-native';
  import Buttonwithbackground from './src/Buttonwithbackground';
  import { StackNavigator } from 'react-navigation';
  //import Expo from 'expo';
  //import Screen from 'screen2';
  import { AppLoading } from 'expo';
  import Navigator from './routes/homeStack';
  import { render } from 'react-dom';
  //
  //import {Link} from 'react-router-dom';
  
  class HomeScreen extends React.Component{
    static NavigationOptions = {
      title: 'Home',
    };
    render(){
      const { navigate} = this.props.navigation;
      return(
        &lt;View style={styles.container}&gt;
          &lt;Text
           onPress= { ()=&gt; navigate('Home') }&gt;Navigate to Profile
           &lt;/Text&gt;
        &lt;/View&gt;
      );
      }
    }
  
  class ProfileScreen extends React.Component{
    static NavigationOptions = {
      title: 'Profile',
    };
    render(){
      const { navigate} = this.props.navigation;
      return(
        &lt;View style={styles.container}&gt;
          &lt;Text
           onPress= { ()=&gt; navigate('Profile') }&gt;Navigate to Profile
           &lt;/Text&gt;
        &lt;/View&gt;
      );
      }
    }
  
  
  //export default function App() {
  export default class App extends Component {
  
    editUser = () =&gt; {
      this.props.navigation.navigate("Screen");
    //    this.navigation.navigate("screen2");
    //     window.location.href = 'screen2';
          };
  
     editUser2 = () =&gt; {
    //if the second button is clicked, it will redirect to yahoo.com
          window.location.href="http://yahoo.com"
          };     
  
    render(){
    return (
      &lt;View style={styles.container}&gt;
        &lt;Image
          style={{width: 350, height: 200}}
          source = {require('./assets/dolanduckjoker.jpg')}
        /&gt;
        &lt;Navigator /&gt;
        &lt;Buttonwithbackground text='Login' color='black' onPress={this.editUser2}/&gt;
        &lt;p&gt;&lt;br/&gt;&lt;/p&gt;
        &lt;Button title='Login' color='black' onPress={this.editUser2}/&gt;
        &lt;Button title='Login' color='black' onPress={() =&gt; navigation.navigate('screen2.js')}/&gt;
        &lt;p&gt;&lt;br/&gt;&lt;/p&gt;
        &lt;Button
                      style={styles.cancelButton} 
                      onPress={this.editUser}
                      title="Register"
                      color="#343434"
                      accessibilityLabel="Register a User."/&gt;
      &lt;/View&gt;
    );
  }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'white',
      alignItems: 'center',
      justifyContent: 'center',
    },
    title: {
      fontSize: 32,
      textAlign: 'center',
      margin: 10,
    },
  });
  </code></pre>