title: react-navigation v5: Exception thrown: createStackNavigator is not a function
body: <p>I am very new to React, if you need any more information let me know and I can provide. I am trying to add bottom tabs. I have followed the react-navigation documentation to the best of my ability. I have also scoured the forms and found a few similar questions, but still could not work it out. Thank you for the help.</p>
  <pre><code>    import React from 'react';
      import { createStackNavigator } from &quot;@react-navigation/stack&quot;;
      import { createBottomTabNavigator } from &quot;@react-navigation/bottom-tabs&quot;;
      import Icon from 'react-native-ionicons';
      import Ionicons from 'react-native-vector-icons/Ionicons'
      import GreenScreen from &quot;./GreenScreen&quot;;
      import RedScreen from &quot;./RedScreen&quot;;
  
  const GreenStack = createStackNavigator ();
  
  function GreenStackScreen() {
      return (
          &lt;GreenStack.Navigator&gt;
              &lt;GreenStack.Screen name=&quot;Green&quot; component={GreenScreen}/&gt;
              &lt;GreenStack.Screen name=&quot;Red&quot; component={RedScreen}/&gt;
          &lt;/GreenStack.Navigator&gt;
      );
  }
  
  const RedStack = createStackNavigator ();
  
  function RedStackScreen() {
  
      return (
          &lt;RedStack.Navigator&gt;
              &lt;RedStack.Screen name=&quot;Green&quot; component={GreenScreen}/&gt;
              &lt;RedStack.Screen name=&quot;Red&quot; component={RedScreen}/&gt;
          &lt;/RedStack.Navigator&gt;
      );
  }
  
  
  const Tab = createBottomTabNavigator();
  
  export default function BottomTabs() {
      return (
              &lt;Tab.Navigator
                  screenOptions={({route}) =&gt; ({
                      tabBarIcon: ({color, size}) =&gt; {
                          let iconName;
  
                          if (route.name ==='Green') {
                              iconName='home'
  
                          }else if(route.name ==='Red'){
                              iconName='grid'
                          }
                          return &lt;Ionicons name={iconName} size={20} /&gt;
                      }
                  })} &gt;
                  &lt;Tab.Screen name=&quot;Green&quot; component={GreenStackScreen}/&gt;
                  &lt;Tab.Screen name=&quot;Red&quot; component={RedStackScreen} /&gt;
              &lt;/Tab.Navigator&gt;
      )
  }
  </code></pre>