React Navigation Documentation

The 8.0 alpha release introduces several significant improvements and new capabilities:

• Native Bottom Tabs by default: Improved performance and platform integration for tab navigation.
• Enhanced Parent Access: Ability to access route, navigation, and state for any parent screen.
• Improved TypeScript Support: Better types specifically for static configuration.
• History Management: Ability to push history entries without pushing new screens.
• Theming Enhancements: Support for PlatformColor, DynamicColorIOS, and CSS custom properties within the theme.
• Deep Linking: Support for deep linking directly to screens that are behind conditional rendering logic.
• State Persistence: A new Persistor for maintaining navigation state across sessions.

React Navigation 8.0 Alpha introduces several significant improvements and new features focused on performance, developer experience, and platform integration. Key highlights include:

• Native Bottom Tabs by default: Improved performance and platform consistency.
• Enhanced Parent Access: Direct access to route, navigation, and state for any parent screen.
• Improved TypeScript Support: Better types for static configuration.
• History Management: Ability to push history entries without pushing new screens.
• Theming Improvements: Support for PlatformColor, DynamicColorIOS, and CSS custom properties within the theme.
• Deep Linking: Support for deep linking to screens that are behind conditional rendering.
• State Persistence: A new Persistor for managing state persistence.

The Group component allows you to organize screens within a navigator and apply shared screenOptions to all screens within that group.

• Functionality: It is a lightweight component that does not render anything (similar to a Fragment) and does not impact performance.
• Nesting: You can nest Group components inside other Group components.
• Overriding: Options set on a Group can be overridden by passing specific options to individual Screen components.

function App() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen name="CreatePost" component={CreatePostScreen} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

React Navigation 2.0 implements shallow navigation options.

Previously, navigators would crawl into child navigators to pull navigationOptions from the deepest active screen. This often caused unexpected side effects, such as a parent stack's header title changing when a screen inside a child drawer was changed.

Current Behavior: Navigators now only look at their direct children for navigationOptions. This prevents parent navigators from being affected by the configuration of deeply nested screens.

React Navigation 6 prioritizes native primitives for better performance and feature parity with platform defaults:

• Stack Navigation: @react-navigation/native-stack is now the default choice. It uses UINavigationController on iOS and Fragments on Android. It is maintained alongside @react-navigation/stack for compatibility.
• Top Tabs: @react-navigation/material-top-tabs uses react-native-pager-view by default.

Note: @react-navigation/native-stack does not replace @react-navigation/stack; both remain valid options for your projects.

In React Navigation 2.0, navigate(routeName) is "less pushy" than in 1.x.

• navigate(routeName): Instead of always pushing a new route, it first attempts to find an existing instance of the route in the stack. If found, it jumps to that instance; otherwise, it pushes the route.
• push(routeName): Continues to push a new route onto the stack every time it is called.

How to update: If you require a new route to be pushed every time (the 1.x behavior), switch from navigate to push. Alternatively, you can use a unique key to ensure a new route is created:

navigate({
  routeName: 'MyRoute',
  key: data.uniqueId,
  params: data
});

In React Navigation 8, the ID returned by getId behaves more like a route name. It matches routes by ID without rearranging the stack.

New Behavior:

• If you are already on a screen with the same ID, it updates its params without pushing a new screen.
• If you are on a different screen, it pushes the new screen onto the stack.
• If you navigate to a route with an existing ID and use pop: true, it pops back to the matching route instead of moving it to the top.

This change was made to resolve broken behavior in the Native Stack Navigator.

In React Navigation 2.0, navigate(routeName) is "less pushy" than in 1.x. Instead of always pushing a new route onto the stack, navigate will first attempt to find an existing instance of the route and jump to it.

How to adapt:

• If you want to ensure a new route is pushed every time, use push(routeName) instead.
• Alternatively, use a unique key to force a new instance: navigate({ routeName: 'MyRoute', key: data.uniqueId, params: data }).