Merge pull request #30114 from alechill/react-navigation-injected-props-state-leaf-route

[react-navigation] Injected navigation props route state is incorrect

types/react-navigation/index.d.ts

@@ -14,7 +14,6 @@
 //                 Steven Miller <https://github.com/YourGamesBeOver>
 //                 Armando Assuncao <https://github.com/ArmandoAssuncao>
 //                 Ciaran Liedeman <https://github.com/cliedeman>
-//                 Edward Sammut Alessi <https://github.com/Slessi>
 //                 Jérémy Magrin <https://github.com/magrinj>
 //                 Luca Campana <https://github.com/TizioFittizio>
 //                 Ullrich Schaefer <https://github.com/stigi>
@@ -25,6 +24,7 @@
 //                 Denis Frezzato <https://github.com/DenisFrezzato>
 //                 Mickael Wegerich <https://github.com/mickaelw>
 //                 Max Davidson <https://github.com/maxdavidson>
+//                 Alec Hill <https://github.com/alechill>
 //                 Lachlan Young <https://github.com/builtbyproxy>
 //                 Jason Killian <https://github.com/jkillian>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
@@ -1247,7 +1247,7 @@ export type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;
 export type InferProps<T extends React.ComponentType<any>> = T extends React.ComponentType<infer P> ? P : never;
 
 export interface NavigationInjectedProps<P = NavigationParams> {
-  navigation: NavigationScreenProp<NavigationState, P>;
+  navigation: NavigationScreenProp<NavigationRoute<P>, P>;
 }
 
 // If the wrapped component is a class, we can get a ref to it

types/react-navigation/react-navigation-tests.tsx

@@ -17,12 +17,14 @@ import {
     NavigationNavigateAction,
     NavigationProp,
     NavigationResetAction,
+    NavigationRoute,
     NavigationRouteConfigMap,
     NavigationScreenProp,
     NavigationScreenProps,
     NavigationSetParamsAction,
     NavigationStackAction,
     NavigationStackScreenOptions,
+    NavigationStateRoute,
     NavigationTabScreenOptions,
     NavigationTransitionProps,
     StackViewTransitionConfigs,
@@ -70,10 +72,22 @@ interface StartScreenNavigationParams {
  */
 class StartScreen extends React.Component<NavigationScreenProps<StartScreenNavigationParams>> {
     render() {
-        // Implicit type checks.
+        // Injected type checks
+        const props: NavigationInjectedProps<StartScreenNavigationParams> = this.props;
+        // route state...
+        const navigationState: NavigationRoute<StartScreenNavigationParams> = this.props.navigation.state;
+        const index: number = navigationState.index;
+        const key: string = navigationState.key;
+        const routeName: string = navigationState.routeName;
+        const path: string | undefined = navigationState.path;
+        let routes: NavigationRoute[];
+        if (isNavigationStateRoute(navigationState)) {
+            routes = navigationState.routes;
+        }
+        // params...
         const navigationStateParams: StartScreenNavigationParams | undefined = this.props.navigation.state.params;
-        const id = this.props.navigation.state.params && this.props.navigation.state.params.id;
-        const s = this.props.navigation.state.params && this.props.navigation.state.params.s;
+        const id: number | undefined = this.props.navigation.state.params && this.props.navigation.state.params.id;
+        const s: string | undefined = this.props.navigation.state.params && this.props.navigation.state.params.s;
 
         return (
             <View>
@@ -107,17 +121,32 @@ interface NextScreenNavigationParams {
 
 class NextScreen extends React.Component<NavigationScreenProps<NextScreenNavigationParams>> {
     render() {
-        // Implicit type checks.
-        const navigationStateParams: NextScreenNavigationParams | undefined = this.props.navigation.state.params;
+        // Injected type checks
+        const props: NavigationInjectedProps<NextScreenNavigationParams> = this.props;
+        // route state...
+        const navigationState: NavigationRoute<NextScreenNavigationParams> = this.props.navigation.state;
+        const index: number = navigationState.index;
+        const key: string = navigationState.key;
+        const routeName: string = navigationState.routeName;
+        const path: string | undefined = navigationState.path;
+        let routes: NavigationRoute[];
+        if (isNavigationStateRoute(navigationState)) {
+            routes = navigationState.routes;
+        }
+        // params...
+        const navigationStateParams: NextScreenNavigationParams | undefined = navigationState.params;
         const id = this.props.navigation.state.params && this.props.navigation.state.params.id;
         const name = this.props.navigation.getParam('name', 'Peter');
-
         return (
             <View />
         );
     }
 }
 
+function isNavigationStateRoute<P>(route: NavigationRoute<P>): route is NavigationStateRoute<P> {
+    return !!(route as NavigationStateRoute<P>).routes;
+}
+
 const navigationOptions = {
     headerBackTitle: null,
 };