stack navigations and BottomTabNavigation for DeepLinking using react-navigation-5.0

App.tsx

import linking from "./src/navigation/Linking";
import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';
import { navigationRef } from './src/navigation/RootNavigaton'
axios.defaults.baseURL =
  'https://europe-west1-socialape-d081e.cloudfunctions.net/api';
  
  const App = (props:any) => {
  const isDarkMode = useColorScheme() === 'dark';
  const [initialised, setInitialised] = useState(false);
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  return (
    <Provider store={store}>
      <Navigation ref={navigationRef}  colorScheme={'light'} uriPrefixe={linking.prefixes} linking={linking} />
    </Provider>
  );
};

BottomTabNavigation.tsx

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
import Jobs from '../pages/jobs/Jobs';
import Profile from '../pages/profile/Profile'
import Resume from '../pages/resume'
import Message from '../pages/message/Message'
import Settings from '../pages/settings/Settings'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { JobStack, MessageStack, ProfileStack, ResumeStack, SettingsStack } from './navigation';
import React, { FunctionComponent } from 'react';
import { NavigationIconProps } from './TabProps';
import { Platform, View } from 'react-native';
import { useTheme } from '@react-navigation/native';
import styles from './styles';


const Tab = createMaterialBottomTabNavigator();

const NavigationIcons: FunctionComponent<NavigationIconProps> = (props) => {
  const { colors } = useTheme();
  const params = {
    width: Platform.OS == "ios" ? 26 : 24,
    height: Platform.OS == "ios" ? 26 : 24,
    isFocused: props.focused,
   
  };

  return (
    <View style={styles.barIcon}>
      {props.routeName === "Jobs" ? (
       <MaterialIcons name='rss-feed' size={20}/>
      ) : props.routeName === "Resume" ? (
        <MaterialIcons name='business-center' size={20}/>
      ) : props.routeName === "Profile" ? (
        <MaterialIcons name='create' size={20}/>
      ) : props.routeName === "Settings" ? (
        <MaterialIcons name='security' size={20}/>
      ) : props.routeName === "Messages" ? (
        <MaterialIcons name='comment' size={20}/>
      ) : null}
    </View>
  );
};
const tabbarVisible = ({ navigation, route }) => {

  return true;
};
export default function BottomTabs() {
  return (
    <Tab.Navigator screenOptions={({ route, navigation }) => (
      tabbarVisible({ navigation, route }),
      
      {
        tabBarIcon: ({ focused, color }) => {
          return (
            <View style={[styles.barContainer]}>
              {/* console.log('route===', route) */}
              {focused && <View style={styles.topBarView} />}
              <NavigationIcons
                routeName={route.name}
                tintColor={color}
                focused={focused}
              />
            </View>
          );
        },
      }
    )}
    keyboardHidesNavigationBar={true}
    barStyle={{
      borderTopWidth: Platform.OS == "ios" ? 0 : 0,
      backgroundColor: "#fff",
      shadowColor:  "#000",
      shadowOffset: { width: 10, height: 10 },
      shadowOpacity: 0.5,
      shadowRadius: 15,
      elevation: 35,
      paddingBottom: Platform.OS == "ios" ? 0 : 10,
      paddingLeft: 20,
      paddingRight: 20,
      borderColor: "transparent",
      justifyContent: "center",
      // position: 'absolute',
      overflow: Platform.OS == "ios" ? "visible" : "hidden",
    }}>
      <Tab.Screen name="Jobs" component={JobStack} />
      <Tab.Screen name="Resume" component={ResumeStack} />
      <Tab.Screen name="Profile" component={ProfileStack} />
      <Tab.Screen name="Messages" component={MessageStack} />
  <Tab.Screen name="Settings" component={SettingsStack} /> 
   
    </Tab.Navigator>
  );
}

navigation.tsx

import React from 'react'
import { createStackNavigator } from '@react-navigation/stack';
import Animated from 'react-native-reanimated';
import { enableScreens } from 'react-native-screens';
import JobDetail from '../pages/jobs/JobDetail';
import Jobs from '../pages/jobs/Jobs';
import Message from '../pages/message/Message';
import MessageDetail from '../pages/message/MessageDetail';
import Profile from '../pages/profile/Profile';
import Resume from '../pages/resume';
import Settings from '../pages/settings/Settings';

enableScreens();

const StackJob = createStackNavigator();
const StackResume = createStackNavigator();
const StackProfile = createStackNavigator();
const StackMessage = createStackNavigator();
const StackSettings = createStackNavigator();

function JobStack() {
  return (
   
      <StackJob.Navigator>
        <StackJob.Screen name="Jobs" component={Jobs} />
        <StackJob.Screen name="JobDetail" component={JobDetail} />
      </StackJob.Navigator>
   
  );
}
function ResumeStack() {
    return (
     
        <StackResume.Navigator>
          <StackResume.Screen name="Resume" component={Resume} />
        
        </StackResume.Navigator>
     
    );
  }
  function ProfileStack() {
    return (
     
        <StackProfile.Navigator>
          <StackProfile.Screen name="Profile" component={Profile} />
        
        </StackProfile.Navigator>
     
    );
  }
  function MessageStack() {
    return (
     
        <StackMessage.Navigator>
          <StackMessage.Screen name="Message" component={Message} />
          <StackMessage.Screen name="Message Detail" component={MessageDetail} />
        </StackMessage.Navigator>
     
    );
  }
  function SettingsStack() {
    return (
     
        <StackSettings.Navigator>
          <StackSettings.Screen name="Settings" component={Settings} />
         
        </StackSettings.Navigator>
     
    );
  }

  export {JobStack, MessageStack, SettingsStack, ProfileStack, ResumeStack}

In these three files, I did the following things

Navigation.tsx -> here I define my app's Navigation stacks
bottomTabNavigation.tsx-> in it I use those stacks inside bottom tabs
App.tsx -> is used how to use Navigation object in App.tsx