fix: add merge to the navigate types

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -1,5 +1,5 @@
-name: React Navigation 6
-description: Report an issue with React Navigation 6
+name: React Navigation 5
+description: Report an issue with React Navigation 5
 labels: [bug]
 body:
   - type: markdown
@@ -67,7 +67,6 @@ body:
         - label: '@react-navigation/material-bottom-tabs'
         - label: '@react-navigation/material-top-tabs'
         - label: '@react-navigation/stack'
-        - label: '@react-navigation/native-stack'
     validations:
       required: true
   - type: textarea
@@ -76,7 +75,7 @@ body:
       description: |
         What are the exact versions of packages that you are using?
 
-        When filling the table below, **please remove the packages** that you're not using.
+        When filling the table below, remove the packages that you're not using.
       value: |
         | package                                | version |
         | -------------------------------------- | ------- |
@@ -86,7 +85,6 @@ body:
         | @react-navigation/material-bottom-tabs |
         | @react-navigation/material-top-tabs    |
         | @react-navigation/stack                |
-        | @react-navigation/native-stack         |
         | react-native-safe-area-context         |
         | react-native-screens                   |
         | react-native-gesture-handler           |

.github/ISSUE_TEMPLATE/config.yml

@@ -1,7 +1,7 @@
 blank_issues_enabled: false
 contact_links:
   - name: Troubleshooting
-    url: https://reactnavigation.org/docs/troubleshooting
+    url: https://reactnavigation.org/docs/troubleshooting.html
     about: Read how to troubleshoot and fix common issues and mistakes.
   - name: Documentation
     url: https://reactnavigation.org
@@ -9,12 +9,12 @@ contact_links:
   - name: Feature requests
     url: https://react-navigation.canny.io/feature-requests
     about: Post a feature request on Canny.
-  - name: Discussions
-    url: https://github.com/react-navigation/react-navigation/discussions
-    about: Discuss questions, ideas etc. and share resources related to the library.
   - name: StackOverflow
     url: https://stackoverflow.com/questions/tagged/react-navigation
     about: Ask and answer questions using the react-navigation label.
   - name: Reactiflux
     url: https://www.reactiflux.com/
     about: Chat with other community members in the help-react-native channel.
+  - name: Write an RFC
+    url: https://github.com/react-navigation/rfcs
+    about: Write a RFC if you have ideas for how to implement a feature request.

.github/workflows/check-labels.yml

@@ -24,7 +24,6 @@ jobs:
                   'material-bottom-tabs',
                   'material-top-tabs',
                   'stack',
-                  'native-stack',
                 ].includes(name)
               )
               .map((name) => `package:${name}`);

.github/workflows/triage.yml

@@ -124,21 +124,6 @@ jobs:
               body: "Hey! Thanks for opening the issue. Seems that this issue is related to `react-native-safe-area-context` library which is a dependency of React Navigation. Can you also post your issue in [this repo](https://github.com/th3rdwave/react-native-safe-area-context) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })
 
-  react-native-pager-view:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == 'library:react-native-pager-view'
-    steps:
-      - uses: actions/github-script@v3
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Seems that this issue is related to `react-native-pager-view` library which is a dependency of Material Top Tabs. Can you also post your issue in [this repo](https://github.com/callstack/react-native-pager-view) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
-            })
-
   react-native-paper:
     runs-on: ubuntu-latest
     if: github.event.label.name == 'library:react-native-paper'
@@ -151,5 +136,5 @@ jobs:
               issue_number: context.issue.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: "Hey! Thanks for opening the issue. Seems that this issue is in `react-native-paper` library which is a dependency of Material Bottom Tabs. Can you also post your issue in [this repo](https://github.com/callstack/react-native-paper) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
+              body: "Hey! Thanks for opening the issue. Seems that this issue is in `react-native-paper` library which is a dependency of Material Bottom Navigation. Can you also post your issue in [this repo](https://github.com/callstack/react-native-paper) so that it's notified to the maintainers of that library? This will help us fix the issue faster since it's upto the maintainers of that library to investigate it."
             })

README.md

@@ -1,4 +1,4 @@
-# React Navigation 6
+# React Navigation 5
 
 [![Build Status][build-badge]][build]
 [![Code Coverage][coverage-badge]][coverage]

example/src/Screens/BottomTabs.tsx

@@ -2,17 +2,16 @@ import {
   createBottomTabNavigator,
   useBottomTabBarHeight,
 } from '@react-navigation/bottom-tabs';
-import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements';
+import { HeaderBackButton } from '@react-navigation/elements';
 import {
   getFocusedRouteNameFromRoute,
   NavigatorScreenParams,
   ParamListBase,
-  useIsFocused,
 } from '@react-navigation/native';
 import type { StackScreenProps } from '@react-navigation/stack';
 import { BlurView } from 'expo-blur';
 import * as React from 'react';
-import { ScrollView, StatusBar, StyleSheet } from 'react-native';
+import { ScrollView, StyleSheet } from 'react-native';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import Albums from '../Shared/Albums';
@@ -33,22 +32,12 @@ type BottomTabParams = {
 };
 
 const AlbumsScreen = () => {
-  const headerHeight = useHeaderHeight();
   const tabBarHeight = useBottomTabBarHeight();
-  const isFocused = useIsFocused();
 
   return (
-    <>
-      {isFocused && <StatusBar barStyle="light-content" />}
-      <ScrollView
-        contentContainerStyle={{
-          paddingTop: headerHeight,
-          paddingBottom: tabBarHeight,
-        }}
-      >
-        <Albums scrollEnabled={false} />
-      </ScrollView>
-    </>
+    <ScrollView contentContainerStyle={{ paddingBottom: tabBarHeight }}>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
   );
 };
 
