react-navigation v5: Exception thrown: createStackNavigator is not a function

Question

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.

    import React from 'react';
    import { createStackNavigator } from "@react-navigation/stack";
    import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
    import Icon from 'react-native-ionicons';
    import Ionicons from 'react-native-vector-icons/Ionicons'
    import GreenScreen from "./GreenScreen";
    import RedScreen from "./RedScreen";

const GreenStack = createStackNavigator ();

function GreenStackScreen() {
    return (
        <GreenStack.Navigator>
            <GreenStack.Screen name="Green" component={GreenScreen}/>
            <GreenStack.Screen name="Red" component={RedScreen}/>
        </GreenStack.Navigator>
    );
}

const RedStack = createStackNavigator ();

function RedStackScreen() {

    return (
        <RedStack.Navigator>
            <RedStack.Screen name="Green" component={GreenScreen}/>
            <RedStack.Screen name="Red" component={RedScreen}/>
        </RedStack.Navigator>
    );
}


const Tab = createBottomTabNavigator();

export default function BottomTabs() {
    return (
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({color, size}) => {
                        let iconName;

                        if (route.name ==='Green') {
                            iconName='home'

                        }else if(route.name ==='Red'){
                            iconName='grid'
                        }
                        return <Ionicons name={iconName} size={20} />
                    }
                })} >
                <Tab.Screen name="Green" component={GreenStackScreen}/>
                <Tab.Screen name="Red" component={RedStackScreen} />
            </Tab.Navigator>
    )
}

Answer 1

Your imports are wrong You should import like below

import { createStackNavigator } from '@react-navigation/stack';

And the bottom navigator should be imported like below

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';