chore: publish

- @react-navigation/stack@5.0.9

.gitattributes

@@ -0,0 +1 @@
+yarn-*.js binary

example/src/index.tsx

@@ -7,7 +7,11 @@ import {
   StatusBar,
   I18nManager,
 } from 'react-native';
+// eslint-disable-next-line import/no-unresolved
+import { enableScreens } from 'react-native-screens';
 import RNRestart from 'react-native-restart';
+import { Updates } from 'expo';
+import { Asset } from 'expo-asset';
 import { MaterialIcons } from '@expo/vector-icons';
 import {
   Provider as PaperProvider,
@@ -17,7 +21,6 @@ import {
   List,
   Divider,
 } from 'react-native-paper';
-import { Asset } from 'expo-asset';
 import {
   InitialState,
   useLinking,
@@ -49,10 +52,11 @@ import DynamicTabs from './Screens/DynamicTabs';
 import AuthFlow from './Screens/AuthFlow';
 import CompatAPI from './Screens/CompatAPI';
 import SettingsItem from './Shared/SettingsItem';
-import { Updates } from 'expo';
 
 YellowBox.ignoreWarnings(['Require cycle:', 'Warning: Async Storage']);
 
+enableScreens();
+
 type RootDrawerParamList = {
   Root: undefined;
   Another: undefined;

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.6...@react-navigation/bottom-tabs@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.5...@react-navigation/bottom-tabs@5.0.6) (2020-02-19)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",

packages/compat/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.6...@react-navigation/compat@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.5...@react-navigation/compat@5.0.6) (2020-02-19)
 
 

packages/compat/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/compat",
   "description": "Compatibility layer to write navigator definitions in static configuration format",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/react": "^16.9.19",
     "react": "~16.9.0",
     "typescript": "^3.7.5"

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.1.6](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.5...@react-navigation/core@5.1.6) (2020-02-21)
+
+
+### Bug Fixes
+
+* avoid emitting focus events twice ([f167008](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/f16700812f3757713b04ca3a860209795b4a6c44)), closes [#6749](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6749)
+* preserve screen order with numeric names ([125bd70](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/125bd70e49b708d936a2eee72ba5cb92eacf26a9)), closes [#6900](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6900)
+
+
+
+
+
 ## [5.1.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.4...@react-navigation/core@5.1.5) (2020-02-19)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.1.5",
+  "version": "5.1.6",
   "keywords": [
     "react",
     "react-native",
@@ -29,7 +29,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.1",
+    "@react-navigation/routers": "^5.0.2",
     "escape-string-regexp": "^2.0.0",
     "query-string": "^6.10.1",
     "react-is": "^16.12.0",

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

@@ -772,6 +772,60 @@ it('gives access to internal state', () => {
   });
 });
 
+it('preserves order of screens in state with non-numeric names', () => {
+  const TestNavigator = (props: any): any => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const root = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="foo" component={jest.fn()} />
+        <Screen name="bar" component={jest.fn()} />
+        <Screen name="baz" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(root);
+
+  expect(navigation.current?.getRootState().routeNames).toEqual([
+    'foo',
+    'bar',
+    'baz',
+  ]);
+});
+
+it('preserves order of screens in state with numeric names', () => {
+  const TestNavigator = (props: any): any => {
+    useNavigationBuilder(MockRouter, props);
+    return null;
+  };
+
+  const navigation = React.createRef<NavigationContainerRef>();
+
+  const root = (
+    <BaseNavigationContainer ref={navigation}>
+      <TestNavigator>
+        <Screen name="4" component={jest.fn()} />
+        <Screen name="7" component={jest.fn()} />
+        <Screen name="1" component={jest.fn()} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(root);
+
+  expect(navigation.current?.getRootState().routeNames).toEqual([
+    '4',
+    '7',
+    '1',
+  ]);
+});
+
 it("throws if navigator doesn't have any screens", () => {
   const TestNavigator = (props: any) => {
     useNavigationBuilder(MockRouter, props);

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

@@ -188,10 +188,12 @@ it('fires focus and blur events in nested navigator', () => {
 
   expect(thirdFocusCallback).toBeCalledTimes(0);
   expect(secondFocusCallback).toBeCalledTimes(1);
+  expect(fourthBlurCallback).toBeCalledTimes(0);
 
   act(() => parent.current.navigate('nested'));
 
   expect(firstBlurCallback).toBeCalledTimes(1);
+  expect(secondBlurCallback).toBeCalledTimes(1);
   expect(thirdFocusCallback).toBeCalledTimes(0);
   expect(fourthFocusCallback).toBeCalledTimes(1);
 
@@ -199,6 +201,35 @@ it('fires focus and blur events in nested navigator', () => {
 
   expect(fourthBlurCallback).toBeCalledTimes(1);
   expect(thirdFocusCallback).toBeCalledTimes(1);
+
+  act(() => parent.current.navigate('first'));
+
+  expect(firstFocusCallback).toBeCalledTimes(2);
+  expect(thirdBlurCallback).toBeCalledTimes(1);
+
+  act(() => parent.current.navigate('nested', { screen: 'fourth' }));
+
+  expect(fourthFocusCallback).toBeCalledTimes(2);
+  expect(thirdBlurCallback).toBeCalledTimes(1);
+  expect(firstBlurCallback).toBeCalledTimes(2);
+
+  act(() => parent.current.navigate('nested', { screen: 'third' }));
+
+  expect(thirdFocusCallback).toBeCalledTimes(2);
+  expect(fourthBlurCallback).toBeCalledTimes(2);
+
+  // Make sure nothing else has changed
+  expect(firstFocusCallback).toBeCalledTimes(2);
+  expect(firstBlurCallback).toBeCalledTimes(2);
+
+  expect(secondFocusCallback).toBeCalledTimes(1);
+  expect(secondBlurCallback).toBeCalledTimes(1);
+
+  expect(thirdFocusCallback).toBeCalledTimes(2);
+  expect(thirdBlurCallback).toBeCalledTimes(1);
+
+  expect(fourthFocusCallback).toBeCalledTimes(2);
+  expect(fourthBlurCallback).toBeCalledTimes(2);
 });
 
 it('fires blur event when a route is removed with a delay', async () => {

packages/core/src/useFocusEvents.tsx

@@ -21,17 +21,19 @@ export default function useFocusEvents({ state, emitter }: Options) {
   // Coz the child screen can't be focused if the parent screen is out of focus
   React.useEffect(
     () =>
-      navigation?.addListener('focus', () =>
-        emitter.emit({ type: 'focus', target: currentFocusedKey })
-      ),
+      navigation?.addListener('focus', () => {
+        lastFocusedKeyRef.current = currentFocusedKey;
+        emitter.emit({ type: 'focus', target: currentFocusedKey });
+      }),
     [currentFocusedKey, emitter, navigation]
   );
 
   React.useEffect(
     () =>
-      navigation?.addListener('blur', () =>
-        emitter.emit({ type: 'blur', target: currentFocusedKey })
-      ),
+      navigation?.addListener('blur', () => {
+        lastFocusedKeyRef.current = undefined;
+        emitter.emit({ type: 'blur', target: currentFocusedKey });
+      }),
     [currentFocusedKey, emitter, navigation]
   );
 
@@ -60,14 +62,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
       return;
     }
 
-    emitter.emit({
-      type: 'focus',
-      target: currentFocusedKey,
-    });
-
-    emitter.emit({
-      type: 'blur',
-      target: lastFocusedKey,
-    });
+    emitter.emit({ type: 'focus', target: currentFocusedKey });
+    emitter.emit({ type: 'blur', target: lastFocusedKey });
   }, [currentFocusedKey, emitter, navigation]);
 }

packages/core/src/useNavigationBuilder.tsx

@@ -177,20 +177,21 @@ export default function useNavigationBuilder<
     })
   );
 
-  const screens = getRouteConfigsFromChildren<ScreenOptions>(children).reduce<
+  const routeConfigs = getRouteConfigsFromChildren<ScreenOptions>(children);
+  const screens = routeConfigs.reduce<
     Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>
-  >((acc, curr) => {
-    if (curr.name in acc) {
+  >((acc, config) => {
+    if (config.name in acc) {
       throw new Error(
-        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${curr.name}')`
+        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${config.name}')`
       );
     }
 
-    acc[curr.name] = curr;
+    acc[config.name] = config;
     return acc;
   }, {});
 
-  const routeNames = Object.keys(screens);
+  const routeNames = routeConfigs.map(config => config.name);
   const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
     (acc, curr) => {
       const { initialParams } = screens[curr];

packages/drawer/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.6...@react-navigation/drawer@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.5...@react-navigation/drawer@5.0.6) (2020-02-19)
 
 

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.6...@react-navigation/material-bottom-tabs@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.5...@react-navigation/material-bottom-tabs@5.0.6) (2020-02-19)
 
 **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": "5.0.6",
+  "version": "5.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.6...@react-navigation/material-top-tabs@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.5...@react-navigation/material-top-tabs@5.0.6) (2020-02-19)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

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": "5.0.6",
+  "version": "5.0.7",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",
     "del-cli": "^3.0.0",

packages/native/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.6...@react-navigation/native@5.0.7) (2020-02-21)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.5...@react-navigation/native@5.0.6) (2020-02-19)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -31,7 +31,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.1.5"
+    "@react-navigation/core": "^5.1.6"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",

packages/routers/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.2](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.0.1...@react-navigation/routers@5.0.2) (2020-02-21)
+
+
+### Bug Fixes
+
+* tweak error message for navigate ([c8ea419](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/commit/c8ea4199f4b19a58d5e409cfcc96e587fe354a9a))
+
+
+
+
+
 ## [5.0.1](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.0.0-alpha.33...@react-navigation/routers@5.0.1) (2020-02-10)
 
 

packages/routers/package.json

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

packages/routers/src/CommonActions.tsx

@@ -45,7 +45,7 @@ export function navigate(...args: any): Action {
 
     if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {
       throw new Error(
-        'While calling navigate with an object as the argument, you need to specify name or key'
+        'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions.html#navigate for usage.'
       );
     }
 

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

@@ -3,6 +3,6 @@ import * as CommonActions from '../CommonActions';
 it('throws if NAVIGATE is called without key or name', () => {
   // @ts-ignore
   expect(() => CommonActions.navigate({})).toThrowError(
-    'While calling navigate with an object as the argument, you need to specify name or key'
+    'You need to specify name or key when calling navigate with an object as the argument.'
   );
 });

packages/stack/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.9](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.8...@react-navigation/stack@5.0.9) (2020-02-24)
+
+
+### Bug Fixes
+
+* enhance border radius in modals on new iPhones ([#6945](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6945)) ([80a3370](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/80a337024abc53537ff4a63916cea38bb4f374bf))
+
+
+
+
+
+## [5.0.8](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.7...@react-navigation/stack@5.0.8) (2020-02-21)
+
+
+### Bug Fixes
+
+* fix transparent header on Android ([a67b494](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/a67b49477eb500c81fedcd73bbd8102901a95170))
+
+
+
+
+
+## [5.0.7](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.6...@react-navigation/stack@5.0.7) (2020-02-21)
+
+
+### Bug Fixes
+
+* debounce back button by default in stack header ([c7dd3a5](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/c7dd3a58b18d7a267d94009d459944c251ea74c1))
+* make sure header is visibile to accessibility tools on iOS ([240ce01](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/240ce01822febac2c1aa324c01e43fdc88a235a0))
+
+
+
+
+
 ## [5.0.6](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.5...@react-navigation/stack@5.0.6) (2020-02-19)
 
 

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": "5.0.6",
+  "version": "5.0.9",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.9.3",
     "@react-native-community/masked-view": "^0.1.6",
-    "@react-navigation/native": "^5.0.6",
+    "@react-navigation/native": "^5.0.7",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.19",
     "@types/react-native": "^0.60.30",

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,4 +1,5 @@
 import { Animated } from 'react-native';
+import { isIphoneX } from 'react-native-iphone-x-helper';
 import conditional from '../utils/conditional';
 import {
   StackCardInterpolationProps,
@@ -152,8 +153,8 @@ export function forModalPresentationIOS({
     ? 0
     : index === 0
     ? progress.interpolate({
-        inputRange: [0, 1, 2],
-        outputRange: [0, 0, 10],
+        inputRange: [0, 1, 1.0001, 2],
+        outputRange: [0, 0, isIphoneX() ? 38 : 0, 10],
       })
     : 10;
 

packages/stack/src/utils/debounce.tsx

@@ -0,0 +1,17 @@
+export default function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  duration: number
+): T {
+  let timeout: NodeJS.Timeout | number | undefined;
+
+  return function(this: any, ...args) {
+    if (!timeout) {
+      // eslint-disable-next-line babel/no-invalid-this
+      func.apply(this, args);
+
+      timeout = setTimeout(() => {
+        timeout = undefined;
+      }, duration);
+    }
+  } as T;
+}

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

@@ -2,8 +2,9 @@ import * as React from 'react';
 import { StackActions } from '@react-navigation/native';
 
 import HeaderSegment from './HeaderSegment';
-import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 import HeaderTitle from './HeaderTitle';
+import debounce from '../../utils/debounce';
+import { StackHeaderProps, StackHeaderTitleProps } from '../../types';
 
 export default React.memo(function Header(props: StackHeaderProps) {
   const {
@@ -40,6 +41,18 @@ export default React.memo(function Header(props: StackHeaderProps) {
         : previous.route.name;
   }
 
+  const goBack = React.useCallback(
+    debounce(() => {
+      if (navigation.canGoBack()) {
+        navigation.dispatch({
+          ...StackActions.pop(),
+          source: scene.route.key,
+        });
+      }
+    }, 50),
+    [navigation, scene.route.key]
+  );
+
   return (
     <HeaderSegment
       {...options}
@@ -53,18 +66,7 @@ export default React.memo(function Header(props: StackHeaderProps) {
           ? (props: StackHeaderTitleProps) => <HeaderTitle {...props} />
           : options.headerTitle
       }
-      onGoBack={
-        previous
-          ? () => {
-              if (navigation.canGoBack()) {
-                navigation.dispatch({
-                  ...StackActions.pop(),
-                  source: scene.route.key,
-                });
-              }
-            }
-          : undefined
-      }
+      onGoBack={previous ? goBack : undefined}
       styleInterpolator={styleInterpolator}
     />
   );

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

@@ -137,7 +137,9 @@ export default function HeaderContainer({
                   isFocused ? 'auto' : 'no-hide-descendants'
                 }
                 style={
-                  mode === 'float' || options.headerTransparent
+                  // Avoid positioning the focused header absolutely
+                  // Otherwise accessibility tools don't seem to be able to find it
+                  (mode === 'float' && !isFocused) || options.headerTransparent
                     ? styles.header
                     : null
                 }

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

@@ -37,14 +37,6 @@ type GestureValues = {
   [key: string]: Animated.Value;
 };
 
-// @ts-ignore
-const maybeExpoVersion = global.Expo?.Constants.manifest.sdkVersion.split(
-  '.'
-)[0];
-const isInsufficientExpoVersion = maybeExpoVersion
-  ? Number(maybeExpoVersion) <= 36
-  : maybeExpoVersion === 'UNVERSIONED';
-
 type Props = {
   mode: StackCardMode;
   insets: EdgeInsets;
@@ -82,37 +74,27 @@ type State = {
 };
 
 const EPSILON = 0.01;
-const FAR_FAR_AWAY = 9000;
 
 const dimensions = Dimensions.get('window');
 const layout = { width: dimensions.width, height: dimensions.height };
 
 const MaybeScreenContainer = ({
   enabled,
-  style,
   ...rest
 }: ViewProps & {
   enabled: boolean;
   children: React.ReactNode;
 }) => {
   if (enabled && screensEnabled()) {
-    return <ScreenContainer style={style} {...rest} />;
+    return <ScreenContainer {...rest} />;
   }
 
-  return (
-    <View
-      collapsable={!enabled}
-      removeClippedSubviews={Platform.OS !== 'ios' && enabled}
-      style={[style, { overflow: 'hidden' }]}
-      {...rest}
-    />
-  );
+  return <View {...rest} />;
 };
 
 const MaybeScreen = ({
   enabled,
   active,
-  style,
   ...rest
 }: ViewProps & {
   enabled: boolean;
@@ -121,39 +103,10 @@ const MaybeScreen = ({
 }) => {
   if (enabled && screensEnabled()) {
     // @ts-ignore
-    return <Screen active={active} style={style} {...rest} />;
+    return <Screen active={active} {...rest} />;
   }
 
-  return (
-    <Animated.View
-      style={[
-        style,
-        {
-          overflow: 'hidden',
-          // Position the screen offscreen to take advantage of offscreen perf optimization
-          // https://facebook.github.io/react-native/docs/view#removeclippedsubviews
-          // This can be useful if screens is not enabled
-          // It's buggy on iOS, so we don't enable it there
-          top:
-            enabled && typeof active === 'number' && !active ? FAR_FAR_AWAY : 0,
-          transform: [
-            {
-              // If the `active` prop is animated node, we can't use the `left` property due to native driver
-              // So we use `translateY` instead
-              translateY:
-                enabled && typeof active !== 'number'
-                  ? active.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [FAR_FAR_AWAY, 0],
-                    })
-                  : 0,
-            },
-          ],
-        },
-      ]}
-      {...rest}
-    />
-  );
+  return <View {...rest} />;
 };
 
 const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
@@ -450,9 +403,7 @@ export default class CardStack extends React.Component<Props, State> {
 
     // Screens is buggy on iOS, so we don't enable it there
     // For modals, usually we want the screen underneath to be visible, so also disable it there
-    const isScreensEnabled =
-      Platform.OS !== 'ios' &&
-      (isInsufficientExpoVersion ? mode !== 'modal' : true);
+    const isScreensEnabled = Platform.OS !== 'ios' && mode !== 'modal';
 
     return (
       <React.Fragment>
@@ -466,26 +417,13 @@ export default class CardStack extends React.Component<Props, State> {
             const gesture = gestures[route.key];
             const scene = scenes[index];
 
-            // Display current screen and a screen beneath.
-            let isScreenActive: Animated.AnimatedInterpolation | 0 | 1 =
-              index >= self.length - 2 ? 1 : 0;
-
-            if (isInsufficientExpoVersion) {
-              isScreenActive =
-                index === self.length - 1
-                  ? 1
-                  : Platform.OS === 'android'
-                  ? scene.progress.next
-                    ? scene.progress.next.interpolate({
-                        inputRange: [0, 1 - EPSILON, 1],
-                        outputRange: [1, 1, 0],
-                        extrapolate: 'clamp',
-                      })
-                    : 1
-                  : index === self.length - 2
-                  ? 1
-                  : 0;
-            }
+            const isScreenActive = scene.progress.next
+              ? scene.progress.next.interpolate({
+                  inputRange: [0, 1 - EPSILON, 1],
+                  outputRange: [1, 1, 0],
+                  extrapolate: 'clamp',
+                })
+              : 1;
 
             const {
               safeAreaInsets,