How to navigate to a page in other navigator in other file in React-native?

some people and I made an app with react native to practice, and later it turned out that we used two different navigators.

I tried to combine but I failed, and tried to google but couldn't find any satisfying answer.

I just want to call SplashScreen after signing out.

so here is the code for the initial screens including Auth aka SplashScreen:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Auth from './../screens/Auth'

...

import Welcome from './../screens/Welcome'
import MainApp from './MainApp' //this contains signout page

const Stack = createNativeStackNavigator();

const RootStack = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown:false}
                }}
                initialRouteName="Auth"
            >
                <Stack.Screen name= "Auth" component={Auth} />
                
                ... 

                <Stack.Screen />
                <Stack.Screen name="MainApp" component={MainApp}/>
            </Stack.Navigator>
        </NavigationContainer>
    )

and here is the code with my information and signout:

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';


const Stack=createStackNavigator()

const HomeScreenOptions={
  headerStyle:{backgroundColor:'lightblue'},
  headerTitleStyle:{color:'black', justifyContent:'center'},
  headerTintColor:'white',
}
const Tabs = createBottomTabNavigator();

const YourwordsStack = createStackNavigator();
const HomeStack = createStackNavigator();
const MyInfoStack = createStackNavigator();

const YourwordsStackScreen =()=>(
  <YourwordsStack.Navigator screenOptions={HomeScreenOptions}>
    <YourwordsStack.Screen name="Yourwords" component={YourwordsScreen}/>
  </YourwordsStack.Navigator>
)

const HomeStackScreen =()=>(
  <HomeStack.Navigator 
    screenOptions={HomeScreenOptions}
  >
    <HomeStack.Screen name="Home" component={HomeScreen} />
    <HomeStack.Screen name="Yourwords" component={YourwordsScreen} />
    <HomeStack.Screen name="Mywords" component={MywordsScreen}/>
  </HomeStack.Navigator>
)

const MyInfoStackScreen =()=>(
  <MyInfoStack.Navigator screenOptions={HomeScreenOptions}>
    <MyInfoStack.Screen name="MyInfo" component={MyInfoScreen}/> // this page needs to be connected with Auth
    <MyInfoStack.Screen name="MyWordsHistory" component={MyWordsHistory}/>
    <MyInfoStack.Screen name="MyMessages" component={MyMessages}/>
  </MyInfoStack.Navigator>
)

export default function MainApp({navigation}) {
  return (
    <NavigationContainer independent={true}>
      <Tabs.Navigator 
        initialRouteName="HomeTab"
        screenOptions={{
        tabBarHideOnKeyboard:true,
        tabBarStyle:[
          {
            display:'flex'
          },
          null
        ]
        }}
      >
        <Tabs.Screen 
          name="YourwordsTab" 
          component={YourwordsStackScreen}  
          options={{
            headerShown:false,
          }}
        />
        <Tabs.Screen 
          name="HomeTab" 
          component={HomeStackScreen} 
          options={{
            headerShown:false,
          }}
        />
        <Tabs.Screen 
          name="MyInfoTab" 
          component={MyInfoStackScreen}  
          options={{
            headerShown:false,
          }}
        />
      </Tabs.Navigator>
    </NavigationContainer>
  )
}

so the first problem is that we used different Navigators and the second problem is that we can't really link a page to another one through different file.

how can I solve this?