Given the situation where I want different tabs of a BottomTabNavigator to share some screens while still showing the tab bar, the problem is type cheking for the navigation prop.

So far I've managed to get this, but I get 'type string is not assignable to type ParamListBase' ts(2344)

types.ts

export type SharedNavigatorParams = {
  Screen1: undefined
  Screen2: undefined
}

export type TabParams = SharedNavigatorParams & {
    HomeTab: NavigatorScreenParams<HomeTabParams>
    ProfileTab: NavigatorScreenParams<ProfileTabParams>
}

export type HomeTabParams = SharedNavigatorParams & {
  Home: undefined
}

export type ProfileTabParams = SharedNavigatorParams & {
  Profile: undefined
}

export type TabScreenProps<T extends keyof TabParams> = BottomTabScreenProps<TabParams, T>

export type HomeTabScreenProps<T extends keyof HomeTabParams> =
  CompositeScreenProps<
    NativeStackScreenProps<HomeTabParams, T>,
    BottomTabScreenProps<keyof TabParams>    // <-- ts error 
  >                                          

export type ProfileTabScreenProps<T extends keyof ProfileTabParams> =
  CompositeScreenProps<
    NativeStackScreenProps<ProfileTabParams, T>,
    BottomTabScreenProps<keyof TabParams>    // <-- same error
  >

declare global {
  namespace ReactNavigation {
    interface RootParamList extends TabParams {}
  }
}

Doing the following works, but it is not the way its done in the react navigation docs

export type HomeTabScreenProps<T extends keyof HomeTabParams> = CompositeScreenProps<
    NativeStackScreenProps<HomeTabParams, T>,
    BottomTabScreenProps<AppTabParams, keyof AppTabParams>
>

Navigation.tsx

export default function TabNavigator() {
  return
    <Tab.Navigator>
      <Tab.Screen name="HomeTab" component={HomeTabNavigator}/>
      <Tab.Screen name="HomeTab" component={ProfileTabNavigator}/>
    </Tab.Navigator>
}

function HomeTabNavigator() {
  return
    <HomeTab.Navigator>
      <HomeTab.Screen name="Home" component={Home} />
      <HomeTab.Screen name="Screen1" component={Screen1} />
      <HomeTab.Screen name="Screen2" component={Screen2} />
    </HomeTab.Navigator>
}

function ProfileTabNavigator() {
  return
    <ProfileTab.Navigator>
      <ProfileTab.Screen name="Profile" component={Profile} />
      <ProfileTab.Screen name="Screen1" component={Screen1} />
      <ProfileTab.Screen name="Screen2" component={Screen2} />
    </ProfileTab.Navigator>
}

Note that I have to add a <Stack.Screen ... /> for each shared screen on every tab, which doesn't look so good to me.

So when I want to use the navigation prop, I'd do as it's shown in the pictures. Although it works, it is not the expected behavior.

I'm really struggling to make this work properly, these are the resources I've been basing this code on, plus many stack overflow questions:

This github issue:

BlueSky: .tsx

React Navigation docs:

"@react-navigation/native": "^7.0.14"

"@react-navigation/native-stack": "^7.2.0"

"@react-navigation/bottom-tabs": "^7.2.0"