react native tab navigation and stack navigation nested usage

Error:

The action 'NAVIGATE' with payload {"name":"Contacts"} was not handled by any navigator.

Do you have a screen named 'Contacts'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

--#--

The action 'NAVIGATE' with payload {"name":"HomeStack","params":{"screen":"Contacts"}} was not handled by any navigator.

Do you have a screen named 'HomeStack'?

App.js

import React from 'react'
import { store } from '../Redux/store';
import { Provider } from 'react-redux';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Router from './Router';

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

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <>
      <GestureHandlerRootView style={{ flex: 1 }}>
        <Provider store={store}>
          <Router Tab={Tab} />
        </Provider>
      </GestureHandlerRootView>
    </>
  )
}

export default App

Router.js

import React, { useState, useEffect } from 'react';
import { Image } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

import Chat from '../Pages/Chat/Chat';
import Login from '../Pages/Auth/Login';
import Contacts from '../Pages/Contacts/Contacts';
import ProfileCreate from '../Pages/Profile/ProfileCreate';
import Register from '../Pages/Auth/Register';
import Menu from '../Pages/More/Menu';
import Messages from '../Pages/Messages/Messages';
import Splash from '../Pages/Splash/Splash';

import chats from '../Assets/Images/icons/chats.png'
import accountTab from '../Assets/Images/icons/accountTab.png'
import more from '../Assets/Images/icons/more.png'
import { useSelector } from 'react-redux';

import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();

const HomeStackScreen = () => {
    const isAuth = useSelector((state) => state.user.isAuth);

    return (
        <Stack.Navigator initialRouteName='Splash'>
            {
                !isAuth ? (
                    <>
                        <Stack.Screen name='Splash' component={Splash} options={{ headerShown: false }} />
                        <Stack.Screen name='Login' component={Login} />
                        <Stack.Screen name='Register' component={Register} />
                        <Stack.Screen name='ProfileCreate' component={ProfileCreate} />
                    </>
                ) :
                    (
                        <>
                            <Stack.Screen name="Contacts" component={Contacts} />
                            <Stack.Screen name='Chat' component={Chat} />
                            <Stack.Screen name="Messages" component={Messages} />
                            <Stack.Screen name='Menu' component={Menu} />
                        </>
                    )
            }
        </Stack.Navigator>
    );
}

const Router = (props) => {
    const { Tab } = props;
    const isAuth = useSelector((state) => state.user.isAuth);

    useEffect(() => {
        console.log('isAuth->', isAuth);
    }, [isAuth]);

    return (
        <NavigationContainer>
            {
                isAuth ? (
                    <Tab.Navigator
                        screenOptions={{
                            headerShown: false,
                            tabBarStyle: {
                                backgroundColor: '#0F1828',
                                elevation: 15,
                                borderTopWidth: 0,
                                paddingBottom: 4,
                            },
                        }}
                    >
                        <Tab.Screen name="Contacts1"
                            component={HomeStackScreen}
                            screenOptions={{ headerShown: false }}
                            options={{
                                tabBarIcon: ({ focused }) => (
                                    <Image
                                        source={accountTab}
                                        resizeMode='contain'
                                        style={{
                                            tintColor: focused ? '#fff' : '#748c94',
                                        }}
                                    />
                                ),
                            }}
                        />
                        <Tab.Screen name="Messages" component={Messages}
                            options={{
                                tabBarIcon: ({ focused }) => (
                                    <Image
                                        source={chats}
                                        resizeMode='contain'
                                        style={{
                                            tintColor: focused ? '#fff' : '#748c94',
                                        }}
                                    />
                                ),
                            }}
                        />
                        <Tab.Screen name='More' component={Menu}
                            options={{
                                tabBarIcon: ({ focused }) => (
                                    <Image
                                        source={more}
                                        resizeMode='contain'
                                        style={{
                                            tintColor: focused ? '#fff' : '#748c94',
                                        }}
                                    />
                                ),
                            }}
                        />
                    </Tab.Navigator>
                ) : (
                    <HomeStackScreen />
                )
            }
        </NavigationContainer>
    )
};

export default Router;

Crossing

navigation.navigate('HomeStack', {screen: 'Contacts'})

I tried separating the stack components as HomeStackScreen and AuthNotStackScreen and coded it again following the documentation, but I keep getting the same error.

Maybe I'm missing something very small, but this is the first time I've seen such a usage.

Contacts is a screen directly under HomeStack, you can navigate to it directly without specifying the HomeStack route:

navigation.navigate('Contacts');