I am using react navigation 6 with a root stack navigator containing a tab navigator. My linking attribute config looks like this in the App component:
export default function App() { const linking = { prefixes: [prefix], config: { screens: { Roundups: 'roundups', Account: 'account', TabNavigator: { screens: { Tab1: 'tab1', Tab2: 'tab2', }, }, }, }, }; return (<NavigationContainer linking={linking} fallback={<Text>Loading...</Text>}><QueryClientProvider client={queryClient}><Stack.Navigator><Stack.Screen name="RoundUps" component={RoundUps} /><Stack.Screen name="Account" component={Account} /><Stack.Screen name="LoggedIn" component={TabNavigator} /></Stack.Navigator></QueryClientProvider></NavigationContainer> );}
My TabNavigator component looks like this:
const Tab = createBottomTabNavigator();type Props = NativeStackScreenProps<RootStackParamList, 'TabNavigator'>;const TabNavigator = ({ navigation }: Props) => { return (<Tab.Navigator><Tab.Screen name="Tab1" component={Tab1Screen} /><Tab.Screen name="Tab2" component={Tab2Screen} /></Tab.Navigator> );};export default TabNavigator;
Referring to the react navigation docs on this attribute I believe this to be the correct setup but I receive this typescript error and I'm at a loss.
Type '{ prefixes: string[]; config: { screens: { Roundups: string; Account: string; TabNavigator: { screens: { Tab1: string; Tab2: string; }; }; }; }; }' is not assignable to type 'LinkingOptions<{ Roundups: unknown; Account: unknown; TabNavigator: unknown; }>'. The types of 'config.screens.TabNavigator' are incompatible between these types. Type '{ screens: { Tab1: string; Tab2: string; }; }' is not assignable to type 'string | Omit<PathConfig<{}>, "screens" | "initialRouteName"> | undefined'. Type '{ screens: { Tab1: string; Tab2: string; }; }' has no properties in common with type 'Omit<PathConfig<{}>, "screens" | "initialRouteName">'.ts(2322)
Am I missing something obvious here? Thanks