@@ -105,25 +94,11 @@ export default function BottomTabsScreen({
         component={AlbumsScreen}
         options={{
           title: 'Albums',
-          headerTintColor: '#fff',
-          headerTransparent: true,
-          headerBackground: () => (
-            <BlurView
-              tint="dark"
-              intensity={100}
-              style={StyleSheet.absoluteFill}
-            />
-          ),
           tabBarIcon: getTabBarIcon('image-album'),
-          tabBarInactiveTintColor: 'rgba(255, 255, 255, 0.5)',
-          tabBarActiveTintColor: '#fff',
-          tabBarStyle: {
-            position: 'absolute',
-            borderTopColor: 'rgba(0, 0, 0, .2)',
-          },
+          tabBarStyle: { position: 'absolute' },
           tabBarBackground: () => (
             <BlurView
-              tint="dark"
+              tint="light"
               intensity={100}
               style={StyleSheet.absoluteFill}
             />

example/src/Screens/NativeStack.tsx

@@ -154,7 +154,7 @@ export default function NativeStackScreen({
           title: 'Albums',
           presentation: 'modal',
           headerShadowVisible: true,
-          headerTransparent: true,
+          headerTranslucent: true,
           headerBlurEffect: 'light',
         }}
       />

package.json

@@ -1,5 +1,5 @@
 {
-  "description": "Routing and navigation for your React Native apps",
+  "description": "Rethinking navigation",
   "private": true,
   "workspaces": {
     "packages": [

packages/bottom-tabs/CHANGELOG.md

@@ -3,55 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.4...@react-navigation/bottom-tabs@6.0.5) (2021-08-17)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.3...@react-navigation/bottom-tabs@6.0.4) (2021-08-11)
-
-
-### Bug Fixes
-
-* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
-
-
-
-
-
-## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.2...@react-navigation/bottom-tabs@6.0.3) (2021-08-09)
-
-**Note:** Version bump only for package @react-navigation/bottom-tabs
-
-
-
-
-
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.1...@react-navigation/bottom-tabs@6.0.2) (2021-08-07)
-
-
-### Bug Fixes
-
-* avoid blink when switching tab screens ([40dcbcf](https://github.com/react-navigation/react-navigation/commit/40dcbcf2fa48d5367d3121ef9f0ad6c1dd5933c6))
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0...@react-navigation/bottom-tabs@6.0.1) (2021-08-03)
-
-
-### Bug Fixes
-
-* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/bottom-tabs@6.0.0-next.22...@react-navigation/bottom-tabs@6.0.0) (2021-08-01)
 
 

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "6.0.5",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,12 +36,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.1.0",
+    "@react-navigation/elements": "^1.0.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",

packages/bottom-tabs/src/views/Badge.tsx

@@ -48,8 +48,6 @@ export default function Badge({
         setRendered(false);
       }
     });
-
-    return () => opacity.stopAnimation();
   }, [opacity, rendered, visible]);
 
   if (visible && !rendered) {

packages/bottom-tabs/src/views/BottomTabBar.tsx

@@ -145,10 +145,6 @@ export default function BottomTabBar({
     tabBarVisibilityAnimationConfig,
     tabBarStyle,
     tabBarBackground,
-    tabBarActiveTintColor,
-    tabBarInactiveTintColor,
-    tabBarActiveBackgroundColor,
-    tabBarInactiveBackgroundColor,
   } = focusedOptions;
 
   const dimensions = useSafeAreaFrame();
@@ -206,8 +202,6 @@ export default function BottomTabBar({
         ...visibilityAnimationConfig?.hide?.config,
       }).start();
     }
-
-    return () => visible.stopAnimation();
   }, [visible, shouldShowTabBar]);
 
   const [layout, setLayout] = React.useState({
@@ -305,7 +299,7 @@ export default function BottomTabBar({
 
             if (!focused && !event.defaultPrevented) {
               navigation.dispatch({
-                ...CommonActions.navigate({ name: route.name, merge: true }),
+                ...CommonActions.navigate(route.name),
                 target: state.key,
               });
             }
@@ -348,10 +342,12 @@ export default function BottomTabBar({
                   to={buildLink(route.name, route.params)}
                   testID={options.tabBarTestID}
                   allowFontScaling={options.tabBarAllowFontScaling}
-                  activeTintColor={tabBarActiveTintColor}
-                  inactiveTintColor={tabBarInactiveTintColor}
-                  activeBackgroundColor={tabBarActiveBackgroundColor}
-                  inactiveBackgroundColor={tabBarInactiveBackgroundColor}
+                  activeTintColor={options.tabBarActiveTintColor}
+                  inactiveTintColor={options.tabBarInactiveTintColor}
+                  activeBackgroundColor={options.tabBarActiveBackgroundColor}
+                  inactiveBackgroundColor={
+                    options.tabBarInactiveBackgroundColor
+                  }
                   button={options.tabBarButton}
                   icon={
                     options.tabBarIcon ??

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -121,7 +121,7 @@ export default function BottomTabView(props: Props) {
           return (
             <MaybeScreen
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
+              style={StyleSheet.absoluteFill}
               visible={isFocused}
               enabled={detachInactiveScreens}
             >
@@ -131,7 +131,6 @@ export default function BottomTabView(props: Props) {
                   route={descriptor.route}
                   navigation={descriptor.navigation}
                   headerShown={descriptor.options.headerShown}
-                  headerTransparent={descriptor.options.headerTransparent}
                   headerStatusBarHeight={
                     descriptor.options.headerStatusBarHeight
                   }

packages/core/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0...@react-navigation/core@6.0.1) (2021-08-03)
-
-
-### Bug Fixes
-
-* add merge to the navigate types ([#9777](https://github.com/react-navigation/react-navigation/issues/9777)) ([be8532c](https://github.com/react-navigation/react-navigation/commit/be8532c0867bdb0cff4b29c0892bdfe85c33e8e3))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/core@6.0.0-next.17...@react-navigation/core@6.0.0) (2021-08-01)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "6.0.1",
+  "version": "6.0.0",
   "keywords": [
     "react",
     "react-native",
@@ -35,7 +35,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^6.0.1",
+    "@react-navigation/routers": "^6.0.0",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23",
     "query-string": "^7.0.0",

packages/core/src/BaseNavigationContainer.tsx

@@ -192,13 +192,12 @@ const BaseNavigationContainer = React.forwardRef(
           return acc;
         }, {}),
         ...emitter.create('root'),
-        dispatch,
         resetRoot,
-        isFocused: () => true,
+        dispatch,
         canGoBack,
-        getParent: () => undefined,
-        getState: () => stateRef.current,
         getRootState,
+        getState: () => stateRef.current,
+        getParent: () => undefined,
         getCurrentRoute,
         getCurrentOptions,
         isReady: () => listeners.focus[0] != null,

packages/core/src/__tests__/createNavigationContainerRef.test.tsx

@@ -1,47 +0,0 @@
-import type { NavigationState, ParamListBase } from '@react-navigation/routers';
-import { render } from '@testing-library/react-native';
-import * as React from 'react';
-
-import BaseNavigationContainer from '../BaseNavigationContainer';
-import createNavigationContainerRef from '../createNavigationContainerRef';
-import Screen from '../Screen';
-import useNavigationBuilder from '../useNavigationBuilder';
-import MockRouter from './__fixtures__/MockRouter';
-
-it('adds the listener even if container is mounted later', () => {
-  const ref = createNavigationContainerRef<ParamListBase>();
-  const listener = jest.fn();
-
-  ref.addListener('state', listener);
-
-  const TestNavigator = (props: any) => {
-    const { state, descriptors } = useNavigationBuilder<
-      NavigationState,
-      any,
-      {},
-      { title?: string },
-      any
-    >(MockRouter, props);
-    const { render, options } = descriptors[state.routes[state.index].key];
-
-    return (
-      <main>
-        <h1>{options.title}</h1>
-        <div>{render()}</div>
-      </main>
-    );
-  };
-
-  const element = (
-    <BaseNavigationContainer ref={ref}>
-      <TestNavigator>
-        <Screen name="foo">{() => null}</Screen>
-        <Screen name="bar">{() => null}</Screen>
-      </TestNavigator>
-    </BaseNavigationContainer>
-  );
-
-  render(element).update(element);
-
-  expect(listener).toHaveBeenCalledTimes(1);
-});

packages/core/src/createNavigationContainerRef.tsx

@@ -1,10 +1,6 @@
 import { CommonActions } from '@react-navigation/routers';
 
-import type {
-  NavigationContainerEventMap,
-  NavigationContainerRef,
-  NavigationContainerRefWithCurrent,
-} from './types';
+import type { NavigationContainerRefWithCurrent } from './types';
 
 export const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
@@ -18,7 +14,6 @@ export default function createNavigationContainerRef<
     'removeListener',
     'resetRoot',
     'dispatch',
-    'isFocused',
     'canGoBack',
     'getRootState',
     'getState',
@@ -27,70 +22,26 @@ export default function createNavigationContainerRef<
     'getCurrentOptions',
   ] as const;
 
-  const listeners: Record<string, ((...args: any[]) => void)[]> = {};
-
-  const removeListener = (
-    event: string,
-    callback: (...args: any[]) => void
-  ) => {
-    listeners[event] = listeners[event]?.filter((cb) => cb !== callback);
-  };
-
-  let current: NavigationContainerRef<ParamList> | null = null;
-
   const ref: NavigationContainerRefWithCurrent<ParamList> = {
-    get current() {
-      return current;
-    },
-    set current(value: NavigationContainerRef<ParamList> | null) {
-      current = value;
-
-      if (value != null) {
-        Object.entries(listeners).forEach(([event, callbacks]) => {
-          callbacks.forEach((callback) => {
-            value.addListener(
-              event as keyof NavigationContainerEventMap,
-              callback
-            );
-          });
-        });
-      }
-    },
-    isReady: () => {
-      if (current == null) {
-        return false;
-      }
-
-      return current.isReady();
-    },
     ...methods.reduce<any>((acc, name) => {
       acc[name] = (...args: any[]) => {
-        if (current == null) {
-          switch (name) {
-            case 'addListener': {
-              const [event, callback] = args;
-
-              listeners[event] = listeners[event] || [];
-              listeners[event].push(callback);
-
-              return () => removeListener(event, callback);
-            }
-            case 'removeListener': {
-              const [event, callback] = args;
-
-              removeListener(event, callback);
-              break;
-            }
-            default:
-              console.error(NOT_INITIALIZED_ERROR);
-          }
+        if (ref.current == null) {
+          console.error(NOT_INITIALIZED_ERROR);
         } else {
           // @ts-expect-error: this is ok
-          return current[name](...args);
+          return ref.current[name](...args);
         }
       };
       return acc;
     }, {}),
+    isReady: () => {
+      if (ref.current == null) {
+        return false;
+      }
+
+      return ref.current.isReady();
+    },
+    current: null,
   };
 
   return ref;

packages/core/src/createNavigatorFactory.tsx

@@ -27,7 +27,7 @@ export default function createNavigatorFactory<
   > {
     if (arguments[0] !== undefined) {
       throw new Error(
-        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API? See https://reactnavigation.org/docs/hello-react-navigation for the latest API and guides."
+        "Creating a navigator doesn't take an argument. Maybe you are trying to use React Navigation 4 API with React Navigation 5? See https://reactnavigation.org/docs/upgrading-from-4.x for migration guide."
       );
     }
 

packages/devtools/CHANGELOG.md

@@ -3,14 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0...@react-navigation/devtools@6.0.1) (2021-08-03)
-
-**Note:** Version bump only for package @react-navigation/devtools
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/devtools@6.0.0-next.19...@react-navigation/devtools@6.0.0) (2021-08-01)
 
 **Note:** Version bump only for package @react-navigation/devtools

packages/devtools/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/devtools",
   "description": "Developer tools for React Navigation",
-  "version": "6.0.1",
+  "version": "6.0.0",
   "keywords": [
     "react",
     "react-native",
@@ -40,7 +40,7 @@
     "nanoid": "^3.1.23"
   },
   "devDependencies": {
-    "@react-navigation/core": "^6.0.1",
+    "@react-navigation/core": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/deep-equal": "^1.0.1",
     "@types/react": "^17.0.9",

packages/drawer/CHANGELOG.md

@@ -3,71 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.1.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.3...@react-navigation/drawer@6.1.4) (2021-08-17)
-
-**Note:** Version bump only for package @react-navigation/drawer
-
-
-
-
-
-## [6.1.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.2...@react-navigation/drawer@6.1.3) (2021-08-11)
-
-
-### Bug Fixes
-
-* use correct tint and background color from drawer items ([f8fddac](https://github.com/react-navigation/react-navigation/commit/f8fddac79d0f95aa4ece6b1c7645619f5497a112))
-
-
-
-
-
-## [6.1.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.1...@react-navigation/drawer@6.1.2) (2021-08-11)
-
-
-### Bug Fixes
-
-* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
-
-
-
-
-
-## [6.1.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.1.0...@react-navigation/drawer@6.1.1) (2021-08-09)
-
-**Note:** Version bump only for package @react-navigation/drawer
-
-
-
-
-
-# [6.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.1...@react-navigation/drawer@6.1.0) (2021-08-07)
-
-
-### Bug Fixes
-
-* blink while switching screens ([#9705](https://github.com/react-navigation/react-navigation/issues/9705)) ([99735e1](https://github.com/react-navigation/react-navigation/commit/99735e1b730a2f308ba00dcaef54d5ec14769a3d))
-
-
-### Features
-
-* use forwardRef with DrawerContentScrollView ([#9695](https://github.com/react-navigation/react-navigation/issues/9695)) ([ebb5f24](https://github.com/react-navigation/react-navigation/commit/ebb5f246645246b445b1fd22d8ae8fe87d3d7c52)), closes [#9350](https://github.com/react-navigation/react-navigation/issues/9350)
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0...@react-navigation/drawer@6.0.1) (2021-08-03)
-
-
-### Bug Fixes
-
-* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/drawer@6.0.0-next.21...@react-navigation/drawer@6.0.0) (2021-08-01)
 
 

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "6.1.4",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,12 +41,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.1.0",
+    "@react-navigation/elements": "^1.0.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/drawer/src/views/DrawerContent.tsx

@@ -9,11 +9,8 @@ export default function DrawerContent({
   state,
   ...rest
 }: DrawerContentComponentProps) {
-  const focusedRoute = state.routes[state.index];
-  const focusedDescriptor = descriptors[focusedRoute.key];
-  const focusedOptions = focusedDescriptor.options;
-
-  const { drawerContentStyle, drawerContentContainerStyle } = focusedOptions;
+  const { drawerContentStyle, drawerContentContainerStyle } =
+    descriptors[state.routes[state.index].key].options;
 
   return (
     <DrawerContentScrollView

packages/drawer/src/views/DrawerContentScrollView.tsx

@@ -13,10 +13,12 @@ type Props = ScrollViewProps & {
   children: React.ReactNode;
 };
 
-function DrawerContentScrollView(
-  { contentContainerStyle, style, children, ...rest }: Props,
-  ref?: React.Ref<ScrollView>
-) {
+export default function DrawerContentScrollView({
+  contentContainerStyle,
+  style,
+  children,
+  ...rest
+}: Props) {
   const drawerPosition = React.useContext(DrawerPositionContext);
   const insets = useSafeAreaInsets();
 
@@ -27,7 +29,6 @@ function DrawerContentScrollView(
   return (
     <ScrollView
       {...rest}
-      ref={ref}
       contentContainerStyle={[
         {
           paddingTop: insets.top + 4,
@@ -43,8 +44,6 @@ function DrawerContentScrollView(
   );
 }
 
-export default React.forwardRef(DrawerContentScrollView);
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/drawer/src/views/DrawerItemList.tsx

@@ -26,23 +26,16 @@ export default function DrawerItemList({
 }: Props) {
   const buildLink = useLinkBuilder();
 
-  const focusedRoute = state.routes[state.index];
-  const focusedDescriptor = descriptors[focusedRoute.key];
-  const focusedOptions = focusedDescriptor.options;
-
-  const {
-    drawerActiveTintColor,
-    drawerInactiveTintColor,
-    drawerActiveBackgroundColor,
-    drawerInactiveBackgroundColor,
-  } = focusedOptions;
-
   return state.routes.map((route, i) => {
     const focused = i === state.index;
     const {
       title,
       drawerLabel,
       drawerIcon,
+      drawerActiveTintColor,
+      drawerInactiveTintColor,
+      drawerActiveBackgroundColor,
+      drawerInactiveBackgroundColor,
       drawerLabelStyle,
       drawerItemStyle,
     } = descriptors[route.key].options;
@@ -70,7 +63,7 @@ export default function DrawerItemList({
           navigation.dispatch({
             ...(focused
               ? DrawerActions.closeDrawer()
-              : CommonActions.navigate({ name: route.name, merge: true })),
+              : CommonActions.navigate(route.name)),
             target: state.key,
           });
         }}

packages/drawer/src/views/DrawerView.tsx

@@ -225,7 +225,7 @@ function DrawerViewBase({
           return (
             <MaybeScreen
               key={route.key}
-              style={[StyleSheet.absoluteFill, { zIndex: isFocused ? 0 : -1 }]}
+              style={[StyleSheet.absoluteFill, { opacity: isFocused ? 1 : 0 }]}
               visible={isFocused}
               enabled={detachInactiveScreens}
             >
@@ -234,7 +234,6 @@ function DrawerViewBase({
                 route={descriptor.route}
                 navigation={descriptor.navigation}
                 headerShown={descriptor.options.headerShown}
-                headerTransparent={descriptor.options.headerTransparent}
                 headerStatusBarHeight={descriptor.options.headerStatusBarHeight}
                 header={header({
                   layout: dimensions,

packages/elements/CHANGELOG.md

@@ -3,56 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.4...@react-navigation/elements@1.1.0) (2021-08-17)
-
-
-### Features
-
-* **elements:** add style to SafeAreaProviderCompat props ([#9793](https://github.com/react-navigation/react-navigation/issues/9793)) ([f73aa55](https://github.com/react-navigation/react-navigation/commit/f73aa55fb2b7e7ca65d5f66269a43281f7ce0680))
-
-
-
-
-
-## [1.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.3...@react-navigation/elements@1.0.4) (2021-08-11)
-
-
-### Bug Fixes
-
-* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
-
-
-
-
-
-## [1.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.2...@react-navigation/elements@1.0.3) (2021-08-09)
-
-
-### Bug Fixes
-
-* avoid overflowing long titles ([bacdbbd](https://github.com/react-navigation/react-navigation/commit/bacdbbdd7c5df73b84aa1ed8c0329c9525d0fdba))
-* pass onlayout to headerTitle ([#9808](https://github.com/react-navigation/react-navigation/issues/9808)) ([a79ce57](https://github.com/react-navigation/react-navigation/commit/a79ce57aa7f9be3a47a09728e920c0d4a805f5aa))
-
-
-
-
-
-## [1.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.1...@react-navigation/elements@1.0.2) (2021-08-07)
-
-**Note:** Version bump only for package @react-navigation/elements
-
-
-
-
-
-## [1.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0...@react-navigation/elements@1.0.1) (2021-08-03)
-
-**Note:** Version bump only for package @react-navigation/elements
-
-
-
-
-
 # [1.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/elements@1.0.0-next.21...@react-navigation/elements@1.0.0) (2021-08-01)
 
 

packages/elements/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/elements",
   "description": "UI Components for React Navigation",
-  "version": "1.1.0",
+  "version": "1.0.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@react-native-masked-view/masked-view": "^0.2.4",
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/elements/src/Header/Header.tsx

@@ -32,7 +32,7 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 
     if (styleProp === 'position' && value === 'absolute') {
       console.warn(
-        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' option."
+        "position: 'absolute' is not supported on headerStyle. If you would like to render content under the header, use the 'headerTransparent' navigationOption."
       );
     } else if (value !== undefined) {
       console.warn(
@@ -58,7 +58,6 @@ export default function Header(props: Props) {
       default: 'left',
     }),
     headerLeft,
-    headerLeftLabelVisible,
     headerTransparent,
     headerTintColor,
     headerBackground,
@@ -180,7 +179,6 @@ export default function Header(props: Props) {
         tintColor: headerTintColor,
         pressColor: headerPressColor,
         pressOpacity: headerPressOpacity,
-        labelVisible: headerLeftLabelVisible,
       })
     : null;
 
@@ -234,28 +232,7 @@ export default function Header(props: Props) {
           </Animated.View>
           <Animated.View
             pointerEvents="box-none"
-            style={[
-              styles.title,
-              {
-                // Avoid the title from going offscreen or overlapping buttons
-                maxWidth:
-                  headerTitleAlign === 'center'
-                    ? layout.width -
-                      ((leftButton
-                        ? headerLeftLabelVisible !== false
-                          ? 80
-                          : 32
-                        : 16) +
-                        Math.max(insets.left, insets.right)) *
-                        2
-                    : layout.width -
-                      ((leftButton ? 72 : 16) +
-                        (rightButton ? 72 : 16) +
-                        insets.left -
-                        insets.right),
-              },
-              titleContainerStyle,
-            ]}
+            style={[{ marginHorizontal: 16 }, titleContainerStyle]}
           >
             {headerTitle({
               children: title,
@@ -285,10 +262,7 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     flexDirection: 'row',
-    alignItems: 'stretch',
-  },
-  title: {
-    marginHorizontal: 16,
+    alignItems: 'center',
     justifyContent: 'center',
   },
   left: {

packages/elements/src/Header/HeaderBackButton.tsx

@@ -20,7 +20,7 @@ export default function HeaderBackButton({
   backImage,
   label,
   labelStyle,
-  labelVisible,
+  labelVisible = Platform.OS === 'ios',
   onLabelLayout,
   onPress,
   pressColor,
@@ -171,7 +171,6 @@ const styles = StyleSheet.create({
   container: {
     alignItems: 'center',
     flexDirection: 'row',
-    minWidth: StyleSheet.hairlineWidth, // Avoid collapsing when title is long
     ...Platform.select({
       ios: null,
       default: {

packages/elements/src/SafeAreaProviderCompat.tsx

@@ -1,12 +1,5 @@
 import * as React from 'react';
-import {
-  Dimensions,
-  Platform,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
+import { Dimensions, Platform } from 'react-native';
 import {
   initialWindowMetrics,
   SafeAreaInsetsContext,
@@ -15,7 +8,6 @@ import {
 
 type Props = {
   children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
 };
 
 const { width = 0, height = 0 } = Dimensions.get('window');
@@ -31,7 +23,7 @@ const initialMetrics =
       }
     : initialWindowMetrics;
 
-export default function SafeAreaProviderCompat({ children, style }: Props) {
+export default function SafeAreaProviderCompat({ children }: Props) {
   return (
     <SafeAreaInsetsContext.Consumer>
       {(insets) => {
@@ -39,11 +31,11 @@ export default function SafeAreaProviderCompat({ children, style }: Props) {
           // If we already have insets, don't wrap the stack in another safe area provider
           // This avoids an issue with updates at the cost of potentially incorrect values
           // https://github.com/react-navigation/react-navigation/issues/174
-          return <View style={[styles.container, style]}>{children}</View>;
+          return children;
         }
 
         return (
-          <SafeAreaProvider initialMetrics={initialMetrics} style={style}>
+          <SafeAreaProvider initialMetrics={initialMetrics}>
             {children}
           </SafeAreaProvider>
         );
@@ -53,9 +45,3 @@ export default function SafeAreaProviderCompat({ children, style }: Props) {
 }
 
 SafeAreaProviderCompat.initialMetrics = initialMetrics;
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});

packages/elements/src/Screen.tsx

@@ -25,7 +25,6 @@ type Props = {
   header: React.ReactNode;
   headerShown?: boolean;
   headerStatusBarHeight?: number;
-  headerTransparent?: boolean;
   style?: StyleProp<ViewStyle>;
   children: React.ReactNode;
 };
@@ -42,7 +41,6 @@ export default function Screen(props: Props) {
     modal = false,
     header,
     headerShown = true,
-    headerTransparent,
     headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     navigation,
     route,
@@ -80,7 +78,6 @@ export default function Screen(props: Props) {
 
                 setHeaderHeight(height);
               }}
-              style={headerTransparent ? styles.absolute : null}
             >
               {header}
             </View>
@@ -100,10 +97,4 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
   },
-  absolute: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-  },
 });

packages/elements/src/types.tsx

@@ -16,7 +16,26 @@ export type HeaderOptions = {
    * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
    * The title string is passed in `children`.
    */
-  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
+  headerTitle?:
+    | string
+    | ((props: {
+        /**
+         * The title text of the header.
+         */
+        children: string;
+        /**
+         * Whether title font should scale to respect Text Size accessibility settings.
+         */
+        allowFontScaling?: boolean;
+        /**
+         * Tint color for the header.
+         */
+        tintColor?: string;
+        /**
+         * Style object for the title element.
+         */
+        style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
+      }) => React.ReactNode);
   /**
    * How to align the the header title.
    * Defaults to `center` on iOS and `left` on Android.
@@ -41,12 +60,7 @@ export type HeaderOptions = {
     tintColor?: string;
     pressColor?: string;
     pressOpacity?: number;
-    labelVisible?: boolean;
   }) => React.ReactNode;
-  /**
-   * Whether a label is visible in the left button. Used to add extra padding.
-   */
-  headerLeftLabelVisible?: boolean;
   /**
    * Style object for the container of the `headerLeft` element`.
    */
@@ -107,29 +121,6 @@ export type HeaderOptions = {
   headerStatusBarHeight?: number;
 };
 
-export type HeaderTitleProps = {
-  /**
-   * The title text of the header.
-   */
-  children: string;
-  /**
-   * Whether title font should scale to respect Text Size accessibility settings.
-   */
-  allowFontScaling?: boolean;
-  /**
-   * Tint color for the header.
-   */
-  tintColor?: string;
-  /**
-   * Callback to trigger when the size of the title element changes.
-   */
-  onLayout?: (e: LayoutChangeEvent) => void;
-  /**
-   * Style object for the title element.
-   */
-  style?: Animated.WithAnimatedValue<StyleProp<TextStyle>>;
-};
-
 export type HeaderBackButtonProps = {
   /**
    * Whether the button is disabled.

packages/flipper-plugin-react-navigation/CHANGELOG.md

@@ -3,14 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [1.3.4](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.3...flipper-plugin-react-navigation@1.3.4) (2021-08-03)
-
-**Note:** Version bump only for package flipper-plugin-react-navigation
-
-
-
-
-
 ## [1.3.3](https://github.com/react-navigation/react-navigation/compare/flipper-plugin-react-navigation@1.3.2...flipper-plugin-react-navigation@1.3.3) (2021-08-01)
 
 **Note:** Version bump only for package flipper-plugin-react-navigation

packages/flipper-plugin-react-navigation/README.md

@@ -3,16 +3,3 @@
 Flipper plugin with developer tools for React Navigation.
 
 Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/devtools).
-
-
-## Development
-
-Edit `~/.flipper/config.json` (while flipper is not opened)
-
-```json
-{
-  "pluginPaths": ["/path/to/react-navigation/packages"]
-}
-```
-
-and run `yarn watch` in `flipper-plugin-react-navigation`

packages/flipper-plugin-react-navigation/package.json

@@ -2,7 +2,7 @@
   "$schema": "https://fbflipper.com/schemas/plugin-package/v2.json",
   "name": "flipper-plugin-react-navigation",
   "description": "Developer tools for React Navigation",
-  "version": "1.3.4",
+  "version": "1.3.3",
   "main": "dist/bundle.js",
   "license": "MIT",
   "keywords": [
@@ -34,13 +34,13 @@
     "@ant-design/icons": "^4.6.2",
     "@babel/preset-react": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@react-navigation/core": "^6.0.1",
+    "@react-navigation/core": "^6.0.0",
     "@types/react": "^17.0.9",
     "@types/react-dom": "^17.0.6",
     "antd": "^4.16.1",
-    "flipper": "^0.112.0",
-    "flipper-pkg": "^0.112.0",
-    "flipper-plugin": "^0.112.0",
+    "flipper": "^0.92.0",
+    "flipper-pkg": "^0.92.0",
+    "flipper-plugin": "^0.92.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

packages/flipper-plugin-react-navigation/src/Logs.tsx

@@ -1,5 +1,6 @@
 import { CompassOutlined } from '@ant-design/icons';
-import { DataList, DetailSidebar, styled, theme } from 'flipper-plugin';
+import { DetailSidebar, styled, VirtualList } from 'flipper';
+import { theme } from 'flipper-plugin';
 import * as React from 'react';
 
 import { Sidebar } from './Sidebar';
@@ -18,10 +19,10 @@ export function Logs({ active, logs, index, resetTo }: Props) {
 
   return logs.length ? (
     <>
-      <DataList
-        style={{ height: '100%' }}
-        items={logs}
-        onRenderItem={({ id, action }, _, i) => (
+      <VirtualList
+        data={logs}
+        rowHeight={51}
+        renderRow={({ id, action }, i) => (
           <Row
             key={id}
             selected={selectedItem?.id === id}

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,49 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.4...@react-navigation/material-bottom-tabs@6.0.5) (2021-08-17)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
-## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.3...@react-navigation/material-bottom-tabs@6.0.4) (2021-08-11)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
-## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.2...@react-navigation/material-bottom-tabs@6.0.3) (2021-08-09)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.1...@react-navigation/material-bottom-tabs@6.0.2) (2021-08-07)
-
-**Note:** Version bump only for package @react-navigation/material-bottom-tabs
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0...@react-navigation/material-bottom-tabs@6.0.1) (2021-08-03)
-
-
-### Bug Fixes
-
-* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-bottom-tabs@6.0.0-next.18...@react-navigation/material-bottom-tabs@6.0.0) (2021-08-01)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "6.0.5",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,10 +41,10 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.1.0"
+    "@react-navigation/elements": "^1.0.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/material-bottom-tabs/src/views/MaterialBottomTabView.tsx

@@ -1,9 +1,9 @@
 import { SafeAreaProviderCompat } from '@react-navigation/elements';
 import {
-  CommonActions,
   Link,
   ParamListBase,
   Route,
+  TabActions,
   TabNavigationState,
   useLinkBuilder,
   useTheme,
@@ -106,10 +106,7 @@ function MaterialBottomTabViewInner({
       navigationState={state}
       onIndexChange={(index: number) =>
         navigation.dispatch({
-          ...CommonActions.navigate({
-            name: state.routes[index].name,
-            merge: true,
-          }),
+          ...TabActions.jumpTo(state.routes[index].name),
           target: state.key,
         })
       }

packages/material-top-tabs/CHANGELOG.md

@@ -3,25 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.1...@react-navigation/material-top-tabs@6.0.2) (2021-08-07)
-
-**Note:** Version bump only for package @react-navigation/material-top-tabs
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0...@react-navigation/material-top-tabs@6.0.1) (2021-08-03)
-
-
-### Bug Fixes
-
-* preserve params when switching tabs. fixes [#9782](https://github.com/react-navigation/react-navigation/issues/9782) ([98fa233](https://github.com/react-navigation/react-navigation/commit/98fa2330146457045c01af820c6d8e8cb955f9d1))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/material-top-tabs@6.0.0-next.18...@react-navigation/material-top-tabs@6.0.0) (2021-08-01)
 
 

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "6.0.2",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -45,7 +45,7 @@
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/material-top-tabs/src/views/MaterialTopTabView.tsx

@@ -1,7 +1,7 @@
 import {
-  CommonActions,
   ParamListBase,
   Route,
+  TabActions,
   TabNavigationState,
   useTheme,
 } from '@react-navigation/native';
@@ -48,10 +48,7 @@ export default function MaterialTopTabView({
       {...rest}
       onIndexChange={(index) =>
         navigation.dispatch({
-          ...CommonActions.navigate({
-            name: state.routes[index].name,
-            merge: true,
-          }),
+          ...TabActions.jumpTo(state.routes[index].name),
           target: state.key,
         })
       }

packages/native-stack/CHANGELOG.md

@@ -3,76 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [6.1.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.6...@react-navigation/native-stack@6.1.0) (2021-08-18)
-
-
-### Bug Fixes
-
-* content container in native web stack should fill parent ([#9832](https://github.com/react-navigation/react-navigation/issues/9832)) ([ec0d113](https://github.com/react-navigation/react-navigation/commit/ec0d113eb25c39ef9defb6c7215640f44e3569ae))
-
-
-### Features
-
-* add headerTitleAlign prop in native stack. closes [#9829](https://github.com/react-navigation/react-navigation/issues/9829) ([fe692c2](https://github.com/react-navigation/react-navigation/commit/fe692c2f564f4fc72c18c19b8e5830ab69bcd58c))
-
-
-
-
-
-## [6.0.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.5...@react-navigation/native-stack@6.0.6) (2021-08-17)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
-## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.4...@react-navigation/native-stack@6.0.5) (2021-08-11)
-
-
-### Bug Fixes
-
-* fix headerTransparent not working outside stack navigator ([42c43ff](https://github.com/react-navigation/react-navigation/commit/42c43ff7617112afd223ecb323be622666c79096))
-
-
-
-
-
-## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.3...@react-navigation/native-stack@6.0.4) (2021-08-09)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
-## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.2...@react-navigation/native-stack@6.0.3) (2021-08-07)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.1...@react-navigation/native-stack@6.0.2) (2021-08-05)
-
-
-### Bug Fixes
-
-* fix incorrect name for headerTransparent ([1da575e](https://github.com/react-navigation/react-navigation/commit/1da575e0e74c9510d6a57d473500cf84668c3824))
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0...@react-navigation/native-stack@6.0.1) (2021-08-03)
-
-**Note:** Version bump only for package @react-navigation/native-stack
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native-stack@6.0.0-next.11...@react-navigation/native-stack@6.0.0) (2021-08-01)
 
 

packages/native-stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native-stack",
   "description": "Native stack navigator using react-native-screens",
-  "version": "6.1.0",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -41,11 +41,11 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.1.0",
+    "@react-navigation/elements": "^1.0.0",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/react": "^17.0.9",
     "@types/react-native": "~0.64.9",

packages/native-stack/src/types.tsx

@@ -215,10 +215,9 @@ export type NativeStackNavigationOptions = {
    * Setting this to `true` makes the header absolutely positioned,
    * and changes the background color to `transparent` unless specified in `headerStyle`.
    */
-  headerTransparent?: boolean;
+  headerTranslucent?: boolean;
   /**
    * Blur effect for the translucent header.
-   * The `headerTransparent` option needs to be set to `true` for this to work.
    *
    * Only supported on iOS.
    *
@@ -259,13 +258,6 @@ export type NativeStackNavigationOptions = {
          */
         tintColor?: string;
       }) => React.ReactNode);
-  /**
-   * How to align the the header title.
-   * Defaults to `left` on platforms other than iOS.
-   *
-   * Not supported on iOS. It's always `center` on iOS and cannot be changed.
-   */
-  headerTitleAlign?: 'left' | 'center';
   /**
    * Style object for header title. Supported properties:
    * - fontFamily

packages/native-stack/src/views/HeaderConfig.tsx

@@ -38,9 +38,8 @@ export default function HeaderConfig({
   headerBlurEffect,
   headerTintColor,
   headerTitle,
-  headerTitleAlign,
   headerTitleStyle,
-  headerTransparent,
+  headerTranslucent,
   route,
   headerSearchBarOptions,
   title,
@@ -70,8 +69,6 @@ export default function HeaderConfig({
     ]);
 
   const titleText = title !== undefined ? title : route.name;
-  const titleColor =
-    headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text;
 
   const headerLeftElement = headerLeft?.({ tintColor });
   const headerRightElement = headerRight?.({ tintColor });
@@ -104,7 +101,7 @@ export default function HeaderConfig({
       backButtonInCustomView={backButtonInCustomView}
       backgroundColor={
         headerStyleFlattened.backgroundColor ??
-        (headerTransparent ? 'transparent' : colors.card)
+        (headerTranslucent ? 'transparent' : colors.card)
       }
       backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
       backTitleFontFamily={backTitleFontFamily}
@@ -123,14 +120,16 @@ export default function HeaderConfig({
       largeTitleFontWeight={headerLargeTitleStyleFlattened.fontWeight}
       largeTitleHideShadow={headerLargeTitleShadowVisible === false}
       title={typeof headerTitle === 'string' ? headerTitle : titleText}
-      titleColor={titleColor}
+      titleColor={
+        headerTitleStyleFlattened.color ?? headerTintColor ?? colors.text
+      }
       titleFontFamily={titleFontFamily}
       titleFontSize={headerTitleStyleFlattened.fontSize}
       titleFontWeight={headerTitleStyleFlattened.fontWeight}
       topInsetEnabled={insets.top !== 0}
       translucent={
         // This defaults to `true`, so we can't pass `undefined`
-        headerTransparent === true
+        headerTranslucent === true
       }
     >
       {Platform.OS === 'ios' ? (
@@ -152,33 +151,21 @@ export default function HeaderConfig({
             <ScreenStackHeaderLeftView>
               <View style={styles.row}>
                 {headerLeftElement}
-                {headerTitleAlign !== 'center' ? (
-                  typeof headerTitle === 'function' ? (
-                    headerTitleElement
-                  ) : (
-                    <HeaderTitle tintColor={tintColor} style={headerTitleStyle}>
-                      {titleText}
-                    </HeaderTitle>
-                  )
-                ) : null}
+                {typeof headerTitle === 'function' ? (
+                  headerTitleElement
+                ) : (
+                  <HeaderTitle tintColor={tintColor}>{titleText}</HeaderTitle>
+                )}
               </View>
             </ScreenStackHeaderLeftView>
           ) : null}
-          {headerTitleAlign === 'center' ? (
-            <ScreenStackHeaderCenterView>
-              {typeof headerTitle === 'function' ? (
-                headerTitleElement
-              ) : (
-                <HeaderTitle tintColor={tintColor} style={headerTitleStyle}>
-                  {titleText}
-                </HeaderTitle>
-              )}
-            </ScreenStackHeaderCenterView>
-          ) : null}
         </>
       )}
       {headerBackImageSource !== undefined ? (
-        <ScreenStackHeaderBackButtonImage source={headerBackImageSource} />
+        <ScreenStackHeaderBackButtonImage
+          key="backImage"
+          source={headerBackImageSource}
+        />
       ) : null}
       {headerRightElement != null ? (
         <ScreenStackHeaderRightView>

packages/native-stack/src/views/NativeStackView.tsx

@@ -46,11 +46,10 @@ export default function NativeStackView({ state, descriptors }: Props) {
             headerLeft,
             headerRight,
             headerTitle,
-            headerTitleAlign,
             headerTitleStyle,
             headerStyle,
             headerShadowVisible,
-            headerTransparent,
+            headerTranslucent,
             contentStyle,
           } = options;
 
@@ -61,7 +60,6 @@ export default function NativeStackView({ state, descriptors }: Props) {
               route={route}
               navigation={navigation}
               headerShown={headerShown}
-              headerTransparent={headerTransparent}
               header={
                 header !== undefined ? (
                   header({
@@ -118,10 +116,9 @@ export default function NativeStackView({ state, descriptors }: Props) {
                             headerTitle({ children, tintColor })
                         : headerTitle
                     }
-                    headerTitleAlign={headerTitleAlign}
                     headerTitleStyle={headerTitleStyle}
                     headerStyle={[
-                      headerTransparent
+                      headerTranslucent
                         ? {
                             position: 'absolute',
                             backgroundColor: 'transparent',
@@ -140,9 +137,7 @@ export default function NativeStackView({ state, descriptors }: Props) {
                 { display: isFocused ? 'flex' : 'none' },
               ]}
             >
-              <View style={[styles.contentContainer, contentStyle]}>
-                {render()}
-              </View>
+              <View style={contentStyle}>{render()}</View>
             </Screen>
           );
         })}
@@ -155,9 +150,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  contentContainer: {
-    flex: 1,
-  },
   backImage: {
     height: 24,
     width: 24,

packages/native/CHANGELOG.md

@@ -3,25 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.1...@react-navigation/native@6.0.2) (2021-08-07)
-
-
-### Bug Fixes
-
-* fix crash in useLinkTo when passing an object ([#9800](https://github.com/react-navigation/react-navigation/issues/9800)) ([dfd0cc7](https://github.com/react-navigation/react-navigation/commit/dfd0cc78fe4531ba7c957f826bc556829e231735))
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0...@react-navigation/native@6.0.1) (2021-08-03)
-
-**Note:** Version bump only for package @react-navigation/native
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/native@6.0.0-next.17...@react-navigation/native@6.0.0) (2021-08-01)
 
 

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "6.0.2",
+  "version": "6.0.0",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -37,7 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^6.0.1",
+    "@react-navigation/core": "^6.0.0",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "^3.1.23"
   },

packages/native/src/useLinkTo.tsx

@@ -38,7 +38,7 @@ export default function useLinkTo<
 
       if (typeof to !== 'string') {
         // @ts-expect-error: This is fine
-        navigation.navigate(to.screen, to.params);
+        root.navigate(to.screen, to.params);
         return;
       }
 

packages/routers/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0...@react-navigation/routers@6.0.1) (2021-08-03)
-
-
-### Reverts
-
-* Revert "fix: don't merge initial params when merge !== true" ([8086772](https://github.com/react-navigation/react-navigation/commit/80867722c5891b786e8c47f18135419b7cb915b3))
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/routers@6.0.0-next.6...@react-navigation/routers@6.0.0) (2021-08-01)
 
 

packages/routers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/routers",
   "description": "Routers to help build custom navigators",
-  "version": "6.0.1",
+  "version": "6.0.0",
   "keywords": [
     "react",
     "react-native",

packages/routers/src/StackRouter.tsx

@@ -434,13 +434,7 @@ export default function StackRouter(options: StackRouterOptions) {
                     }
                   : route.params;
             } else {
-              params =
-                routeParamList[route.name] !== undefined
-                  ? {
-                      ...routeParamList[route.name],
-                      ...action.payload.params,
-                    }
-                  : action.payload.params;
+              params = action.payload.params;
             }
 
             return {

packages/routers/src/TabRouter.tsx

@@ -326,13 +326,7 @@ export default function TabRouter({
                         }
                       : route.params;
                 } else {
-                  params =
-                    routeParamList[route.name] !== undefined
-                      ? {
-                          ...routeParamList[route.name],
-                          ...action.payload.params,
-                        }
-                      : action.payload.params;
+                  params = action.payload.params;
                 }
 
                 const path =

packages/routers/src/__tests__/StackRouter.test.tsx

@@ -1487,7 +1487,7 @@ it("doesn't merge params on navigate to an existing screen", () => {
     routeNames: ['baz', 'bar', 'qux'],
     routes: [
       { key: 'baz', name: 'baz' },
-      { key: 'bar', name: 'bar', params: { color: 'test' } },
+      { key: 'bar', name: 'bar' },
     ],
   });
 
@@ -1515,7 +1515,7 @@ it("doesn't merge params on navigate to an existing screen", () => {
     routeNames: ['baz', 'bar', 'qux'],
     routes: [
       { key: 'baz', name: 'baz' },
-      { key: 'bar', name: 'bar', params: { color: 'test', fruit: 'orange' } },
+      { key: 'bar', name: 'bar', params: { fruit: 'orange' } },
     ],
   });
 });

packages/routers/src/__tests__/TabRouter.test.tsx

@@ -1510,7 +1510,7 @@ it("doesn't merge params on navigate to an existing screen", () => {
     routes: [
       { key: 'baz', name: 'baz' },
       { key: 'bar', name: 'bar' },
-      { key: 'qux', name: 'qux', params: { color: 'indigo', test: 12 } },
+      { key: 'qux', name: 'qux', params: { test: 12 } },
     ],
     history: [
       { type: 'route', key: 'baz' },

packages/stack/CHANGELOG.md

@@ -3,79 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.0.7](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.6...@react-navigation/stack@6.0.7) (2021-08-17)
-
-
-### Bug Fixes
-
-* add check when accessing next descriptor ([#9824](https://github.com/react-navigation/react-navigation/issues/9824)) ([5bcf79c](https://github.com/react-navigation/react-navigation/commit/5bcf79c722e62403d8398874fd0b2b673f840aa3))
-* don't try to parse header tint color if not a string ([ece03d7](https://github.com/react-navigation/react-navigation/commit/ece03d7177731d8eabcc082f34b674776dffc4ce)), closes [#9822](https://github.com/react-navigation/react-navigation/issues/9822)
-* fix status bar handling with modal presentation ([651d8e5](https://github.com/react-navigation/react-navigation/commit/651d8e5726d9abab2e4572bd0fad550e926cc9b4))
-* handle statusbar height for stack nested in modal. closes [#9790](https://github.com/react-navigation/react-navigation/issues/9790) ([f54cafb](https://github.com/react-navigation/react-navigation/commit/f54cafbb3333763ec86e4b2cab46cbb2ae99b627))
-
-
-
-
-
-## [6.0.6](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.5...@react-navigation/stack@6.0.6) (2021-08-11)
-
-**Note:** Version bump only for package @react-navigation/stack
-
-
-
-
-
-## [6.0.5](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.4...@react-navigation/stack@6.0.5) (2021-08-11)
-
-
-### Bug Fixes
-
-* show deprecation warning for 'keyboardHandlingEnabled' prop ([8c89c45](https://github.com/react-navigation/react-navigation/commit/8c89c45be45396024271bb5be33760e3c06a09be))
-
-
-
-
-
-## [6.0.4](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.3...@react-navigation/stack@6.0.4) (2021-08-09)
-
-
-### Bug Fixes
-
-* avoid overflowing long titles ([bacdbbd](https://github.com/react-navigation/react-navigation/commit/bacdbbdd7c5df73b84aa1ed8c0329c9525d0fdba))
-* pass all props to custom headerLeft ([#9806](https://github.com/react-navigation/react-navigation/issues/9806)) ([22799fc](https://github.com/react-navigation/react-navigation/commit/22799fc96ee689cad97ee051c24816f86ac912d1)), closes [#9805](https://github.com/react-navigation/react-navigation/issues/9805)
-* pass onlayout to headerTitle ([#9808](https://github.com/react-navigation/react-navigation/issues/9808)) ([a79ce57](https://github.com/react-navigation/react-navigation/commit/a79ce57aa7f9be3a47a09728e920c0d4a805f5aa))
-
-
-
-
-
-## [6.0.3](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.2...@react-navigation/stack@6.0.3) (2021-08-09)
-
-
-### Bug Fixes
-
-* consider all next headers instead of immediate next ([4d8a7ee](https://github.com/react-navigation/react-navigation/commit/4d8a7ee7e422c9d0eeb7aa0557eb288ef62b1f30)), closes [#9797](https://github.com/react-navigation/react-navigation/issues/9797)
-
-
-
-
-
-## [6.0.2](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.1...@react-navigation/stack@6.0.2) (2021-08-07)
-
-**Note:** Version bump only for package @react-navigation/stack
-
-
-
-
-
-## [6.0.1](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0...@react-navigation/stack@6.0.1) (2021-08-03)
-
-**Note:** Version bump only for package @react-navigation/stack
-
-
-
-
-
 # [6.0.0](https://github.com/react-navigation/react-navigation/compare/@react-navigation/stack@6.0.0-next.29...@react-navigation/stack@6.0.0) (2021-08-01)
 
 

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "6.0.7",
+  "version": "6.0.0",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,12 +40,12 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/elements": "^1.1.0",
+    "@react-navigation/elements": "^1.0.0",
     "color": "^3.1.3",
     "warn-once": "^0.1.0"
   },
   "devDependencies": {
-    "@react-navigation/native": "^6.0.2",
+    "@react-navigation/native": "^6.0.0",
     "@testing-library/react-native": "^7.2.0",
     "@types/color": "^3.0.1",
     "@types/react": "^17.0.9",

packages/stack/src/navigators/createStackNavigator.tsx

@@ -40,14 +40,14 @@ function StackNavigator({
   // @ts-expect-error: mode is deprecated
   const mode = rest.mode as 'card' | 'modal' | undefined;
 
+  // @ts-expect-error: headerMode='none' is deprecated
+  const headerMode = rest.headerMode as StackHeaderMode | 'none' | undefined;
+
   warnOnce(
     mode != null,
     `Stack Navigator: 'mode="${mode}"' is deprecated. Use 'presentation: "${mode}"' in 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/stack-navigator#presentation for more details.`
   );
 
-  // @ts-expect-error: headerMode='none' is deprecated
-  const headerMode = rest.headerMode as StackHeaderMode | 'none' | undefined;
-
   warnOnce(
     headerMode === 'none',
     `Stack Navigator: 'headerMode="none"' is deprecated. Use 'headerShown: false' in 'screenOptions' instead.\n\nSee https://reactnavigation.org/docs/stack-navigator/#headershown for more details.`
@@ -58,21 +58,6 @@ function StackNavigator({
     `Stack Navigator: 'headerMode' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.\n\nSee https://reactnavigation.org/docs/stack-navigator/#headermode for more details.`
   );
 
-  // @ts-expect-error: headerMode='none' is deprecated
-  const keyboardHandlingEnabled = rest.keyboardHandlingEnabled;
-
-  warnOnce(
-    keyboardHandlingEnabled !== undefined,
-    `Stack Navigator: 'keyboardHandlingEnabled' is moved to 'options'. Moved it to 'screenOptions' to keep current behavior.\n\nSee https://reactnavigation.org/docs/stack-navigator/#keyboardhandlingenabled for more details.`
-  );
-
-  const defaultScreenOptions: StackNavigationOptions = {
-    presentation: mode,
-    headerShown: headerMode ? headerMode !== 'none' : true,
-    headerMode: headerMode && headerMode !== 'none' ? headerMode : undefined,
-    keyboardHandlingEnabled,
-  };
-
   const { state, descriptors, navigation, NavigationContent } =
     useNavigationBuilder<
       StackNavigationState<ParamListBase>,
@@ -85,7 +70,12 @@ function StackNavigator({
       children,
       screenListeners,
       screenOptions,
-      defaultScreenOptions,
+      defaultScreenOptions: () => ({
+        presentation: mode,
+        headerShown: headerMode ? headerMode !== 'none' : true,
+        headerMode:
+          headerMode && headerMode !== 'none' ? headerMode : undefined,
+      }),
     });
 
   React.useEffect(

packages/stack/src/types.tsx

@@ -1,8 +1,6 @@
 import type {
   HeaderBackButton,
-  HeaderBackButtonProps,
   HeaderOptions,
-  HeaderTitleProps,
 } from '@react-navigation/elements';
 import type {
   Descriptor,
@@ -120,22 +118,7 @@ export type StackHeaderMode = 'float' | 'screen';
 
 export type StackPresentationMode = 'card' | 'modal';
 
-export type StackHeaderOptions = Omit<
-  HeaderOptions,
-  'headerLeft' | 'headerTitle'
-> & {
-  /**
-   * String or a function that returns a React Element to be used by the header.
-   * Defaults to screen `title` or route name.
-   *
-   * It receives `allowFontScaling`, `tintColor`, `style` and `children` in the options object as an argument.
-   * The title string is passed in `children`.
-   */
-  headerTitle?: string | ((props: HeaderTitleProps) => React.ReactNode);
-  /**
-   * Function which returns a React Element to display on the left side of the header.
-   */
-  headerLeft?: (props: HeaderBackButtonProps) => React.ReactNode;
+export type StackHeaderOptions = HeaderOptions & {
   /**
    * Whether back button title font should scale to respect Text Size accessibility settings. Defaults to `false`.
    */

packages/stack/src/views/BorderlessButton.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Animated, Platform } from 'react-native';
+import { BaseButton, BaseButtonProperties } from 'react-native-gesture-handler';
+
+const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton);
+
+type Props = BaseButtonProperties & {
+  pressOpacity: number;
+};
+
+const useNativeDriver = Platform.OS !== 'web';
+
+export default class BorderlessButton extends React.Component<Props> {
+  static defaultProps = {
+    activeOpacity: 0.3,
+    borderless: true,
+  };
+
+  private opacity = new Animated.Value(1);
+
+  private handleActiveStateChange = (active: boolean) => {
+    if (Platform.OS !== 'android') {
+      Animated.spring(this.opacity, {
+        stiffness: 1000,
+        damping: 500,
+        mass: 3,
+        overshootClamping: true,
+        restDisplacementThreshold: 0.01,
+        restSpeedThreshold: 0.01,
+        toValue: active ? this.props.pressOpacity : 1,
+        useNativeDriver,
+      }).start();
+    }
+
+    this.props.onActiveStateChange?.(active);
+  };
+
+  render() {
+    const { children, style, enabled, ...rest } = this.props;
+
+    return (
+      <AnimatedBaseButton
+        {...rest}
+        onActiveStateChange={this.handleActiveStateChange}
+        style={[
+          style,
+          Platform.OS === 'ios' && enabled && { opacity: this.opacity },
+        ]}
+      >
+        {children}
+      </AnimatedBaseButton>
+    );
+  }
+}

packages/stack/src/views/Header/Header.tsx

@@ -1,5 +1,5 @@
 import { getHeaderTitle, HeaderShownContext } from '@react-navigation/elements';
-import { StackActions } from '@react-navigation/native';
+import { StackActions, useNavigationState } from '@react-navigation/native';
 import * as React from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -44,11 +44,14 @@ export default React.memo(function Header({
 
   const isModal = React.useContext(ModalPresentationContext);
   const isParentHeaderShown = React.useContext(HeaderShownContext);
+  const isFirstRouteInParent = useNavigationState(
+    (state) => state.routes[0].key === route.key
+  );
 
   const statusBarHeight =
     options.headerStatusBarHeight !== undefined
       ? options.headerStatusBarHeight
-      : isModal || isParentHeaderShown
+      : (isModal && !isFirstRouteInParent) || isParentHeaderShown
       ? 0
       : insets.top;
 
@@ -57,6 +60,7 @@ export default React.memo(function Header({
       {...options}
       title={getHeaderTitle(options, route.name)}
       progress={progress}
+      insets={insets}
       layout={layout}
       modal={isModal}
       headerBackTitle={

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -92,26 +92,19 @@ export default function HeaderContainer({
           headerMode: previousHeaderMode,
         } = previousDescriptor?.options || {};
 
-        // If any of the next screens don't have a header or header is part of the screen
-        // Then we need to move this header offscreen so that it doesn't cover it
-        const nextHeaderlessScene = self.slice(i + 1).find((scene) => {
-          const {
-            headerShown: currentHeaderShown = true,
-            headerMode: currentHeaderMode,
-          } = scene?.descriptor.options || {};
-
-          return currentHeaderShown === false || currentHeaderMode === 'screen';
-        });
-
-        const { gestureDirection: nextHeaderlessGestureDirection } =
-          nextHeaderlessScene?.descriptor.options || {};
+        const {
+          headerShown: nextHeaderShown = true,
+          headerMode: nextHeaderMode,
+          gestureDirection: nextGestureDirection,
+        } = nextDescriptor?.options || {};
 
         const isHeaderStatic =
           ((previousHeaderShown === false || previousHeaderMode === 'screen') &&
             // We still need to animate when coming back from next scene
             // A hacky way to check this is if the next scene exists
             !nextDescriptor) ||
-          nextHeaderlessScene;
+          nextHeaderShown === false ||
+          nextHeaderMode === 'screen';
 
         const props: StackHeaderProps = {
           layout,
@@ -124,10 +117,10 @@ export default function HeaderContainer({
           styleInterpolator:
             mode === 'float'
               ? isHeaderStatic
-                ? nextHeaderlessGestureDirection === 'vertical' ||
-                  nextHeaderlessGestureDirection === 'vertical-inverted'
+                ? nextGestureDirection === 'vertical' ||
+                  nextGestureDirection === 'vertical-inverted'
                   ? forSlideUp
-                  : nextHeaderlessGestureDirection === 'horizontal-inverted'
+                  : nextGestureDirection === 'horizontal-inverted'
                   ? forSlideRight
                   : forSlideLeft
                 : headerStyleInterpolator

packages/stack/src/views/Header/HeaderSegment.tsx

@@ -2,17 +2,17 @@ import {
   getDefaultHeaderHeight,
   Header,
   HeaderBackButton,
-  HeaderBackButtonProps,
+  HeaderShownContext,
   HeaderTitle,
 } from '@react-navigation/elements';
 import * as React from 'react';
 import {
   Animated,
   LayoutChangeEvent,
-  Platform,
   StyleSheet,
   ViewStyle,
 } from 'react-native';
+import type { EdgeInsets } from 'react-native-safe-area-context';
 
 import type {
   Layout,
@@ -22,10 +22,10 @@ import type {
 } from '../../types';
 import memoize from '../../utils/memoize';
 
-type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
-  headerStatusBarHeight: number;
+type Props = StackHeaderOptions & {
   layout: Layout;
   title: string;
+  insets: EdgeInsets;
   modal: boolean;
   onGoBack?: () => void;
   progress: SceneProgress;
@@ -33,6 +33,8 @@ type Props = Omit<StackHeaderOptions, 'headerStatusBarHeight'> & {
 };
 
 export default function HeaderSegment(props: Props) {
+  const isParentHeaderShown = React.useContext(HeaderShownContext);
+
   const [leftLabelLayout, setLeftLabelLayout] =
     React.useState<Layout | undefined>(undefined);
 
@@ -96,16 +98,15 @@ export default function HeaderSegment(props: Props) {
 
   const {
     progress,
+    insets,
     layout,
     modal,
     onGoBack,
     headerTitle: title,
-    headerLeft: left = onGoBack
-      ? (props: HeaderBackButtonProps) => <HeaderBackButton {...props} />
-      : undefined,
+    headerLeft: left,
     headerBackImage,
     headerBackTitle,
-    headerBackTitleVisible = Platform.OS === 'ios',
+    headerBackTitleVisible,
     headerTruncatedBackTitle,
     headerBackAccessibilityLabel,
     headerBackTestID,
@@ -116,7 +117,7 @@ export default function HeaderSegment(props: Props) {
     headerRightContainerStyle,
     headerBackgroundContainerStyle,
     headerStyle: customHeaderStyle,
-    headerStatusBarHeight,
+    headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
     styleInterpolator,
     ...rest
   } = props;
@@ -148,28 +149,32 @@ export default function HeaderSegment(props: Props) {
   );
 
   const headerLeft: StackHeaderOptions['headerLeft'] = left
-    ? (props) =>
-        left({
-          ...props,
-          backImage: headerBackImage,
-          accessibilityLabel: headerBackAccessibilityLabel,
-          testID: headerBackTestID,
-          allowFontScaling: headerBackAllowFontScaling,
-          onPress: onGoBack,
-          label: headerBackTitle,
-          truncatedLabel: headerTruncatedBackTitle,
-          labelStyle: [leftLabelStyle, headerBackTitleStyle],
-          onLabelLayout: handleLeftLabelLayout,
-          screenLayout: layout,
-          titleLayout,
-          canGoBack: Boolean(onGoBack),
-        })
+    ? left
+    : onGoBack
+    ? (props) => (
+        <HeaderBackButton
+          {...props}
+          backImage={headerBackImage}
+          accessibilityLabel={headerBackAccessibilityLabel}
+          testID={headerBackTestID}
+          allowFontScaling={headerBackAllowFontScaling}
+          onPress={onGoBack}
+          labelVisible={headerBackTitleVisible}
+          label={headerBackTitle}
+          truncatedLabel={headerTruncatedBackTitle}
+          labelStyle={[leftLabelStyle, headerBackTitleStyle]}
+          onLabelLayout={handleLeftLabelLayout}
+          screenLayout={layout}
+          titleLayout={titleLayout}
+          canGoBack={Boolean(onGoBack)}
+        />
+      )
     : undefined;
 
   const headerTitle: StackHeaderOptions['headerTitle'] =
     typeof title !== 'function'
       ? (props) => <HeaderTitle {...props} onLayout={handleTitleLayout} />
-      : (props) => title({ ...props, onLayout: handleTitleLayout });
+      : title;
 
   return (
     <Header
@@ -177,7 +182,6 @@ export default function HeaderSegment(props: Props) {
       layout={layout}
       headerTitle={headerTitle}
       headerLeft={headerLeft}
-      headerLeftLabelVisible={headerBackTitleVisible}
       headerTitleContainerStyle={[titleStyle, headerTitleContainerStyle]}
       headerLeftContainerStyle={[leftButtonStyle, headerLeftContainerStyle]}
       headerRightContainerStyle={[rightButtonStyle, headerRightContainerStyle]}

packages/stack/src/views/Stack/Card.tsx

@@ -33,6 +33,7 @@ import ModalStatusBarManager from '../ModalStatusBarManager';
 import CardSheet from './CardSheet';
 
 type Props = ViewProps & {
+  // index: number;
   interpolationIndex: number;
   closing: boolean;
   next?: Animated.AnimatedInterpolation;
@@ -141,7 +142,6 @@ export default class Card extends React.Component<Props> {
   }
 
   componentWillUnmount() {
-    this.props.gesture.stopAnimation();
     this.isCurrentlyMounted = false;
     this.handleEndInteraction();
   }
@@ -430,6 +430,7 @@ export default class Card extends React.Component<Props> {
   render() {
     const {
       styleInterpolator,
+      // index,
       interpolationIndex,
       current,
       gesture,
@@ -496,8 +497,9 @@ export default class Card extends React.Component<Props> {
           // So we should only enable it on iOS
           Platform.OS === 'ios' &&
           overlayEnabled &&
+          interpolationIndex === 0 &&
           next &&
-          getIsModalPresentation(styleInterpolator) ? (
+          styleInterpolator === forModalPresentationIOS ? (
             <ModalStatusBarManager
               dark={headerDarkContent}
               layout={layout}
@@ -571,16 +573,6 @@ export default class Card extends React.Component<Props> {
   }
 }
 
-export const getIsModalPresentation = (
-  cardStyleInterpolator: StackCardStyleInterpolator
-) => {
-  return (
-    cardStyleInterpolator === forModalPresentationIOS ||
-    // Handle custom modal presentation interpolators as well
-    cardStyleInterpolator.name === 'forModalPresentationIOS'
-  );
-};
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/stack/src/views/Stack/CardContainer.tsx

@@ -8,6 +8,7 @@ import { Route, useTheme } from '@react-navigation/native';
 import * as React from 'react';
 import { Animated, StyleSheet, View } from 'react-native';
 
+import { forModalPresentationIOS } from '../../TransitionConfigs/CardStyleInterpolators';
 import type { Layout, Scene } from '../../types';
 import ModalPresentationContext from '../../utils/ModalPresentationContext';
 import useKeyboardManager from '../../utils/useKeyboardManager';
@@ -15,12 +16,11 @@ import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 
 type Props = {
-  interpolationIndex: number;
   index: number;
+  interpolationIndex: number;
   active: boolean;
   focused: boolean;
   closing: boolean;
-  modal: boolean;
   layout: Layout;
   gesture: Animated.Value;
   scene: Scene;
@@ -57,13 +57,11 @@ type Props = {
 const EPSILON = 0.1;
 
 function CardContainer({
-  interpolationIndex,
   index,
   active,
   closing,
   gesture,
   focused,
-  modal,
   getPreviousScene,
   getFocusedRoute,
   headerDarkContent,
@@ -73,6 +71,7 @@ function CardContainer({
   isParentHeaderShown,
   isNextScreenTransparent,
   detachCurrentScreen,
+  interpolationIndex,
   layout,
   onCloseRoute,
   onOpenRoute,
@@ -199,6 +198,7 @@ function CardContainer({
     transitionSpec,
   } = scene.descriptor.options;
 
+  const isModalPresentation = cardStyleInterpolator === forModalPresentationIOS;
   const previousScene = getPreviousScene({ route: scene.descriptor.route });
 
   let backTitle: string | undefined;
@@ -276,31 +276,33 @@ function CardContainer({
       ]}
     >
       <View style={styles.container}>
-        <ModalPresentationContext.Provider value={modal}>
-          <View style={styles.scene}>
-            <HeaderBackContext.Provider value={headerBack}>
-              <HeaderShownContext.Provider
-                value={isParentHeaderShown || headerShown !== false}
+        <View style={styles.scene}>
+          <HeaderBackContext.Provider value={headerBack}>
+            <HeaderShownContext.Provider
+              value={isParentHeaderShown || headerShown !== false}
+            >
+              <HeaderHeightContext.Provider
+                value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
               >
-                <HeaderHeightContext.Provider
-                  value={headerShown ? headerHeight : parentHeaderHeight ?? 0}
-                >
-                  {renderScene({ route: scene.descriptor.route })}
-                </HeaderHeightContext.Provider>
-              </HeaderShownContext.Provider>
-            </HeaderBackContext.Provider>
-          </View>
-          {headerMode !== 'float'
-            ? renderHeader({
-                mode: 'screen',
-                layout,
-                scenes: [previousScene, scene],
-                getPreviousScene,
-                getFocusedRoute,
-                onContentHeightChange: onHeaderHeightChange,
-              })
-            : null}
-        </ModalPresentationContext.Provider>
+                {renderScene({ route: scene.descriptor.route })}
+              </HeaderHeightContext.Provider>
+            </HeaderShownContext.Provider>
+          </HeaderBackContext.Provider>
+        </View>
+        {headerMode !== 'float' ? (
+          <ModalPresentationContext.Provider
+            value={isModalPresentation && interpolationIndex !== 0}
+          >
+            {renderHeader({
+              mode: 'screen',
+              layout,
+              scenes: [previousScene, scene],
+              getPreviousScene,
+              getFocusedRoute,
+              onContentHeightChange: onHeaderHeightChange,
+            })}
+          </ModalPresentationContext.Provider>
+        ) : null}
       </View>
     </Card>
   );

packages/stack/src/views/Stack/CardStack.tsx

@@ -38,7 +38,6 @@ import type {
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import type { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import { MaybeScreen, MaybeScreenContainer } from '../Screens';
-import { getIsModalPresentation } from './Card';
 import CardContainer from './CardContainer';
 
 type GestureValues = {
@@ -60,7 +59,6 @@ type Props = {
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
   isParentHeaderShown: boolean;
-  isParentModal: boolean;
   onTransitionStart: (
     props: { route: Route<string> },
     closing: boolean
@@ -109,33 +107,17 @@ const getInterpolationIndex = (scenes: Scene[], index: number) => {
   return interpolationIndex;
 };
 
-const getIsModal = (
-  scene: Scene,
-  interpolationIndex: number,
-  isParentModal: boolean
-) => {
-  if (isParentModal) {
-    return true;
-  }
-
-  const { cardStyleInterpolator } = scene.descriptor.options;
-  const isModalPresentation = getIsModalPresentation(cardStyleInterpolator);
-  const isModal = isModalPresentation && interpolationIndex !== 0;
-
-  return isModal;
-};
-
 const getHeaderHeights = (
   scenes: Scene[],
   insets: EdgeInsets,
   isParentHeaderShown: boolean,
-  isParentModal: boolean,
   layout: Layout,
   previous: Record<string, number>
 ) => {
   return scenes.reduce<Record<string, number>>((acc, curr, index) => {
     const {
       headerStatusBarHeight = isParentHeaderShown ? 0 : insets.top,
+      cardStyleInterpolator,
       headerStyle,
     } = curr.descriptor.options;
 
@@ -147,7 +129,9 @@ const getHeaderHeights = (
         : previous[curr.route.key];
 
     const interpolationIndex = getInterpolationIndex(scenes, index);
-    const isModal = getIsModal(curr, interpolationIndex, isParentModal);
+    const isModalPresentation =
+      cardStyleInterpolator === forModalPresentationIOS;
+    const isModal = isModalPresentation && interpolationIndex !== 0;
 
     acc[curr.route.key] =
       typeof height === 'number'
@@ -285,7 +269,7 @@ export default class CardStack extends React.Component<Props, State> {
         headerStyleInterpolator = defaultTransitionPreset.headerStyleInterpolator,
         cardOverlayEnabled = (Platform.OS !== 'ios' &&
           optionsForTransitionConfig.presentation !== 'transparentModal') ||
-          getIsModalPresentation(cardStyleInterpolator),
+          cardStyleInterpolator === forModalPresentationIOS,
       } = optionsForTransitionConfig;
 
       const headerMode: StackHeaderMode =
@@ -295,7 +279,7 @@ export default class CardStack extends React.Component<Props, State> {
           optionsForTransitionConfig.presentation === 'transparentModal' ||
           nextDescriptor?.options.presentation === 'modal' ||
           nextDescriptor?.options.presentation === 'transparentModal' ||
-          getIsModalPresentation(cardStyleInterpolator)
+          cardStyleInterpolator === forModalPresentationIOS
         ) &&
         Platform.OS === 'ios' &&
         descriptor.options.header === undefined
@@ -326,7 +310,7 @@ export default class CardStack extends React.Component<Props, State> {
           ),
           next:
             nextGesture &&
-            nextDescriptor?.options.presentation !== 'transparentModal'
+            nextDescriptor.options.presentation !== 'transparentModal'
               ? getProgressFromGesture(
                   nextGesture,
                   state.layout,
@@ -374,7 +358,6 @@ export default class CardStack extends React.Component<Props, State> {
         scenes,
         props.insets,
         props.isParentHeaderShown,
-        props.isParentModal,
         state.layout,
         state.headerHeights
       ),
@@ -415,7 +398,6 @@ export default class CardStack extends React.Component<Props, State> {
           state.scenes,
           props.insets,
           props.isParentHeaderShown,
-          props.isParentModal,
           layout,
           state.headerHeights
         ),
@@ -480,7 +462,6 @@ export default class CardStack extends React.Component<Props, State> {
       renderHeader,
       renderScene,
       isParentHeaderShown,
-      isParentModal,
       onTransitionStart,
       onTransitionEnd,
       onGestureStart,
@@ -519,7 +500,7 @@ export default class CardStack extends React.Component<Props, State> {
         // By default, we don't want to detach the previous screen of the active one for modals
         detachPreviousScreen = options.presentation === 'transparentModal'
           ? false
-          : getIsModalPresentation(options.cardStyleInterpolator)
+          : options.cardStyleInterpolator === forModalPresentationIOS
           ? i !==
             scenes
               .map((scene) => scene.descriptor.options.cardStyleInterpolator)
@@ -615,7 +596,7 @@ export default class CardStack extends React.Component<Props, State> {
             let headerDarkContent: boolean | undefined;
 
             if (headerShown) {
-              if (typeof headerTintColor === 'string') {
+              if (headerTintColor) {
                 headerDarkContent = Color(headerTintColor).isDark();
               } else if (typeof headerBackgroundColor === 'string') {
                 headerDarkContent = !Color(headerBackgroundColor).isDark();
@@ -624,11 +605,6 @@ export default class CardStack extends React.Component<Props, State> {
 
             // Start from current card and count backwards the number of cards with same interpolation
             const interpolationIndex = getInterpolationIndex(scenes, index);
-            const isModal = getIsModal(
-              scene,
-              interpolationIndex,
-              isParentModal
-            );
 
             const isNextScreenTransparent =
               scenes[index + 1]?.descriptor.options.presentation ===
@@ -649,7 +625,6 @@ export default class CardStack extends React.Component<Props, State> {
                 <CardContainer
                   index={index}
                   interpolationIndex={interpolationIndex}
-                  modal={isModal}
                   active={index === self.length - 1}
                   focused={focused}
                   closing={closingRouteKeys.includes(route.key)}

packages/stack/src/views/Stack/StackView.tsx

@@ -20,7 +20,6 @@ import type {
   StackNavigationConfig,
   StackNavigationHelpers,
 } from '../../types';
-import ModalPresentationContext from '../../utils/ModalPresentationContext';
 import { GestureHandlerRootView } from '../GestureHandler';
 import HeaderContainer, {
   Props as HeaderContainerProps,
@@ -430,35 +429,30 @@ export default class StackView extends React.Component<Props, State> {
         <SafeAreaProviderCompat>
           <SafeAreaInsetsContext.Consumer>
             {(insets) => (
-              <ModalPresentationContext.Consumer>
-                {(isParentModal) => (
-                  <HeaderShownContext.Consumer>
-                    {(isParentHeaderShown) => (
-                      <CardStack
-                        insets={insets as EdgeInsets}
-                        isParentHeaderShown={isParentHeaderShown}
-                        isParentModal={isParentModal}
-                        getPreviousRoute={this.getPreviousRoute}
-                        routes={routes}
-                        openingRouteKeys={openingRouteKeys}
-                        closingRouteKeys={closingRouteKeys}
-                        onOpenRoute={this.handleOpenRoute}
-                        onCloseRoute={this.handleCloseRoute}
-                        onTransitionStart={this.handleTransitionStart}
-                        onTransitionEnd={this.handleTransitionEnd}
-                        renderHeader={this.renderHeader}
-                        renderScene={this.renderScene}
-                        state={state}
-                        descriptors={descriptors}
-                        onGestureStart={this.handleGestureStart}
-                        onGestureEnd={this.handleGestureEnd}
-                        onGestureCancel={this.handleGestureCancel}
-                        {...rest}
-                      />
-                    )}
-                  </HeaderShownContext.Consumer>
+              <HeaderShownContext.Consumer>
+                {(isParentHeaderShown) => (
+                  <CardStack
+                    insets={insets as EdgeInsets}
+                    isParentHeaderShown={isParentHeaderShown}
+                    getPreviousRoute={this.getPreviousRoute}
+                    routes={routes}
+                    openingRouteKeys={openingRouteKeys}
+                    closingRouteKeys={closingRouteKeys}
+                    onOpenRoute={this.handleOpenRoute}
+                    onCloseRoute={this.handleCloseRoute}
+                    onTransitionStart={this.handleTransitionStart}
+                    onTransitionEnd={this.handleTransitionEnd}
+                    renderHeader={this.renderHeader}
+                    renderScene={this.renderScene}
+                    state={state}
+                    descriptors={descriptors}
+                    onGestureStart={this.handleGestureStart}
+                    onGestureEnd={this.handleGestureEnd}
+                    onGestureCancel={this.handleGestureCancel}
+                    {...rest}
+                  />
                 )}
-              </ModalPresentationContext.Consumer>
+              </HeaderShownContext.Consumer>
             )}
           </SafeAreaInsetsContext.Consumer>
         </SafeAreaProviderCompat>