'React Navigation/TypeScript: Defining initialProps on parent of a nested navigation

I cannot seem to define nested routes in the deep linking config AND set initialParams on the parent screen.

In the following example, TypeScript throws an error on the initialParams property of the Home screen:

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer, LinkingOptions, NavigatorScreenParams } from '@react-navigation/native';

/**
 * Stack hierarchy:
 *  - Home
 *      - Main (default)
 *      - Add
 *  Profile
 */
type RootStackParamList = {
    Home: NavigatorScreenParams<HomeStackParamList>;
    Profile: { userId: string };
};

type HomeStackParamList = {
    Main: { feed: string };
    Add: { name: string };
};

const DeepLinking: LinkingOptions<RootStackParamList> = {
    prefixes: ['app://'],
    config: {
        screens: {
            Home: {
                screens: {
                    Main: '/',
                    Add: '/add',
                },
            },
        },
    },
};

export function App() {
    const RootStack = createStackNavigator<RootStackParamList>();
    return (
        <NavigationContainer linking={DeepLinking}>
            <RootStack.Navigator initialRouteName="Home">
                <RootStack.Screen name="Home" component={HomeComponent} initialParams={{ feed: 'latest' }} />
                <RootStack.Screen name="Profile" component={NoopComponent} initialParams={{ userId: '1' }} />
            </RootStack.Navigator>
        </NavigationContainer>
    );
}

function HomeComponent() {
    const Stack = createStackNavigator<HomeStackParamList>();
    return (
        <Stack.Navigator initialRouteName="Main">
            <Stack.Screen name="Main" component={HomeComponent} />
            <Stack.Screen name="Add" component={NoopComponent} />
        </Stack.Navigator>
    );
}

function NoopComponent() {
    return <></>;
}

How can I include params for the parent route of a nested route?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source