Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript types for LinkingOptions break with nested navigation. #10876

Open
3 tasks done
phryneas opened this issue Sep 23, 2022 · 4 comments · May be fixed by #11430
Open
3 tasks done

TypeScript types for LinkingOptions break with nested navigation. #10876

phryneas opened this issue Sep 23, 2022 · 4 comments · May be fixed by #11430

Comments

@phryneas
Copy link

phryneas commented Sep 23, 2022

Current behavior

When typing a nested navigation as shown in the documentation with

interface BreakingPathConfig {
    Sub_1: { that: 'works' };
    Sub_2: NavigatorScreenParams<SubPathConfig>;
}

interface SubPathConfig {
    Sub_2_1: { that: 'breaks' };
}

export const brokenLinking: LinkingOptions<BreakingPathConfig> 

TypeScript falls back to any instead of the correct type of SubPathConfig and allows Sub_2_1 to have any kind of sub-screens as a result.

Expected behavior

Sub-screens of sub-screens should be correctly restricted.

Reproduction

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBDAnmApnA3nAMsAdgazwHMB5MGYCXAZwBo4A5AQwDdgimZoBlAYyhQpcABSZQmIanAC+cAGZQIIOAHIAAgKa8YAWlyt2nSrgD0+iixQqA3AChbeGCihytaAEKbCuIqJgALAGEqOXYMWzhIuG4AVwAjAH0ARgAuDAR-TjSVAHdofGoVGTso6PiEgCY05jYOLig+ASFRcUkAHli4vyCQ9gA+O2l7R2dXXjRO7uDcUKJw0s7K5LTMAKzVOK9C4tsh2xQAD0hYOF4qanhNiHwhHAJiNLvvUnJjajbPFCZnqd6iPrgAF55lEwAJQgcUNQ0gBtAC6tAiUTOM3YKyRpUi1H4gho6MxBLKiVS6TAnH82SK0kRhMxiyqINpBLJAUpcBpTIJ2KaePCJhMnMxAD0APy2fmC0oBKFoaj+CAxAA2ABM4LgIJc0AADJi4RBa+hxGLwLWTcnTWZajGSqL05aMm2lFkU1QqDmO0rc3HQh0eqIStQwag6Q6obQhqCKKDWv2RAAq-mcKG48qVyoYGvcyZxQh96CGsaiBdjxcdpaZ1JjRfdMkR0msQA

Platform

  • TypeScript

Packages

  • @react-navigation/​native

Environment

  • I've removed the packages that I don't use
package version
@react-navigation/native 6.0.13
TypeScript 4.8.2
@NehrDani
Copy link

I tried to fix this locally with no success.
It seems the infer T in the PathConfigMap type no longer works like before.
I already commented this here: #9897 (comment).

@andrewbateman
Copy link

andrewbateman commented Mar 20, 2023

I hacked together a couple of custom types which did the trick for me with TS 4.9.4, which at least lets me compile without TS errors.

import { LinkingOptions } from "@react-navigation/native";
import { PathConfig } from "@react-navigation/core";

export type NestedPathConfigMap<ParamList extends object> = {
  [RouteName in keyof ParamList]?: string | Omit<PathConfig<object>, "screens">;
};

export type NestedLinkingOptions<ParamList extends object> =
  LinkingOptions<ParamList> & {
    config?: {
      initialRouteName?: keyof ParamList;
      screens: NestedPathConfigMap<ParamList>;
    };
  };

@johankasperi
Copy link

This fix solves this issue in my project: #11430

@nathantew14
Copy link

still facing the same isse

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants