feat: add helper to get focused route name from nested state (#8435)

Currently, to access the focused child screen, we need to do something like this:

```js
const routeName = route.state
  ? route.state.routes[route.state.index].name
  : route.params?.screen || 'Feed';
```

However, it doesn't handle some cases, such as when `route.state` is partial. This helper will make it easier:

```js
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Feed';
```

example/src/Screens/BottomTabs.tsx

@@ -2,6 +2,11 @@ import * as React from 'react';
 import { View, ScrollView, StyleSheet, Platform } from 'react-native';
 import { Button } from 'react-native-paper';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
+import {
+  getFocusedRouteNameFromRoute,
+  ParamListBase,
+} from '@react-navigation/native';
+import { StackScreenProps } from '@react-navigation/stack';
 import {
   createBottomTabNavigator,
   BottomTabNavigationProp,
@@ -59,7 +64,18 @@ const AlbumsScreen = ({
 
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
 
-export default function BottomTabsScreen() {
+export default function BottomTabsScreen({
+  navigation,
+  route,
+}: StackScreenProps<ParamListBase, string>) {
+  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Article';
+
+  React.useLayoutEffect(() => {
+    navigation.setOptions({
+      title: routeName,
+    });
+  }, [navigation, routeName]);
+
   return (
     <BottomTabs.Navigator
       screenOptions={{