CODEWITHSUNDEEP
typescriptreact-nativeexporeact-navigation
Smiter
Smiter

Reputation: 1197

React Navigation v6 NavigationContainer linking attribute with nested navigation typescript issue

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

Upvotes: 13

Views: 5414

Answers (1)

sliptype
sliptype

Reputation: 2974

I ran into this as well. To fix it, try annotating the linking object like so:

const linking: LinkingOptions<RootStackParamList> = {
  ...
};

Then, make sure that RootStackParamList is a correct representation of your nesting structure and params:

type TabsParamList = {
  Tab1: undefined
  Tab2: undefined
}

type RootStackParamList = {
  RoundUps: undefined
  Account: undefined
  LoggedIn: NavigatorScreenParams<TabsParamList>
}

Upvotes: 28

Related Questions