Cannot understand why this warning is displayed – Accessing the ‘state’ property of the ‘route’ object is not supported

Current Behavior

  • What code are you running and what is happening?

I have made a small example to reproduce the issue:
https://github.com/mlecoq/materialTopTabBarIssue

I have nested navigators (here 2 top tab bar but I also reproduce the issue with one bottom and one top tab bar)

And I want to add a bottom sheet modal (see https://github.com/gorhom/react-native-bottom-sheet)

When I navigate between sub tabs (2.1 and 2.2) the following error is displayed

 Accessing the 'state' property of the 'route' object is not supported. If you want to get the focused route name, use the 'getFocusedRouteNameFromRoute' helper instead: https://reactnavigation.org/docs/screen-options-resolution/#setting-parent-screen-options-based-on-child-navigators-state 

Whereas I do not access directly to the state of the route

  • Include a screenshot or video if it makes sense.

Screenshot_1613483026

Expected Behavior

  • What do you expect should be happening?
    The same behavior without warning

  • Include a screenshot or video if it makes sense.

How to reproduce

run this example app on android (didn’t try on iOS)

yarn android

https://github.com/mlecoq/materialTopTabBarIssue

and then navigate to TAB 2.2 then 2.1 then 2.2

Your Environment

software version
iOS or Android Android
@react-navigation/native 5.9.2
@react-navigation/material-top-tabs 5.3.13
react-native-tab-view 2.15.2
react-native 0.63.4
expo 40.0.1 (I use expo – I had to eject due to #7981 (comment) – in the example but I encounter the same issue without expo)
node 14.5.0
npm or yarn yarn

1 possible answer(s) on “Cannot understand why this warning is displayed – Accessing the ‘state’ property of the ‘route’ object is not supported

  1. It’s because of the BottomSheetModal which is doing a deep comparision of props, and due to this deep comparision, it’s diffing everything you pass in children which will include react internals such as the parent elements, their props etc. which may include route. And due to the deep comparision, it accessess all properties on route including the state object.

    I don’t get why they are doing this. It sounds extermely expensive and is generally always going to be false for things which pass children.

    Since it’s an issue in the bottom sheet module, please open an issue there.