Навигация между дочерними экранами на экране родительской вкладки с использованием встроенной навигации с помощью Typescript

  //types in use -> types.ts
export type RootStackParamList = {
  Root: undefined;
  NotFound: undefined;
};

export type UserBottomTabParamList = {
  Home: undefined;
  Wish: undefined;
  Cart: undefined;
  Chat: undefined;
  Account: undefined;
};
export type TabOneParamList = {
  TabOneScreen: undefined;
  CategoryView: { categoryId: string | number } | undefined;
  Review: undefined;
  ShippingView: undefined;
  PaymentView: undefined;
  PreownView: undefined;
};
...
export type StackProps<T, U> = {
  route: T;
  navigation: U;
}
...






//rootstack -> index.js
...
...
const Stack = createStackNavigator<RootStackParamList>();

function RootNavigator() {

  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Root" component={UserBottomTabNavigator} />
      ....
    </<Stack.Navigator>
    )
 }
    





//from tab navigator screen -> UserBottomTabNavigator.tsx
...
const BottomTab = createBottomTabNavigator<UserBottomTabParamList>();

export default function UserBottomTabNavigator() {
  const colorScheme = useColorScheme();

  return (
    <BottomTab.Navigator
    initialRouteName="Home"
    tabBarOptions={{ 
      activeBackgroundColor: "#403d93",
      labelStyle:{
        color:'orangered'
      } 
    }}>
      <BottomTab.Screen
        name="Home"
        component={TabOneNavigator}
        options={{
          tabBarIcon: ({ color }) => <Ionicons name="home-outline" size={24} color="orangered" /> 
        }}
      />
     ...
    </BottomTab.Navigator>
  );
}

const TabOneStack = createStackNavigator<TabOneParamList>();

function TabOneNavigator() {
  return (
    <TabOneStack.Navigator screenOptions={{
          title: 'PX Stores',
          headerStyle: {
            backgroundColor: '#403d93',
          },
          headerTintColor: '#ffffff',
          headerTitleStyle: {
            fontWeight: 'bold',
            textAlign:'center',
          },
        }}>
      <TabOneStack.Screen
        name="TabOneScreen"
        component={TabOneScreen}
      />
      <TabOneStack.Screen
        name="CategoryView"
        component={CategoryView}
      />
    </TabOneStack.Navigator>
  );
}
...


    //from initial screen -> TabOneScreen.tsx --UserHome 

    import React, { useEffect, useState } from 'react';
    import { StyleSheet, View } from 'react-native';
    import { FlatList, ScrollView } from 'react-native-gesture-handler';
    import { RouteProp, useNavigation } from '@react-navigation/native';
    import { StackNavigationProp } from '@react-navigation/stack';


    import { categoriesx } from '../../constants/DummyData';
    import { Arranger } from './Arranger';
    import { StackProps, TabOneParamList } from '../../types';


    type Props = StackProps<RouteProp<TabOneParamList,'TabOneScreen'>  StackNavigationProp<TabOneParamList,'TabOneScreen'>>

    export const UserHome = ({ navigation }:Props) => {
        ...
        //redirector 
        const redirector = (arg:any) =>{ 
            let x = arg; 
            console.log(arg);
            navigation.navigate('CategoryView',{ categoryId: x });
        }
       ...
        
        return (
            <View>
                  ...
                    <Arranger rotation='horizontal' arrengerStyle={{
                        height:80,
                    }}>
                        <FlatList
                        data={categoriesx}
                        renderItem={({item}) => <Categorizer type="primary" item={item} selected={selectedId1}  callback={()=>{setselectedId1(item.id); redirector(item.id)}}/>}
                        keyExtractor={(item) => item.id.toString()}
                        horizontal
                        />
                    </Arranger>
                ....
            </View>
        )
    }








    //screen to navigate -> screens\userAppScreens\CategoryView.tsx

    import * as React from 'react';
    import { RouteProp } from '@react-navigation/native';
    import { StackNavigationProp } from '@react-navigation/stack';
    import { View, Text } from 'react-native';

    import { StackProps, TabOneParamList } from '../../types';

    type Props = StackProps<RouteProp<TabOneParamList,'CategoryView'>  StackNavigationProp<TabOneParamList,'CategoryView'>>

    export const CategoryView = ({ route, navigation }:Props) => {
        //   console.log(route, navigation);
        return (
            <View>
                <Text>this is a test</Text>
            </View>
        )
    }


//error output from console
TypeError: undefined is not an object (evaluating 'navigation.navigate')
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:104:6 in reportException
at node_modules\react-native\Libraries\Core\ExceptionsManager.js:171:19 in handleException
at node_modules\react-native\Libraries\Core\setUpErrorHandling.js:24:6 in handleError
at node_modules\expo-error-recovery\build\ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:165:18 in PromiseImpl.resolve.then$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in invokeCallbackAndReturnFlushedQueue