Tab Navigator and Stack Navigator: Does deep‑link navigation announce screen titles for accessibility?

Direct Answer

No. React Navigation 6.x does not automatically announce screen titles when a deep link or programmatic reset targets a navigator nested inside another navigator (for example, a StackNavigator inside a TabNavigator). The library’s built-in accessibility focus handling only announces titles for top-level stack transitions. Nested navigator state changes do not bubble an announcement event, and there is no supported prop or configuration (such as announceTitle or accessibilityAnnounce) to enable this behavior in v6.x.

Why It Happens

React Navigation’s NavigationContainer and the useNavigation focus handlers propagate accessibility focus to the immediate active screen of the root navigator. When a deep link like navigation.navigate('Root', { screen: 'TabTwo', params: { screen: 'NestedDetail' } }) resolves, the nested stack updates its internal state, but the root navigator’s focus manager does not treat this as a screen change that warrants a title announcement. The refactor in v6.x that centralized focus handling inadvertently left nested transitions without an announcement path.

Confirmed Workaround

Until a future RFC adds a standardized accessibilityAnnounce hook, the maintainers recommend manually announcing the title. Attach a state listener to the nested navigator:

import { AccessibilityInfo } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function NestedStack() {
  const navigation = useNavigation();

  React.useEffect(() => {
    const unsub = navigation.addListener('state', (state) => {
      const route = state.routes[state.index];
      if (route?.name) {
        AccessibilityInfo.announceForAccessibility(route.name);
      }
    });
    return unsub;
  }, [navigation]);

  return (
    <Stack.Navigator
      screenOptions={({ route }) => ({ headerTitle: route.name })}
    >
      {/* screens */}
    </Stack.Navigator>
  );
}

Guard the announcement with navigation.isFocused() or a debounce to avoid overload when multiple state events fire rapidly.

Verification Steps

1. Create a minimal repro: TabNavigator with two tabs; the second tab contains a StackNavigator with two screens.
2. Deep-link to the nested detail screen: navigation.navigate('Root', { screen: 'TabTwo', params: { screen: 'NestedDetail' } }).
3. Run on a physical device or emulator with TalkBack (Android) and VoiceOver (iOS) enabled.
4. Observe that the top-level tab switch announces, but the nested screen arrival stays silent.
5. Add the listener above and verify the title is announced.

One Missing Diagnostic Detail

Which exact React Navigation version (e.g., 6.1.9, 6.0.0) and React Native version are you testing on? The behavior is consistent across the 6.x line, but a patch release could introduce a regression or partial fix that changes the recommendation.