Get rid of all references to route.state

Author: satya164

blog/2020-01-29-using-react-navigation-5-with-react-native-paper.md

@@ -690,10 +690,7 @@ const Tab = createMaterialBottomTabNavigator();
 
 export const BottomTabs = props => {
   // Get a name of current screen
-  const routeName = props.route.state
-    ? props.route.state.routes[props.route.state.index].name
-    : 'Feed';
-
+  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
   const isFocused = useIsFocused();
 
   let icon = 'feather';

versioned_docs/version-5.x/screen-options-resolution.md

@@ -115,7 +115,7 @@ export default function App() {
 
 If we were to set the `headerTitle` with `options` for the `FeedScreen`, this would not work. This is because `App` stack will only look at its immediate children for configuration: `HomeTabs` and `SettingsScreen`.
 
-But we can determine the `headerTitle` option based on the navigation state of our tab navigator using the `route.state` property. Let's create a function to get the title from `route.state` first:
+But we can determine the `headerTitle` option based on the navigation state of our tab navigator using the `getFocusedRouteNameFromRoute` property. Let's create a function to get the title first:
 
 ```js
 import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
@@ -171,9 +171,7 @@ Then we can use this function in 2 ways:
    }
    ```
 
-So what's happening here? The `route` prop contains a `state` property which refers to the child navigator's state (in this case it's the tab navigator since that's what we're rendering). We are getting the value of the currently active route name from this state and setting an appropriate title for the header.
-
-> Note: The `route.state` property may not exist at all. This will always happen if we have never navigated inside the tab navigator. So it's very important to handle this case, otherwise, your app will crash.
+So what's happening here? With the `getFocusedRouteNameFromRoute` helper, we can get the currently active route name from this child navigator (in this case it's the tab navigator since that's what we're rendering) and setting an appropriate title for the header.
 
 This approach can be used anytime you want to set options for a parent navigator based on a child navigator's state. Common use cases are: