Accessing the 'state' property of the 'route' object is not supported

[nonameolsson]

What's going on?

I am getting the following warning: Accessing the 'state' property of the 'route' object is not supported..

https://github.com/infinitered/ignite/blob/d1fa61ab611565afcf2bf50c93b3f5cee73419cf/boilerplate/app/navigators/navigation-utilities.tsx#L30

---

Steps to reproduce

1. Generate a new project
2. Start it
3. Open navigation-utilities.tsx in something like VS Code and look at errors for that file.

---

ignite doctor results:

System
  platform           darwin                                                 
  arch               x64                                                    
  cpu                8 cores      Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz 
  directory          timeline     /Users/andreasolsson/Code/GitHub/timeline 
^[[B^[[B
JavaScript (and globally-installed packages)
  node               14.4.0       /Users/andreasolsson/.asdf/installs/nodejs/14.4.0/bin/node 
  npm                6.14.5       /Users/andreasolsson/.asdf/installs/nodejs/14.4.0/bin/npm  
    expo-cli         4.3.4                                                                   
    themer           3.3.4                                                                   
  yarn               1.22.10      /usr/local/bin/yarn                                        
    ignite-cli       3.5.2                                                                   
    ios-deploy       1.11.1                                                                  

Ignite
  ignite-cli         6.6.0        /Users/andreasolsson/.npm/_npx/92841/bin/ignite                        
  ignite src         build        /Users/andreasolsson/.npm/_npx/92841/lib/node_modules/ignite-cli/build 

Android
  java               14.0.2       /usr/bin/java 
  android home       -            undefined     

iOS
  xcode              12.4       
cocoapods          1.9.3        /usr/local/bin/pod 

[nirre7]

Hi.

I don't get that in a new IgniteApp, also the TS definitions differs from the one you have it seems?

Have you updated react-navigation or its TS definitions? Regarding the "warning", I'm guessing that given that the index property could be undefined one needs to check if it is set before using it?

[nirre7]

On a side note, you should remove the old ignite-cli that have installed globally via yarn.

[nonameolsson]

Hi.

I don't get that in a new IgniteApp, also the TS definitions differs from the one you have it seems?

Have you updated react-navigation or its TS definitions? Regarding the "warning", I'm guessing that given that the index property could be undefined one needs to check if it is set before using it?

Thank you very much for the feedback! That was strange... I'm going to investigate a bit. If I find a solution to the problem I'll post it here.

If someone else also has encountered this problem, please let me know.

[nonameolsson]

Okay, so I have some custom settings in tsconfig.json. In TypeScript projects I always use "strict": "true". But it seems like this isn't how Ignite is configured.

If I set it to false, then the warning inside VS Code goes away. But I still have the warning when I run the app.

Is there any reason why strict isn't used in Ignite?

[nonameolsson]

After some further investigation, I figured out where the error really is coming from.

The first issue was that I had added strict: true to my tsconfig.json. This will show the warning in the screen shot above. I removed strict, just like it is configured in the boilerplate, and now it doesn't complain any more. I am not satisfied with this solution, since I think strict: true should be standard, and that the boilerplate should work with it.

The second issue is the warning message: Accessing the 'state' property of the 'route' object is not supported.. This does not come from getActiveRouteName in navigation-utilities.tsx. Instead, it comes from the line where I use the function. I have a tab navigator where I need to get the current route name, and I have this code:

  const routeName = route.state ? getActiveRouteName(route.state) : "timelines";

  /**
   * Calculate when to show a global FAB.
   */
  const showFab = () => {
    if (!isFocused) return false;

    if (routeName === "timelines") {
      if (timelineStore.hasTimelines() === true) {
        return true;
      } else {
        return false;
      }
    } else if (routeName === "timeline") {
      return true;
    } else if (routeName === "people") {
      return true;
    } else {
      return false;
    }
  };

But when using getActiveRouteName(route.state) the warning is displayed. It suggests that I should use getFocusedRouteNameFromRoute from the package @react-navigation/native, as explained here https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state.

I haven't got it to work with getFocusedRouteNameFromRoute yet though.

Conclusion: What is the idea of getActiveRouteName in Ignite? Does it do anything that getFocusedRouteNameFromRoute doesn't?

[nonameolsson]

Following up with some more details.

Maybe the way the util works isn't supported anymore by react-navigation? https://github.com/react-navigation/react-navigation/issues/9113#issuecomment-764693246

[jamonholmgren]

Good thoughts, @nonameolsson.

We don't use strict: true in TypeScript for a reason (at Infinite Red), but if it's reasonably straightforward to enhance Ignite's boilerplate to work fine when it's flipped on, I don't see a reason why we wouldn't entertain a PR to that effect.

Regarding getActiveRouteName, you may be right that it's not working properly anymore. I'll see if @harrisrobin can take a look!

[harrisrobin]

@nonameolsson yes you're right, the getActiveRouteName util is outdated and is not recommended anymore. The correct approach now would be to use navigationRef.current.getCurrentRoute.

Can you try my fix in https://github.com/infinitered/ignite/pull/1772 and see if that works for you?

Cheers

[joshuayoes]

There has been a lot of changes since this issue last had activity. This is going to be closed for now, but please re-open if this still needs attention.