Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

React Navigation v6 NavigationContainer linking attribute with nested navigation typescript issue

$
0
0

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


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>