chore: publish

- @react-navigation/bottom-tabs@5.2.1 - @react-navigation/compat@5.1.3 - @react-navigation/drawer@5.3.0 - @react-navigation/material-bottom-tabs@5.1.3 - @react-navigation/material-top-tabs@5.1.3 - @react-navigation/native@5.1.0 - @react-navigation/stack@5.2.1
feat: add permanent drawer type (#7818 )
2026-01-13 09:30:30 +08:00 · 2020-03-17 14:37:21 +01:00 · 2020-03-17 14:11:00 +01:00 · 2020-03-16 14:29:25 +01:00 · 2020-03-16 14:28:10 +01:00 · 2020-03-16 14:28:10 +01:00
80 changed files with 2198 additions and 1065 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+yarn-*.js binary
--- a/.github/workflows/expo-preview.yml
+++ b/.github/workflows/expo-preview.yml
@@ -44,7 +44,7 @@ jobs:

      - name: Get expo link
        id: expo
-        run: echo "::set-output name=path::@react-navigation/react-react-navigationample?release-channel=pr-${{ github.event.number }}"
+        run: echo "::set-output name=path::@react-navigation/react-navigation-example?release-channel=pr-${{ github.event.number }}"

      - name: Comment on PR
        uses: unsplash/comment-on-pr@master
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -1,20 +0,0 @@
-name: "Close stale issues and pull requests"
-on:
-  schedule:
-  - cron: "0 0 * * *"
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/stale@v1
-      with:
-        repo-token: ${{ secrets.GITHUB_TOKEN }}
-        stale-issue-message: 'Hello 👋, this issue has been open for more than 3 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.'
-        stale-pr-message: 'Hello 👋, this pull request has been open for more than 3 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.'
-        days-before-stale: 90
-        days-before-close: 7
-        stale-issue-label: 'stale'
-        stale-pr-label: 'stale'
-        exempt-issue-label: 'keep open'
-        exempt-pr-label: 'keep open'
--- a/.github/workflows/triage.yml
+++ b/.github/workflows/triage.yml
@@ -36,3 +36,14 @@ jobs:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. This helps us prioritize fixing bugs in the library. Seems you have a usage question. Please ask the question on [StackOverflow](https://stackoverflow.com/questions/tagged/react-navigation) instead using the `react-navigation` label. You can also chat with other community members on [Reactiflux Discord server](https://www.reactiflux.com/) in the `#react-navigation` channel."
+
+  feature-request:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'feature-request'
+    steps:
+      - uses: actions/checkout@master
+      - uses: actions/github@v1.0.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: comment "Hey! Thanks for opening the issue. The issue tracker is intended for only tracking bug reports. Seems you have a feature request. Please post the feature request on [Canny](https://react-navigation.canny.io/feature-requests). This lets other users upvote your feature request and helps us prioritize the most requested features."
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
 .gradle
 .project
 .settings
+.history

 local.properties

--- a/example/package.json
+++ b/example/package.json
@@ -12,7 +12,7 @@
  },
  "dependencies": {
    "@expo/vector-icons": "^10.0.0",
-    "@react-native-community/masked-view": "0.1.6",
+    "@react-native-community/masked-view": "0.1.7",
    "@types/react-native-restart": "^0.0.0",
    "color": "^3.1.2",
    "expo": "^36.0.2",
@@ -21,22 +21,22 @@
    "react": "~16.9.0",
    "react-dom": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.6",
+    "react-native-gesture-handler": "^1.6.0",
    "react-native-paper": "^3.6.0",
    "react-native-reanimated": "^1.7.0",
-    "react-native-restart": "^0.0.13",
-    "react-native-safe-area-context": "^0.7.2",
-    "react-native-screens": "^2.0.0-beta.2",
+    "react-native-restart": "^0.0.14",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.3.0",
    "react-native-tab-view": "2.13.0",
    "react-native-unimodules": "^0.7.0",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
-    "@expo/webpack-config": "^0.10.12",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@expo/webpack-config": "^0.11.7",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "babel-preset-expo": "^8.0.0",
-    "expo-cli": "^3.11.9",
+    "expo-cli": "^3.13.8",
    "typescript": "^3.7.5"
  }
 }
--- a/example/src/index.tsx
+++ b/example/src/index.tsx
@@ -6,8 +6,14 @@ import {
  Platform,
  StatusBar,
  I18nManager,
+  Dimensions,
+  ScaledSize,
 } 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 +23,6 @@ import {
  List,
  Divider,
 } from 'react-native-paper';
-import { Asset } from 'expo-asset';
 import {
  InitialState,
  useLinking,
@@ -49,10 +54,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;
@@ -192,10 +198,24 @@ export default function App() {
    };
  }, [theme.colors, theme.dark]);

+  const [dimensions, setDimensions] = React.useState(Dimensions.get('window'));
+
+  React.useEffect(() => {
+    const onDimensionsChange = ({ window }: { window: ScaledSize }) => {
+      setDimensions(window);
+    };
+
+    Dimensions.addEventListener('change', onDimensionsChange);
+
+    return () => Dimensions.removeEventListener('change', onDimensionsChange);
+  }, []);
+
  if (!isReady) {
    return null;
  }

+  const isLargeScreen = dimensions.width > 900;
+
  return (
    <PaperProvider theme={paperTheme}>
      {Platform.OS === 'ios' && (
@@ -212,7 +232,7 @@ export default function App() {
        }
        theme={theme}
      >
-        <Drawer.Navigator>
+        <Drawer.Navigator drawerType={isLargeScreen ? 'permanent' : undefined}>
          <Drawer.Screen
            name="Root"
            options={{
@@ -236,13 +256,15 @@ export default function App() {
                  name="Home"
                  options={{
                    title: 'Examples',
-                    headerLeft: () => (
-                      <Appbar.Action
-                        color={theme.colors.text}
-                        icon="menu"
-                        onPress={() => navigation.toggleDrawer()}
-                      />
-                    ),
+                    headerLeft: isLargeScreen
+                      ? undefined
+                      : () => (
+                          <Appbar.Action
+                            color={theme.colors.text}
+                            icon="menu"
+                            onPress={() => navigation.toggleDrawer()}
+                          />
+                        ),
                  }}
                >
                  {({
--- a/jest/setup.js
+++ b/jest/setup.js
@@ -1,7 +1,7 @@
 const error = console.error;

 console.error = (...args) =>
-  // Supress error messages regarding error boundary in tests
+  // Suppress error messages regarding error boundary in tests
  /(Consider adding an error boundary to your tree to customize error handling behavior|React will try to recreate this component tree from scratch using the error boundary you provided|Error boundaries should implement getDerivedStateFromError)/m.test(
    args[0]
  )
--- a/package.json
+++ b/package.json
@@ -20,26 +20,27 @@
    "lint": "eslint --ext '.js,.ts,.tsx' .",
    "typescript": "tsc --noEmit",
    "test": "jest",
+    "prerelease": "lerna run clean",
    "release": "lerna publish",
    "example": "yarn --cwd example"
  },
  "devDependencies": {
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/plugin-proposal-optional-chaining": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-env": "^7.8.7",
    "@babel/preset-flow": "^7.8.3",
    "@babel/preset-react": "^7.8.3",
    "@babel/preset-typescript": "^7.8.3",
-    "@babel/runtime": "^7.8.4",
+    "@babel/runtime": "^7.8.7",
    "@commitlint/config-conventional": "^8.3.4",
-    "@types/jest": "^25.1.2",
+    "@types/jest": "^25.1.4",
    "codecov": "^3.6.5",
    "commitlint": "^8.3.5",
    "core-js": "^3.6.4",
-    "detox": "^15.1.4",
+    "detox": "^16.0.0",
    "eslint": "^6.8.0",
    "eslint-config-satya164": "^3.1.5",
-    "husky": "^4.2.1",
+    "husky": "^4.2.3",
    "jest": "^25.1.0",
    "lerna": "^3.20.2",
    "prettier": "^1.19.1",
--- a/packages/bottom-tabs/CHANGELOG.md
+++ b/packages/bottom-tabs/CHANGELOG.md
@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.0...@react-navigation/bottom-tabs@5.2.1) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.1...@react-navigation/bottom-tabs@5.2.0) (2020-03-16)
+
+
+### Features
+
+* add safeAreaInsets to bottom tabs ([82af7be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/82af7bed7135e42e24693b48cf7f1c6f9f5a6981))
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.1.0...@react-navigation/bottom-tabs@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.0.7...@react-navigation/bottom-tabs@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/issues/6756)
+
+
+
+
+
 ## [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
--- a/packages/bottom-tabs/package.json
+++ b/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.7",
+  "version": "5.2.1",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -34,22 +34,24 @@
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.7",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.0",
    "@types/color": "^3.0.1",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-safe-area-context": "^0.7.2",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.3.0",
    "typescript": "^3.7.5"
  },
  "peerDependencies": {
    "@react-navigation/native": "^5.0.5",
    "react": "*",
    "react-native": "*",
-    "react-native-safe-area-context": ">= 0.6.0"
+    "react-native-safe-area-context": ">= 0.6.0",
+    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
+++ b/packages/bottom-tabs/src/navigators/createBottomTabNavigator.tsx
@@ -48,6 +48,8 @@ function BottomTabNavigator({
 }

 export default createNavigatorFactory<
+  TabNavigationState,
  BottomTabNavigationOptions,
+  BottomTabNavigationEventMap,
  typeof BottomTabNavigator
 >(BottomTabNavigator);
--- a/packages/bottom-tabs/src/types.tsx
+++ b/packages/bottom-tabs/src/types.tsx
@@ -11,6 +11,7 @@ import {
  ParamListBase,
  Descriptor,
  TabNavigationState,
+  TabActionHelpers,
 } from '@react-navigation/native';

 export type BottomTabNavigationEventMap = {
@@ -40,19 +41,8 @@ export type BottomTabNavigationProp<
  TabNavigationState,
  BottomTabNavigationOptions,
  BottomTabNavigationEventMap
-> & {
-  /**
-   * Jump to an existing tab.
-   *
-   * @param name Name of the route for the tab.
-   * @param [params] Params object for the route.
-   */
-  jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends undefined | any
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-};
+> &
+  TabActionHelpers<ParamList>;

 export type BottomTabNavigationOptions = {
  /**
@@ -184,6 +174,16 @@ export type BottomTabBarOptions = {
   * Whether the label position should adapt to the orientation.
   */
  adaptive?: boolean;
+  /**
+   * Safe area insets for the tab bar. This is used to avoid elements like the navigation bar on Android and bottom safe area on iOS.
+   * By default, the device's safe area insets are automatically detected. You can override the behavior with this option.
+   */
+  safeAreaInsets?: {
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+  };
  /**
   * Style object for the tab bar container.
   */
--- a/packages/bottom-tabs/src/views/BottomTabBar.tsx
+++ b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -15,7 +15,7 @@ import {
  CommonActions,
  useTheme,
 } from '@react-navigation/native';
-import { SafeAreaConsumer } from 'react-native-safe-area-context';
+import { useSafeArea } from 'react-native-safe-area-context';

 import BottomTabItem from './BottomTabItem';
 import { BottomTabBarProps } from '../types';
@@ -43,6 +43,7 @@ export default function BottomTabBar({
  keyboardHidesTabBar = false,
  labelPosition,
  labelStyle,
+  safeAreaInsets,
  showIcon,
  showLabel,
  style,
@@ -158,116 +159,122 @@ export default function BottomTabBar({
    }
  };

+  const defaultInsets = useSafeArea();
+
+  const insets = {
+    top: safeAreaInsets?.top ?? defaultInsets.top,
+    right: safeAreaInsets?.right ?? defaultInsets.right,
+    bottom: safeAreaInsets?.bottom ?? defaultInsets.bottom,
+    left: safeAreaInsets?.left ?? defaultInsets.left,
+  };
+
  return (
-    <SafeAreaConsumer>
-      {insets => (
-        <Animated.View
-          style={[
-            styles.tabBar,
-            {
-              backgroundColor: colors.card,
-              borderTopColor: colors.border,
-            },
-            keyboardHidesTabBar
-              ? {
-                  // When the keyboard is shown, slide down the tab bar
-                  transform: [
-                    {
-                      translateY: visible.interpolate({
-                        inputRange: [0, 1],
-                        outputRange: [layout.height, 0],
-                      }),
-                    },
-                  ],
-                  // Absolutely position the tab bar so that the content is below it
-                  // This is needed to avoid gap at bottom when the tab bar is hidden
-                  position: keyboardShown ? 'absolute' : null,
-                }
-              : null,
-            {
-              height: DEFAULT_TABBAR_HEIGHT + (insets ? insets.bottom : 0),
-              paddingBottom: insets ? insets.bottom : 0,
-            },
-            style,
-          ]}
-          pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
-        >
-          <View style={styles.content} onLayout={handleLayout}>
-            {routes.map((route, index) => {
-              const focused = index === state.index;
-              const { options } = descriptors[route.key];
+    <Animated.View
+      style={[
+        styles.tabBar,
+        {
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+        },
+        keyboardHidesTabBar
+          ? {
+              // When the keyboard is shown, slide down the tab bar
+              transform: [
+                {
+                  translateY: visible.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [layout.height, 0],
+                  }),
+                },
+              ],
+              // Absolutely position the tab bar so that the content is below it
+              // This is needed to avoid gap at bottom when the tab bar is hidden
+              position: keyboardShown ? 'absolute' : null,
+            }
+          : null,
+        {
+          height: DEFAULT_TABBAR_HEIGHT + insets.bottom,
+          paddingBottom: insets.bottom,
+          paddingHorizontal: Math.max(insets.left, insets.right),
+        },
+        style,
+      ]}
+      pointerEvents={keyboardHidesTabBar && keyboardShown ? 'none' : 'auto'}
+    >
+      <View style={styles.content} onLayout={handleLayout}>
+        {routes.map((route, index) => {
+          const focused = index === state.index;
+          const { options } = descriptors[route.key];

-              const onPress = () => {
-                const event = navigation.emit({
-                  type: 'tabPress',
-                  target: route.key,
-                  canPreventDefault: true,
-                });
+          const onPress = () => {
+            const event = navigation.emit({
+              type: 'tabPress',
+              target: route.key,
+              canPreventDefault: true,
+            });

-                if (!focused && !event.defaultPrevented) {
-                  navigation.dispatch({
-                    ...CommonActions.navigate(route.name),
-                    target: state.key,
-                  });
-                }
-              };
+            if (!focused && !event.defaultPrevented) {
+              navigation.dispatch({
+                ...CommonActions.navigate(route.name),
+                target: state.key,
+              });
+            }
+          };

-              const onLongPress = () => {
-                navigation.emit({
-                  type: 'tabLongPress',
-                  target: route.key,
-                });
-              };
+          const onLongPress = () => {
+            navigation.emit({
+              type: 'tabLongPress',
+              target: route.key,
+            });
+          };

-              const label =
-                options.tabBarLabel !== undefined
-                  ? options.tabBarLabel
-                  : options.title !== undefined
-                  ? options.title
-                  : route.name;
+          const label =
+            options.tabBarLabel !== undefined
+              ? options.tabBarLabel
+              : options.title !== undefined
+              ? options.title
+              : route.name;

-              const accessibilityLabel =
-                options.tabBarAccessibilityLabel !== undefined
-                  ? options.tabBarAccessibilityLabel
-                  : typeof label === 'string'
-                  ? `${label}, tab, ${index + 1} of ${routes.length}`
-                  : undefined;
+          const accessibilityLabel =
+            options.tabBarAccessibilityLabel !== undefined
+              ? options.tabBarAccessibilityLabel
+              : typeof label === 'string'
+              ? `${label}, tab, ${index + 1} of ${routes.length}`
+              : undefined;

-              return (
-                <NavigationContext.Provider
-                  key={route.key}
-                  value={descriptors[route.key].navigation}
-                >
-                  <NavigationRouteContext.Provider value={route}>
-                    <BottomTabItem
-                      route={route}
-                      focused={focused}
-                      horizontal={shouldUseHorizontalLabels()}
-                      onPress={onPress}
-                      onLongPress={onLongPress}
-                      accessibilityLabel={accessibilityLabel}
-                      testID={options.tabBarTestID}
-                      allowFontScaling={allowFontScaling}
-                      activeTintColor={activeTintColor}
-                      inactiveTintColor={inactiveTintColor}
-                      activeBackgroundColor={activeBackgroundColor}
-                      inactiveBackgroundColor={inactiveBackgroundColor}
-                      button={options.tabBarButton}
-                      icon={options.tabBarIcon}
-                      label={label}
-                      showIcon={showIcon}
-                      showLabel={showLabel}
-                      labelStyle={labelStyle}
-                      style={tabStyle}
-                    />
-                  </NavigationRouteContext.Provider>
-                </NavigationContext.Provider>
-              );
-            })}
-          </View>
-        </Animated.View>
-      )}
-    </SafeAreaConsumer>
+          return (
+            <NavigationContext.Provider
+              key={route.key}
+              value={descriptors[route.key].navigation}
+            >
+              <NavigationRouteContext.Provider value={route}>
+                <BottomTabItem
+                  route={route}
+                  focused={focused}
+                  horizontal={shouldUseHorizontalLabels()}
+                  onPress={onPress}
+                  onLongPress={onLongPress}
+                  accessibilityLabel={accessibilityLabel}
+                  testID={options.tabBarTestID}
+                  allowFontScaling={allowFontScaling}
+                  activeTintColor={activeTintColor}
+                  inactiveTintColor={inactiveTintColor}
+                  activeBackgroundColor={activeBackgroundColor}
+                  inactiveBackgroundColor={inactiveBackgroundColor}
+                  button={options.tabBarButton}
+                  icon={options.tabBarIcon}
+                  label={label}
+                  showIcon={showIcon}
+                  showLabel={showLabel}
+                  labelStyle={labelStyle}
+                  style={tabStyle}
+                />
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
+          );
+        })}
+      </View>
+    </Animated.View>
  );
 }

--- a/packages/compat/CHANGELOG.md
+++ b/packages/compat/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.2...@react-navigation/compat@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.1...@react-navigation/compat@5.1.2) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.1.0...@react-navigation/compat@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/compare/@react-navigation/compat@5.0.7...@react-navigation/compat@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/compat/issues/6756)
+
+
+
+
+
 ## [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
--- a/packages/compat/package.json
+++ b/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.7",
+  "version": "5.1.3",
  "license": "MIT",
  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
  "bugs": {
@@ -25,9 +25,9 @@
    "clean": "del lib"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.7",
-    "@types/react": "^16.9.19",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.0",
+    "@types/react": "^16.9.23",
    "react": "~16.9.0",
    "typescript": "^3.7.5"
  },
--- a/packages/compat/src/createCompatNavigatorFactory.tsx
+++ b/packages/compat/src/createCompatNavigatorFactory.tsx
@@ -6,6 +6,7 @@ import {
  TypedNavigator,
  NavigationProp,
  RouteProp,
+  EventMapBase,
 } from '@react-navigation/native';
 import CompatScreen from './CompatScreen';
 import ScreenPropsContext from './ScreenPropsContext';
@@ -15,7 +16,9 @@ import { CompatScreenType, CompatRouteConfig } from './types';
 export default function createCompatNavigatorFactory<
  CreateNavigator extends () => TypedNavigator<
    ParamListBase,
+    NavigationState,
    {},
+    EventMapBase,
    React.ComponentType<any>
  >
 >(createNavigator: CreateNavigator) {
--- a/packages/compat/src/createSwitchNavigator.tsx
+++ b/packages/compat/src/createSwitchNavigator.tsx
@@ -22,5 +22,7 @@ function SwitchNavigator(props: Props) {
 }

 export default createCompatNavigatorFactory(
-  createNavigatorFactory<{}, typeof SwitchNavigator>(SwitchNavigator)
+  createNavigatorFactory<TabNavigationState, {}, {}, typeof SwitchNavigator>(
+    SwitchNavigator
+  )
 );
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.2.2](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.1...@react-navigation/core@5.2.2) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/core
+
+
+
+
+
+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.2.0...@react-navigation/core@5.2.1) (2020-03-03)
+
+
+### Bug Fixes
+
+* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
+* move updating state to useEffect ([2dfa4f3](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2dfa4f36293a2acb718814f6b2fa79d7c7ddf09c))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.1.6...@react-navigation/core@5.2.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/core/issues/6756)
+
+
+
+
+
 ## [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)


--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/core",
  "description": "Core utilities for building navigators",
-  "version": "5.1.6",
+  "version": "5.2.2",
  "keywords": [
    "react",
    "react-native",
@@ -29,23 +29,23 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/routers": "^5.0.2",
+    "@react-navigation/routers": "^5.1.1",
    "escape-string-regexp": "^2.0.0",
-    "query-string": "^6.10.1",
-    "react-is": "^16.12.0",
+    "query-string": "^6.11.1",
+    "react-is": "^16.13.0",
    "shortid": "^2.2.15",
-    "use-subscription": "^1.3.0"
+    "use-subscription": "^1.4.0"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@types/react": "^16.9.19",
+    "@react-native-community/bob": "^0.10.0",
+    "@types/react": "^16.9.23",
    "@types/react-is": "^16.7.1",
    "@types/shortid": "^0.0.29",
    "@types/use-subscription": "^1.0.0",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native-testing-library": "^1.12.0",
-    "react-test-renderer": "~16.12.0",
+    "react-test-renderer": "~16.9.0",
    "typescript": "^3.7.5"
  },
  "peerDependencies": {
--- a/packages/core/src/BaseNavigationContainer.tsx
+++ b/packages/core/src/BaseNavigationContainer.tsx
@@ -21,10 +21,10 @@ import useSyncState from './useSyncState';
 type State = NavigationState | PartialState<NavigationState> | undefined;

 const MISSING_CONTEXT_ERROR =
-  "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/en/getting-started.html for setup instructions.";
+  "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";

 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/en/navigating-without-navigation-prop.html#handling-initialization for more details.";
+  "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.";

 export const NavigationStateContext = React.createContext<{
  isDefault?: true;
@@ -238,7 +238,7 @@ const BaseNavigationContainer = React.forwardRef(
          hasWarnedForSerialization = true;

          console.warn(
-            "We found non-serializable values in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/en/troubleshooting.html#i-get-the-warning-we-found-non-serializable-values-in-the-navigation-state for more details."
+            "Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details."
          );
        }
      }
--- a/packages/core/src/EnsureSingleNavigator.tsx
+++ b/packages/core/src/EnsureSingleNavigator.tsx
@@ -4,7 +4,7 @@ type Props = {
  children: React.ReactNode;
 };

-const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/en/nesting-navigators.html for a guide on nesting.`;
+const MULTIPLE_NAVIGATOR_ERROR = `Another navigator is already registered for this container. You likely have multiple navigators under a single "NavigationContainer" or "Screen". Make sure each navigator is under a separate "Screen" container. See https://reactnavigation.org/docs/nesting-navigators for a guide on nesting.`;

 export const SingleNavigatorContext = React.createContext<
  | {
--- a/packages/core/src/SceneView.tsx
+++ b/packages/core/src/SceneView.tsx
@@ -10,10 +10,14 @@ import NavigationContext from './NavigationContext';
 import NavigationRouteContext from './NavigationRouteContext';
 import StaticContainer from './StaticContainer';
 import EnsureSingleNavigator from './EnsureSingleNavigator';
-import { NavigationProp, RouteConfig } from './types';
+import { NavigationProp, RouteConfig, EventMapBase } from './types';

-type Props<State extends NavigationState, ScreenOptions extends object> = {
-  screen: RouteConfig<ParamListBase, string, ScreenOptions>;
+type Props<
+  State extends NavigationState,
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
+> = {
+  screen: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
  navigation: NavigationProp<ParamListBase, string, State, ScreenOptions>;
  route: Route<string> & {
    state?: NavigationState | PartialState<NavigationState>;
@@ -28,14 +32,15 @@ type Props<State extends NavigationState, ScreenOptions extends object> = {
 */
 export default function SceneView<
  State extends NavigationState,
-  ScreenOptions extends object
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
 >({
  screen,
  route,
  navigation,
  getState,
  setState,
-}: Props<State, ScreenOptions>) {
+}: Props<State, ScreenOptions, EventMap>) {
  const navigatorKeyRef = React.useRef<string | undefined>();

  const getKey = React.useCallback(() => navigatorKeyRef.current, []);
--- a/packages/core/src/Screen.tsx
+++ b/packages/core/src/Screen.tsx
@@ -1,5 +1,5 @@
-import { ParamListBase } from '@react-navigation/routers';
-import { RouteConfig } from './types';
+import { ParamListBase, NavigationState } from '@react-navigation/routers';
+import { RouteConfig, EventMapBase } from './types';

 /**
 * Empty component used for specifying route configuration.
@@ -7,8 +7,10 @@ import { RouteConfig } from './types';
 export default function Screen<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList,
-  ScreenOptions extends object
->(_: RouteConfig<ParamList, RouteName, ScreenOptions>) {
+  State extends NavigationState,
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
+>(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
  /* istanbul ignore next */
  return null;
 }
--- a/packages/core/src/tests/BaseNavigationContainer.test.tsx
+++ b/packages/core/src/tests/BaseNavigationContainer.test.tsx
@@ -28,7 +28,7 @@ it('throws when getState is accessed without a container', () => {
  const element = <Test />;

  expect(() => render(element).update(element)).toThrowError(
-    "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
+    "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
  );
 });

@@ -47,7 +47,7 @@ it('throws when setState is accessed without a container', () => {
  const element = <Test />;

  expect(() => render(element).update(element)).toThrowError(
-    "We couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
+    "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'?"
  );
 });

--- a/packages/core/src/tests/index.test.tsx
+++ b/packages/core/src/tests/index.test.tsx
@@ -372,7 +372,7 @@ it("doesn't update state if action wasn't handled", () => {
  expect(onStateChange).toBeCalledTimes(0);

  expect(spy.mock.calls[0][0]).toMatch(
-    "The action 'INVALID' with payload 'undefined' was not handled by any navigator."
+    "The action 'INVALID' was not handled by any navigator."
  );

  spy.mockRestore();
@@ -1085,7 +1085,7 @@ it('throws descriptive error for invalid screen component', () => {
  );

  expect(() => render(element).update(element)).toThrowError(
-    "Got an invalid value for 'component' prop for the screen 'foo'. It must be a a valid React Component."
+    "Got an invalid value for 'component' prop for the screen 'foo'. It must be a valid React Component."
  );
 });

--- a/packages/core/src/tests/useEventEmitter.test.tsx
+++ b/packages/core/src/tests/useEventEmitter.test.tsx
@@ -362,7 +362,7 @@ it('fires blur event when a route is removed with a delay', async () => {
  expect(blurCallback).toBeCalledTimes(1);
 });

-it('fires custom events', () => {
+it('fires custom events added with addListener', () => {
  const eventName = 'someSuperCoolEvent';

  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
@@ -409,10 +409,13 @@ it('fires custom events', () => {
  expect(secondCallback).toBeCalledTimes(0);
  expect(thirdCallback).toBeCalledTimes(0);

+  const target =
+    ref.current.state.routes[ref.current.state.routes.length - 1].key;
+
  act(() => {
    ref.current.navigation.emit({
      type: eventName,
-      target: ref.current.state.routes[ref.current.state.routes.length - 1].key,
+      target,
      data: 42,
    });
  });
@@ -422,6 +425,7 @@ it('fires custom events', () => {
  expect(thirdCallback).toBeCalledTimes(1);
  expect(thirdCallback.mock.calls[0][0].type).toBe('someSuperCoolEvent');
  expect(thirdCallback.mock.calls[0][0].data).toBe(42);
+  expect(thirdCallback.mock.calls[0][0].target).toBe(target);
  expect(thirdCallback.mock.calls[0][0].defaultPrevented).toBe(undefined);
  expect(thirdCallback.mock.calls[0][0].preventDefault).toBe(undefined);

@@ -429,11 +433,197 @@ it('fires custom events', () => {
    ref.current.navigation.emit({ type: eventName });
  });

+  expect(firstCallback.mock.calls[0][0].target).toBe(undefined);
+  expect(secondCallback.mock.calls[0][0].target).toBe(undefined);
+  expect(thirdCallback.mock.calls[1][0].target).toBe(undefined);
+
  expect(firstCallback).toBeCalledTimes(1);
  expect(secondCallback).toBeCalledTimes(1);
  expect(thirdCallback).toBeCalledTimes(2);
 });

+it("doesn't call same listener multiple times with addListener", () => {
+  const eventName = 'someSuperCoolEvent';
+
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation, descriptors } = useNavigationBuilder(
+      MockRouter,
+      props
+    );
+
+    React.useImperativeHandle(ref, () => ({ navigation, state }), [
+      navigation,
+      state,
+    ]);
+
+    return state.routes.map(route => descriptors[route.key].render());
+  });
+
+  const callback = jest.fn();
+
+  const Test = ({ navigation }: any) => {
+    React.useEffect(() => navigation.addListener(eventName, callback), [
+      navigation,
+    ]);
+
+    return null;
+  };
+
+  const ref = React.createRef<any>();
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator ref={ref}>
+        <Screen name="first" component={Test} />
+        <Screen name="second" component={Test} />
+        <Screen name="third" component={Test} />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  expect(callback).toBeCalledTimes(0);
+
+  act(() => {
+    ref.current.navigation.emit({ type: eventName });
+  });
+
+  expect(callback).toBeCalledTimes(1);
+});
+
+it('fires custom events added with listeners prop', () => {
+  const eventName = 'someSuperCoolEvent';
+
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation } = useNavigationBuilder(MockRouter, props);
+
+    React.useImperativeHandle(ref, () => ({ navigation, state }), [
+      navigation,
+      state,
+    ]);
+
+    return null;
+  });
+
+  const firstCallback = jest.fn();
+  const secondCallback = jest.fn();
+  const thirdCallback = jest.fn();
+
+  const ref = React.createRef<any>();
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator ref={ref}>
+        <Screen
+          name="first"
+          listeners={{ someSuperCoolEvent: firstCallback }}
+          component={jest.fn()}
+        />
+        <Screen
+          name="second"
+          listeners={{ someSuperCoolEvent: secondCallback }}
+          component={jest.fn()}
+        />
+        <Screen
+          name="third"
+          listeners={{ someSuperCoolEvent: thirdCallback }}
+          component={jest.fn()}
+        />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  expect(firstCallback).toBeCalledTimes(0);
+  expect(secondCallback).toBeCalledTimes(0);
+  expect(thirdCallback).toBeCalledTimes(0);
+
+  const target =
+    ref.current.state.routes[ref.current.state.routes.length - 1].key;
+
+  act(() => {
+    ref.current.navigation.emit({
+      type: eventName,
+      target,
+      data: 42,
+    });
+  });
+
+  expect(firstCallback).toBeCalledTimes(0);
+  expect(secondCallback).toBeCalledTimes(0);
+  expect(thirdCallback).toBeCalledTimes(1);
+  expect(thirdCallback.mock.calls[0][0].type).toBe('someSuperCoolEvent');
+  expect(thirdCallback.mock.calls[0][0].data).toBe(42);
+  expect(thirdCallback.mock.calls[0][0].target).toBe(target);
+  expect(thirdCallback.mock.calls[0][0].defaultPrevented).toBe(undefined);
+  expect(thirdCallback.mock.calls[0][0].preventDefault).toBe(undefined);
+
+  act(() => {
+    ref.current.navigation.emit({ type: eventName });
+  });
+
+  expect(firstCallback.mock.calls[0][0].target).toBe(undefined);
+  expect(secondCallback.mock.calls[0][0].target).toBe(undefined);
+  expect(thirdCallback.mock.calls[1][0].target).toBe(undefined);
+
+  expect(firstCallback).toBeCalledTimes(1);
+  expect(secondCallback).toBeCalledTimes(1);
+  expect(thirdCallback).toBeCalledTimes(2);
+});
+
+it("doesn't call same listener multiple times with listeners", () => {
+  const eventName = 'someSuperCoolEvent';
+
+  const TestNavigator = React.forwardRef((props: any, ref: any): any => {
+    const { state, navigation } = useNavigationBuilder(MockRouter, props);
+
+    React.useImperativeHandle(ref, () => ({ navigation, state }), [
+      navigation,
+      state,
+    ]);
+
+    return null;
+  });
+
+  const callback = jest.fn();
+
+  const ref = React.createRef<any>();
+
+  const element = (
+    <BaseNavigationContainer>
+      <TestNavigator ref={ref}>
+        <Screen
+          name="first"
+          listeners={{ someSuperCoolEvent: callback }}
+          component={jest.fn()}
+        />
+        <Screen
+          name="second"
+          listeners={{ someSuperCoolEvent: callback }}
+          component={jest.fn()}
+        />
+        <Screen
+          name="third"
+          listeners={{ someSuperCoolEvent: callback }}
+          component={jest.fn()}
+        />
+      </TestNavigator>
+    </BaseNavigationContainer>
+  );
+
+  render(element);
+
+  expect(callback).toBeCalledTimes(0);
+
+  act(() => {
+    ref.current.navigation.emit({ type: eventName });
+  });
+
+  expect(callback).toBeCalledTimes(1);
+});
+
 it('has option to prevent default', () => {
  expect.assertions(5);

--- a/packages/core/src/tests/useNavigation.test.tsx
+++ b/packages/core/src/tests/useNavigation.test.tsx
@@ -112,7 +112,7 @@ it('throws if called outside a navigation context', () => {
  const Test = () => {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    expect(() => useNavigation()).toThrow(
-      "We couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
    );

    return null;
--- a/packages/core/src/tests/useOnAction.test.tsx
+++ b/packages/core/src/tests/useOnAction.test.tsx
@@ -374,7 +374,7 @@ it('logs error if no navigator handled the action', () => {
  render(element).update(element);

  expect(spy.mock.calls[0][0]).toMatch(
-    "The action 'UNKNOWN' with payload 'undefined' was not handled by any navigator."
+    "The action 'UNKNOWN' was not handled by any navigator."
  );

  spy.mockRestore();
--- a/packages/core/src/createNavigatorFactory.tsx
+++ b/packages/core/src/createNavigatorFactory.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { ParamListBase } from '@react-navigation/routers';
+import { ParamListBase, NavigationState } from '@react-navigation/routers';
 import Screen from './Screen';
-import { TypedNavigator } from './types';
+import { TypedNavigator, EventMapBase } from './types';

 /**
 * Higher order component to create a `Navigator` and `Screen` pair.
@@ -11,17 +11,21 @@ import { TypedNavigator } from './types';
 * @returns Factory method to create a `Navigator` and `Screen` pair.
 */
 export default function createNavigatorFactory<
+  State extends NavigationState,
  ScreenOptions extends object,
+  EventMap extends EventMapBase,
  NavigatorComponent extends React.ComponentType<any>
 >(Navigator: NavigatorComponent) {
  return function<ParamList extends ParamListBase>(): TypedNavigator<
    ParamList,
+    State,
    ScreenOptions,
+    EventMap,
    typeof Navigator
  > {
    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 with React Navigation 5? See https://reactnavigation.org/docs/en/upgrading-from-4.x.html for migration guide."
+        "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."
      );
    }

--- a/packages/core/src/types.tsx
+++ b/packages/core/src/types.tsx
@@ -48,6 +48,7 @@ export type EventArg<
   * Type of the event (e.g. `focus`, `blur`)
   */
  readonly type: EventName;
+  readonly target?: string;
 } & (CanPreventDefault extends true
  ? {
      /**
@@ -167,18 +168,6 @@ type NavigationHelpersCommon<
      | { name: RouteName; key?: string; params: ParamList[RouteName] }
  ): void;

-  /**
-   * Replace the current route with a new one.
-   *
-   * @param name Route name of the new route.
-   * @param [params] Params object for the new route.
-   */
-  replace<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends undefined
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-
  /**
   * Reset the navigation state to the provided state.
   *
@@ -360,7 +349,9 @@ export type Descriptor<
 export type RouteConfig<
  ParamList extends ParamListBase,
  RouteName extends keyof ParamList,
-  ScreenOptions extends object
+  State extends NavigationState,
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
 > = {
  /**
   * Route name of this screen.
@@ -377,6 +368,16 @@ export type RouteConfig<
        navigation: any;
      }) => ScreenOptions);

+  /**
+   * Event listeners for this screen.
+   */
+  listeners?: Partial<
+    {
+      [EventName in keyof (EventMap &
+        EventMapCore<State>)]: EventListenerCallback<EventMap, EventName>;
+    }
+  >;
+
  /**
   * Initial params object for the route.
   */
@@ -420,7 +421,9 @@ export type NavigationContainerRef =

 export type TypedNavigator<
  ParamList extends ParamListBase,
+  State extends NavigationState,
  ScreenOptions extends object,
+  EventMap extends EventMapBase,
  Navigator extends React.ComponentType<any>
 > = {
  /**
@@ -451,6 +454,6 @@ export type TypedNavigator<
   * Component used for specifying route configuration.
   */
  Screen: <RouteName extends keyof ParamList>(
-    _: RouteConfig<ParamList, RouteName, ScreenOptions>
+    _: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>
  ) => null;
 };
--- a/packages/core/src/useDescriptors.tsx
+++ b/packages/core/src/useDescriptors.tsx
@@ -13,11 +13,24 @@ import NavigationBuilderContext, {
 } from './NavigationBuilderContext';
 import { NavigationEventEmitter } from './useEventEmitter';
 import useNavigationCache from './useNavigationCache';
-import { Descriptor, NavigationHelpers, RouteConfig, RouteProp } from './types';
+import {
+  Descriptor,
+  NavigationHelpers,
+  RouteConfig,
+  RouteProp,
+  EventMapBase,
+} from './types';

-type Options<State extends NavigationState, ScreenOptions extends object> = {
+type Options<
+  State extends NavigationState,
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
+> = {
  state: State;
-  screens: Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>;
+  screens: Record<
+    string,
+    RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>
+  >;
  navigation: NavigationHelpers<ParamListBase>;
  screenOptions?:
    | ScreenOptions
@@ -49,7 +62,8 @@ type Options<State extends NavigationState, ScreenOptions extends object> = {
 */
 export default function useDescriptors<
  State extends NavigationState,
-  ScreenOptions extends object
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
 >({
  state,
  screens,
@@ -64,7 +78,7 @@ export default function useDescriptors<
  onRouteFocus,
  router,
  emitter,
-}: Options<State, ScreenOptions>) {
+}: Options<State, ScreenOptions, EventMap>) {
  const [options, setOptions] = React.useState<Record<string, object>>({});
  const { trackAction } = React.useContext(NavigationBuilderContext);

@@ -133,6 +147,7 @@ export default function useDescriptors<
            : screen.options({
                // @ts-ignore
                route,
+                // @ts-ignore
                navigation,
              })),
          // The options set via `navigation.setOptions`
--- a/packages/core/src/useEventEmitter.tsx
+++ b/packages/core/src/useEventEmitter.tsx
@@ -5,12 +5,20 @@ export type NavigationEventEmitter = EventEmitter<Record<string, any>> & {
  create: (target: string) => EventConsumer<Record<string, any>>;
 };

-type Listeners = ((data: any) => void)[];
+type Listeners = ((e: any) => void)[];

 /**
 * Hook to manage the event system used by the navigator to notify screens of various events.
 */
-export default function useEventEmitter(): NavigationEventEmitter {
+export default function useEventEmitter(
+  listen?: (e: any) => void
+): NavigationEventEmitter {
+  const listenRef = React.useRef(listen);
+
+  React.useEffect(() => {
+    listenRef.current = listen;
+  });
+
  const listeners = React.useRef<Record<string, Record<string, Listeners>>>({});

  const create = React.useCallback((target: string) => {
@@ -60,7 +68,9 @@ export default function useEventEmitter(): NavigationEventEmitter {
      const callbacks =
        target !== undefined
          ? items[target] && items[target].slice()
-          : ([] as Listeners).concat(...Object.keys(items).map(t => items[t]));
+          : ([] as Listeners)
+              .concat(...Object.keys(items).map(t => items[t]))
+              .filter((cb, i, self) => self.lastIndexOf(cb) === i);

      const event: EventArg<any, any, any> = {
        get type() {
@@ -68,8 +78,18 @@ export default function useEventEmitter(): NavigationEventEmitter {
        },
      };

+      if (target !== undefined) {
+        Object.defineProperty(event, 'target', {
+          enumerable: true,
+          get() {
+            return target;
+          },
+        });
+      }
+
      if (data !== undefined) {
        Object.defineProperty(event, 'data', {
+          enumerable: true,
          get() {
            return data;
          },
@@ -81,11 +101,13 @@ export default function useEventEmitter(): NavigationEventEmitter {

        Object.defineProperties(event, {
          defaultPrevented: {
+            enumerable: true,
            get() {
              return defaultPrevented;
            },
          },
          preventDefault: {
+            enumerable: true,
            value() {
              defaultPrevented = true;
            },
@@ -93,6 +115,8 @@ export default function useEventEmitter(): NavigationEventEmitter {
        });
      }

+      listenRef.current?.(event);
+
      callbacks?.forEach(cb => cb(event));

      return event as any;
--- a/packages/core/src/useFocusEffect.tsx
+++ b/packages/core/src/useFocusEffect.tsx
@@ -46,7 +46,7 @@ export default function useFocusEffect(effect: EffectCallback) {
            '    fetchData();\n' +
            '  }, [someId])\n' +
            '};\n\n' +
-            'See usage guide: https://reactnavigation.org/docs/en/use-focus-effect.html';
+            'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
        } else {
          message += ` You returned: '${JSON.stringify(destroy)}'`;
        }
--- a/packages/core/src/useNavigation.tsx
+++ b/packages/core/src/useNavigation.tsx
@@ -15,7 +15,7 @@ export default function useNavigation<

  if (navigation === undefined) {
    throw new Error(
-      "We couldn't find a navigation object. Is your component inside a screen in a navigator?"
+      "Couldn't find a navigation object. Is your component inside a screen in a navigator?"
    );
  }

--- a/packages/core/src/useNavigationBuilder.tsx
+++ b/packages/core/src/useNavigationBuilder.tsx
@@ -27,6 +27,7 @@ import {
  DefaultNavigatorOptions,
  RouteConfig,
  PrivateValueStore,
+  EventMapBase,
 } from './types';
 import useStateGetters from './useStateGetters';
 import useOnGetState from './useOnGetState';
@@ -55,18 +56,28 @@ const isArrayEqual = (a: any[], b: any[]) =>
 *
 * @param children React Elements to extract the config from.
 */
-const getRouteConfigsFromChildren = <ScreenOptions extends object>(
+const getRouteConfigsFromChildren = <
+  State extends NavigationState,
+  ScreenOptions extends object,
+  EventMap extends EventMapBase
+>(
  children: React.ReactNode
 ) => {
  const configs = React.Children.toArray(children).reduce<
-    RouteConfig<ParamListBase, string, ScreenOptions>[]
+    RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>[]
  >((acc, child) => {
    if (React.isValidElement(child)) {
      if (child.type === Screen) {
        // We can only extract the config from `Screen` elements
        // If something else was rendered, it's probably a bug
        acc.push(
-          child.props as RouteConfig<ParamListBase, string, ScreenOptions>
+          child.props as RouteConfig<
+            ParamListBase,
+            string,
+            State,
+            ScreenOptions,
+            EventMap
+          >
        );
        return acc;
      }
@@ -75,7 +86,9 @@ const getRouteConfigsFromChildren = <ScreenOptions extends object>(
        // When we encounter a fragment, we need to dive into its children to extract the configs
        // This is handy to conditionally define a group of screens
        acc.push(
-          ...getRouteConfigsFromChildren<ScreenOptions>(child.props.children)
+          ...getRouteConfigsFromChildren<State, ScreenOptions, EventMap>(
+            child.props.children
+          )
        );
        return acc;
      }
@@ -116,7 +129,7 @@ const getRouteConfigsFromChildren = <ScreenOptions extends object>(

        if (component !== undefined && !isValidElementType(component)) {
          throw new Error(
-            `Got an invalid value for 'component' prop for the screen '${name}'. It must be a a valid React Component.`
+            `Got an invalid value for 'component' prop for the screen '${name}'. It must be a valid React Component.`
          );
        }

@@ -177,9 +190,17 @@ export default function useNavigationBuilder<
    })
  );

-  const routeConfigs = getRouteConfigsFromChildren<ScreenOptions>(children);
+  const routeConfigs = getRouteConfigsFromChildren<
+    State,
+    ScreenOptions,
+    EventMap
+  >(children);
+
  const screens = routeConfigs.reduce<
-    Record<string, RouteConfig<ParamListBase, string, ScreenOptions>>
+    Record<
+      string,
+      RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>
+    >
  >((acc, config) => {
    if (config.name in acc) {
      throw new Error(
@@ -312,12 +333,14 @@ export default function useNavigationBuilder<
        : state;
  }

-  if (state !== nextState) {
-    // If the state needs to be updated, we'll schedule an update with React
-    // setState in render seems hacky, but that's how React docs implement getDerivedPropsFromState
-    // https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-getderivedstatefromprops
-    setState(nextState);
-  }
+  const shouldUpdate = state !== nextState;
+
+  React.useEffect(() => {
+    if (shouldUpdate) {
+      // If the state needs to be updated, we'll schedule an update with React
+      setState(nextState);
+    }
+  }, [nextState, setState, shouldUpdate]);

  // The up-to-date state will come in next render, but we don't need to wait for it
  // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
@@ -344,7 +367,35 @@ export default function useNavigationBuilder<
      : (initializedStateRef.current as State);
  }, [getCurrentState, isStateInitialized]);

-  const emitter = useEventEmitter();
+  const emitter = useEventEmitter(e => {
+    let routeNames = [];
+
+    if (e.target) {
+      const name = state.routes.find(route => route.key === e.target)?.name;
+
+      if (name) {
+        routeNames.push(name);
+      }
+    } else {
+      routeNames.push(...Object.keys(screens));
+    }
+
+    const listeners = ([] as (((e: any) => void) | undefined)[])
+      .concat(
+        ...routeNames.map(name => {
+          const { listeners } = screens[name];
+
+          return listeners
+            ? Object.keys(listeners)
+                .filter(type => type === e.type)
+                .map(type => listeners[type])
+            : undefined;
+        })
+      )
+      .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
+
+    listeners.forEach(listener => listener?.(e));
+  });

  useFocusEvents({ state, emitter });

@@ -400,7 +451,7 @@ export default function useNavigationBuilder<
    getStateForRoute,
  });

-  const descriptors = useDescriptors<State, ScreenOptions>({
+  const descriptors = useDescriptors<State, ScreenOptions, EventMap>({
    state,
    screens,
    navigation,
--- a/packages/core/src/useNavigationHelpers.tsx
+++ b/packages/core/src/useNavigationHelpers.tsx
@@ -36,18 +36,45 @@ export default function useNavigationHelpers<
  const parentNavigationHelpers = React.useContext(NavigationContext);

  return React.useMemo(() => {
-    const dispatch = (action: Action | ((state: State) => Action)) => {
-      const payload =
-        typeof action === 'function' ? action(getState()) : action;
+    const dispatch = (op: Action | ((state: State) => Action)) => {
+      const action = typeof op === 'function' ? op(getState()) : op;

-      const handled = onAction(payload);
+      const handled = onAction(action);

      if (!handled && process.env.NODE_ENV !== 'production') {
-        console.error(
-          `The action '${payload.type}' with payload '${JSON.stringify(
-            payload.payload
-          )}' was not handled by any navigator. If you are trying to navigate to a screen, check if the screen exists in your navigator. If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/en/nesting-navigators.html#navigating-to-a-screen-in-a-nested-navigator.`
-        );
+        const payload: Record<string, any> | undefined = action.payload;
+
+        let message = `The action '${action.type}'${
+          payload ? ` with payload ${JSON.stringify(action.payload)}` : ''
+        } was not handled by any navigator.`;
+
+        switch (action.type) {
+          case 'NAVIGATE':
+          case 'PUSH':
+          case 'REPLACE':
+          case 'JUMP_TO':
+            if (payload?.name) {
+              message += `\n\nDo you have a screen named '${payload.name}'?\n\nIf you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.`;
+            } else {
+              message += `\n\nYou need to pass the name of the screen to navigate to.\n\nSee https://reactnavigation.org/docs/navigation-actions for usage.`;
+            }
+
+            break;
+          case 'GO_BACK':
+          case 'POP':
+          case 'POP_TO_TOP':
+            message += `\n\nIs there any screen to go back to?`;
+            break;
+          case 'OPEN_DRAWER':
+          case 'CLOSE_DRAWER':
+          case 'TOGGLE_DRAWER':
+            message += `\n\nIs your screen inside a Drawer navigator?`;
+            break;
+        }
+
+        message += `\n\nThis is a development-only warning and won't be shown in production.`;
+
+        console.error(message);
      }
    };

--- a/packages/core/src/useRoute.tsx
+++ b/packages/core/src/useRoute.tsx
@@ -15,7 +15,7 @@ export default function useRoute<

  if (route === undefined) {
    throw new Error(
-      "We couldn't find a route object. Is your component inside a screen in a navigator?"
+      "Couldn't find a route object. Is your component inside a screen in a navigator?"
    );
  }

--- a/packages/drawer/CHANGELOG.md
+++ b/packages/drawer/CHANGELOG.md
@@ -3,6 +3,47 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.2.0...@react-navigation/drawer@5.3.0) (2020-03-17)
+
+
+### Features
+
+* add permanent drawer type ([#7818](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7818)) ([6a5d0a0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/6a5d0a035afae60d91aef78401ec8826295746fe))
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.1.1...@react-navigation/drawer@5.2.0) (2020-03-16)
+
+
+### Features
+
+* make useIsDrawerOpen workable inside drawer content ([#7746](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/7746)) ([cb46d0b](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/cb46d0bca4e17e847fff46ac94276213ac9697bf))
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.1.0...@react-navigation/drawer@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.0.7...@react-navigation/drawer@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/issues/6756)
+
+
+
+
+
 ## [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
--- a/packages/drawer/package.json
+++ b/packages/drawer/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/drawer",
  "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.0.7",
+  "version": "5.3.0",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -39,17 +39,17 @@
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.7",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.6",
+    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
-    "react-native-safe-area-context": "^0.7.2",
-    "react-native-screens": "^2.0.0-beta.2",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.3.0",
    "typescript": "^3.7.5"
  },
  "peerDependencies": {
@@ -59,7 +59,7 @@
    "react-native-gesture-handler": ">= 1.0.0",
    "react-native-reanimated": ">= 1.0.0",
    "react-native-safe-area-context": ">= 0.6.0",
-    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0"
+    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/drawer/src/navigators/createDrawerNavigator.tsx
+++ b/packages/drawer/src/navigators/createDrawerNavigator.tsx
@@ -49,6 +49,8 @@ function DrawerNavigator({
 }

 export default createNavigatorFactory<
+  DrawerNavigationState,
  DrawerNavigationOptions,
+  DrawerNavigationEventMap,
  typeof DrawerNavigator
 >(DrawerNavigator);
--- a/packages/drawer/src/types.tsx
+++ b/packages/drawer/src/types.tsx
@@ -7,6 +7,7 @@ import {
  Descriptor,
  NavigationHelpers,
  DrawerNavigationState,
+  DrawerActionHelpers,
 } from '@react-navigation/native';
 import { PanGestureHandler } from 'react-native-gesture-handler';

@@ -26,8 +27,9 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   * - `front`: Traditional drawer which covers the screen with a overlay behind it.
   * - `back`: The drawer is revealed behind the screen on swipe.
   * - `slide`: Both the screen and the drawer slide on swipe to reveal the drawer.
+   * - `permanent`: A permanent drawer is shown as a sidebar.
   */
-  drawerType?: 'front' | 'back' | 'slide';
+  drawerType?: 'front' | 'back' | 'slide' | 'permanent';
  /**
   * How far from the edge of the screen the swipe gesture should activate.
   */
@@ -190,22 +192,8 @@ export type DrawerNavigationProp<
  DrawerNavigationState,
  DrawerNavigationOptions,
  DrawerNavigationEventMap
-> & {
-  /**
-   * Open the drawer sidebar.
-   */
-  openDrawer(): void;
-
-  /**
-   * Close the drawer sidebar.
-   */
-  closeDrawer(): void;
-
-  /**
-   * Open the drawer sidebar if closed, or close if opened.
-   */
-  toggleDrawer(): void;
-};
+> &
+  DrawerActionHelpers<ParamList>;

 export type DrawerDescriptor = Descriptor<
  ParamListBase,
--- a/packages/drawer/src/utils/useIsDrawerOpen.tsx
+++ b/packages/drawer/src/utils/useIsDrawerOpen.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useNavigation, ParamListBase } from '@react-navigation/native';
 import { DrawerNavigationProp } from '../types';
+import DrawerOpenContext from '../views/DrawerOpenContext';

 /**
 * Hook to detect if the drawer is open in a parent navigator.
@@ -10,6 +11,8 @@ export default function useIsDrawerOpen() {

  let drawer = navigation as DrawerNavigationProp<ParamListBase>;

+  const drawerOpenContext = React.useContext(DrawerOpenContext);
+
  // The screen might be inside another navigator such as stack nested in drawer
  // We need to find the closest drawer navigator and add the listener there
  while (drawer && drawer.dangerouslyGetState().type !== 'drawer') {
@@ -34,5 +37,9 @@ export default function useIsDrawerOpen() {
    return unsubscribe;
  }, [drawer, isDrawerOpen]);

+  if (drawerOpenContext !== null) {
+    return drawerOpenContext;
+  }
+
  return isDrawerOpen;
 }
--- a/packages/drawer/src/views/Drawer.tsx
+++ b/packages/drawer/src/views/Drawer.tsx
@@ -18,6 +18,7 @@ import {
 } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import Overlay from './Overlay';
+import DrawerOpenContext from './DrawerOpenContext';

 const {
  Clock,
@@ -68,6 +69,8 @@ const SPRING_CONFIG = {
  restSpeedThreshold: 0.01,
 };

+const ANIMATED_ONE = new Animated.Value(1);
+
 type Binary = 0 | 1;

 type Renderer = (props: { progress: Animated.Node<number> }) => React.ReactNode;
@@ -79,7 +82,7 @@ type Props = {
  onGestureRef?: (ref: PanGestureHandler | null) => void;
  gestureEnabled: boolean;
  drawerPosition: 'left' | 'right';
-  drawerType: 'front' | 'back' | 'slide';
+  drawerType: 'front' | 'back' | 'slide' | 'permanent';
  keyboardDismissMode: 'none' | 'on-drag';
  swipeEdgeWidth: number;
  swipeDistanceThreshold?: number;
@@ -544,6 +547,7 @@ export default class DrawerView extends React.PureComponent<Props> {
      gestureHandlerProps,
    } = this.props;

+    const isOpen = drawerType === 'permanent' ? true : open;
    const isRight = drawerPosition === 'right';

    const contentTranslateX = drawerType === 'front' ? 0 : this.translateX;
@@ -569,8 +573,10 @@ export default class DrawerView extends React.PureComponent<Props> {
    const hitSlop = isRight
      ? // Extend hitSlop to the side of the screen when drawer is closed
        // This lets the user drag the drawer from the side of the screen
-        { right: 0, width: open ? undefined : swipeEdgeWidth }
-      : { left: 0, width: open ? undefined : swipeEdgeWidth };
+        { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
+      : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
+
+    const progress = drawerType === 'permanent' ? ANIMATED_ONE : this.progress;

    return (
      <PanGestureHandler
@@ -580,62 +586,84 @@ export default class DrawerView extends React.PureComponent<Props> {
        onGestureEvent={this.handleGestureEvent}
        onHandlerStateChange={this.handleGestureStateChange}
        hitSlop={hitSlop}
-        enabled={gestureEnabled}
+        enabled={drawerType !== 'permanent' && gestureEnabled}
        {...gestureHandlerProps}
      >
        <Animated.View
          onLayout={this.handleContainerLayout}
-          style={styles.main}
+          style={[
+            styles.main,
+            drawerType === 'permanent' && {
+              flexDirection: 'row-reverse',
+            },
+          ]}
        >
          <Animated.View
            style={[
              styles.content,
-              {
+              drawerType !== 'permanent' && {
                transform: [{ translateX: contentTranslateX }],
              },
              sceneContainerStyle as any,
            ]}
          >
            <View
-              accessibilityElementsHidden={open}
-              importantForAccessibility={open ? 'no-hide-descendants' : 'auto'}
+              accessibilityElementsHidden={isOpen}
+              importantForAccessibility={
+                isOpen ? 'no-hide-descendants' : 'auto'
+              }
              style={styles.content}
            >
-              {renderSceneContent({ progress: this.progress })}
+              {renderSceneContent({ progress })}
            </View>
-            <TapGestureHandler
-              enabled={gestureEnabled}
-              onHandlerStateChange={this.handleTapStateChange}
-            >
-              <Overlay progress={this.progress} style={overlayStyle} />
-            </TapGestureHandler>
+            {// Disable overlay if sidebar is permanent
+            drawerType === 'permanent' ? null : (
+              <TapGestureHandler
+                enabled={gestureEnabled}
+                onHandlerStateChange={this.handleTapStateChange}
+              >
+                <Overlay progress={progress} style={overlayStyle} />
+              </TapGestureHandler>
+            )}
          </Animated.View>
-          <Animated.Code
-            exec={block([
-              onChange(this.manuallyTriggerSpring, [
-                cond(eq(this.manuallyTriggerSpring, TRUE), [
-                  set(this.nextIsOpen, FALSE),
-                  call([], () => (this.currentOpenValue = false)),
+          {drawerType === 'permanent' ? null : (
+            <Animated.Code
+              exec={block([
+                onChange(this.manuallyTriggerSpring, [
+                  cond(eq(this.manuallyTriggerSpring, TRUE), [
+                    set(this.nextIsOpen, FALSE),
+                    call([], () => (this.currentOpenValue = false)),
+                  ]),
                ]),
-              ]),
-            ])}
-          />
+              ])}
+            />
+          )}
          <Animated.View
-            accessibilityViewIsModal={open}
+            accessibilityViewIsModal={isOpen}
            removeClippedSubviews={Platform.OS !== 'ios'}
            onLayout={this.handleDrawerLayout}
            style={[
              styles.container,
-              isRight ? { right: offset } : { left: offset },
-              {
-                transform: [{ translateX: drawerTranslateX }],
-                opacity: this.drawerOpacity,
-                zIndex: drawerType === 'back' ? -1 : 0,
-              },
+              drawerType === 'permanent'
+                ? // Without this, the `left`/`right` values don't get reset
+                  isRight
+                  ? { right: 0 }
+                  : { left: 0 }
+                : [
+                    styles.nonPermanent,
+                    {
+                      transform: [{ translateX: drawerTranslateX }],
+                      opacity: this.drawerOpacity,
+                    },
+                    isRight ? { right: offset } : { left: offset },
+                    { zIndex: drawerType === 'back' ? -1 : 0 },
+                  ],
              drawerStyle as any,
            ]}
          >
-            {renderDrawerContent({ progress: this.progress })}
+            <DrawerOpenContext.Provider value={isOpen}>
+              {renderDrawerContent({ progress })}
+            </DrawerOpenContext.Provider>
          </Animated.View>
        </Animated.View>
      </PanGestureHandler>
@@ -646,11 +674,13 @@ export default class DrawerView extends React.PureComponent<Props> {
 const styles = StyleSheet.create({
  container: {
    backgroundColor: 'white',
+    maxWidth: '100%',
+  },
+  nonPermanent: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: '80%',
-    maxWidth: '100%',
  },
  content: {
    flex: 1,
--- a/packages/drawer/src/views/DrawerOpenContext.tsx
+++ b/packages/drawer/src/views/DrawerOpenContext.tsx
@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const DrawerOpenContext = React.createContext<boolean | null>(null);
+
+export default DrawerOpenContext;
--- a/packages/drawer/src/views/DrawerView.tsx
+++ b/packages/drawer/src/views/DrawerView.tsx
@@ -221,6 +221,10 @@ export default function DrawerView({
            ]}
            drawerStyle={[
              { width: drawerWidth, backgroundColor: colors.card },
+              drawerType === 'permanent' && {
+                borderRightColor: colors.border,
+                borderRightWidth: StyleSheet.hairlineWidth,
+              },
              drawerStyle,
            ]}
            overlayStyle={{ backgroundColor: overlayColor }}
--- a/packages/material-bottom-tabs/CHANGELOG.md
+++ b/packages/material-bottom-tabs/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.2...@react-navigation/material-bottom-tabs@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.1...@react-navigation/material-bottom-tabs@5.1.2) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.1.0...@react-navigation/material-bottom-tabs@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/compare/@react-navigation/material-bottom-tabs@5.0.7...@react-navigation/material-bottom-tabs@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/material-bottom-tabs/issues/6756)
+
+
+
+
+
 ## [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
--- a/packages/material-bottom-tabs/package.json
+++ b/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.7",
+  "version": "5.1.3",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -35,10 +35,10 @@
    "clean": "del lib"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.7",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "@types/react-native-vector-icons": "^6.4.5",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
--- a/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx
+++ b/packages/material-bottom-tabs/src/navigators/createMaterialBottomTabNavigator.tsx
@@ -49,6 +49,8 @@ function MaterialBottomTabNavigator({
 }

 export default createNavigatorFactory<
+  TabNavigationState,
  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap,
  typeof MaterialBottomTabNavigator
 >(MaterialBottomTabNavigator);
--- a/packages/material-bottom-tabs/src/types.tsx
+++ b/packages/material-bottom-tabs/src/types.tsx
@@ -5,6 +5,7 @@ import {
  NavigationProp,
  NavigationHelpers,
  TabNavigationState,
+  TabActionHelpers,
 } from '@react-navigation/native';

 export type MaterialBottomTabNavigationEventMap = {
@@ -28,19 +29,8 @@ export type MaterialBottomTabNavigationProp<
  TabNavigationState,
  MaterialBottomTabNavigationOptions,
  MaterialBottomTabNavigationEventMap
-> & {
-  /**
-   * Jump to an existing tab.
-   *
-   * @param name Name of the route for the tab.
-   * @param [params] Params object for the route.
-   */
-  jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends undefined | any
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-};
+> &
+  TabActionHelpers<ParamList>;

 export type MaterialBottomTabNavigationOptions = {
  /**
--- a/packages/material-top-tabs/CHANGELOG.md
+++ b/packages/material-top-tabs/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.1.3](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.2...@react-navigation/material-top-tabs@5.1.3) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.2](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.1...@react-navigation/material-top-tabs@5.1.2) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.1.0...@react-navigation/material-top-tabs@5.1.1) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/material-top-tabs
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/compare/@react-navigation/material-top-tabs@5.0.7...@react-navigation/material-top-tabs@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/material-top-tabs/issues/6756)
+
+
+
+
+
 ## [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
--- a/packages/material-top-tabs/package.json
+++ b/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.7",
+  "version": "5.1.3",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -38,14 +38,14 @@
    "color": "^3.1.2"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-navigation/native": "^5.0.7",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.6",
+    "react-native-gesture-handler": "^1.6.0",
    "react-native-reanimated": "^1.7.0",
    "react-native-tab-view": "^2.13.0",
    "typescript": "^3.7.5"
--- a/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx
+++ b/packages/material-top-tabs/src/navigators/createMaterialTopTabNavigator.tsx
@@ -48,6 +48,8 @@ function MaterialTopTabNavigator({
 }

 export default createNavigatorFactory<
+  TabNavigationState,
  MaterialTopTabNavigationOptions,
+  MaterialTopTabNavigationEventMap,
  typeof MaterialTopTabNavigator
 >(MaterialTopTabNavigator);
--- a/packages/material-top-tabs/src/types.tsx
+++ b/packages/material-top-tabs/src/types.tsx
@@ -7,6 +7,7 @@ import {
  Route,
  NavigationProp,
  TabNavigationState,
+  TabActionHelpers,
 } from '@react-navigation/native';

 export type MaterialTopTabNavigationEventMap = {
@@ -42,19 +43,8 @@ export type MaterialTopTabNavigationProp<
  TabNavigationState,
  MaterialTopTabNavigationOptions,
  MaterialTopTabNavigationEventMap
-> & {
-  /**
-   * Jump to an existing tab.
-   *
-   * @param name Name of the route for the tab.
-   * @param [params] Params object for the route.
-   */
-  jumpTo<RouteName extends Extract<keyof ParamList, string>>(
-    ...args: ParamList[RouteName] extends undefined | any
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-};
+> &
+  TabActionHelpers<ParamList>;

 export type MaterialTopTabNavigationOptions = {
  /**
--- a/packages/native/CHANGELOG.md
+++ b/packages/native/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.10...@react-navigation/native@5.1.0) (2020-03-17)
+
+
+### Features
+
+* add permanent drawer type ([#7818](https://github.com/react-navigation/react-navigation/tree/master/packages/native/issues/7818)) ([6a5d0a0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/6a5d0a035afae60d91aef78401ec8826295746fe))
+
+
+
+
+
+## [5.0.10](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.9...@react-navigation/native@5.0.10) (2020-03-16)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.0.9](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.8...@react-navigation/native@5.0.9) (2020-03-03)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
+## [5.0.8](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.0.7...@react-navigation/native@5.0.8) (2020-02-26)
+
+**Note:** Version bump only for package @react-navigation/native
+
+
+
+
+
 ## [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
--- a/packages/native/package.json
+++ b/packages/native/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/native",
  "description": "React Native integration for React Navigation",
-  "version": "5.0.7",
+  "version": "5.1.0",
  "keywords": [
    "react-native",
    "react-navigation",
@@ -31,12 +31,12 @@
    "clean": "del lib"
  },
  "dependencies": {
-    "@react-navigation/core": "^5.1.6"
+    "@react-navigation/core": "^5.2.2"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@react-native-community/bob": "^0.10.0",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
--- a/packages/native/src/theming/DefaultTheme.tsx
+++ b/packages/native/src/theming/DefaultTheme.tsx
@@ -7,7 +7,7 @@ const DefaultTheme: Theme = {
    background: 'rgb(242, 242, 242)',
    card: 'rgb(255, 255, 255)',
    text: 'rgb(28, 28, 30)',
-    border: 'rgb(199, 199, 204)',
+    border: 'rgb(224, 224, 224)',
  },
 };

--- a/packages/native/src/useScrollToTop.tsx
+++ b/packages/native/src/useScrollToTop.tsx
@@ -6,11 +6,11 @@ type ScrollOptions = { y?: number; animated?: boolean };
 type ScrollableView =
  | { scrollToTop(): void }
  | { scrollTo(options: ScrollOptions): void }
-  | { scrollToOffset(options: ScrollOptions): void }
+  | { scrollToOffset(options: { offset?: number; animated?: boolean }): void }
  | { scrollResponderScrollTo(options: ScrollOptions): void };

 type ScrollableWrapper =
-  | { getScrollResponder(): ScrollableView }
+  | { getScrollResponder(): React.ReactNode }
  | { getNode(): ScrollableView }
  | ScrollableView;

@@ -79,7 +79,7 @@ export default function useScrollToTop(
        // Run the operation in the next frame so we're sure all listeners have been run
        // This is necessary to know if preventDefault() has been called
        requestAnimationFrame(() => {
-          const scrollable = getScrollableNode(ref);
+          const scrollable = getScrollableNode(ref) as ScrollableWrapper;

          if (isFocused && isFirst && scrollable && !e.defaultPrevented) {
            if ('scrollToTop' in scrollable) {
@@ -87,7 +87,7 @@ export default function useScrollToTop(
            } else if ('scrollTo' in scrollable) {
              scrollable.scrollTo({ y: 0, animated: true });
            } else if ('scrollToOffset' in scrollable) {
-              scrollable.scrollToOffset({ y: 0, animated: true });
+              scrollable.scrollToOffset({ offset: 0, animated: true });
            } else if ('scrollResponderScrollTo' in scrollable) {
              scrollable.scrollResponderScrollTo({ y: 0, animated: true });
            }
--- a/packages/routers/CHANGELOG.md
+++ b/packages/routers/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.1.0...@react-navigation/routers@5.1.1) (2020-03-16)
+
+
+### Bug Fixes
+
+* don't handle action if no routes are present ([660cac3](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/commit/660cac3557bce8978812ce2750e961e7ada92d13))
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.0.3...@react-navigation/routers@5.1.0) (2020-03-03)
+
+
+### Bug Fixes
+
+* fix links for documentation ([5bb0f40](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/commit/5bb0f405ceb5755d39a0b5b1f2e4ecee0da051bc))
+
+
+### Features
+
+* make reset bubble up ([09f6808](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/commit/09f6808d7d43c70b2c502151f9f20fad03972886))
+
+
+
+
+
+## [5.0.3](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.0.2...@react-navigation/routers@5.0.3) (2020-02-26)
+
+**Note:** Version bump only for package @react-navigation/routers
+
+
+
+
+
 ## [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)


--- a/packages/routers/package.json
+++ b/packages/routers/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@react-navigation/routers",
  "description": "Routers to help build custom navigators",
-  "version": "5.0.2",
+  "version": "5.1.1",
  "keywords": [
    "react",
    "react-native",
@@ -33,7 +33,7 @@
    "shortid": "^2.2.15"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
+    "@react-native-community/bob": "^0.10.0",
    "del-cli": "^3.0.0",
    "typescript": "^3.7.5"
  },
--- a/packages/routers/src/BaseRouter.tsx
+++ b/packages/routers/src/BaseRouter.tsx
@@ -29,8 +29,29 @@ const BaseRouter = {
        };
      }

-      case 'RESET':
-        return action.payload as PartialState<State>;
+      case 'RESET': {
+        const nextState = action.payload as State | PartialState<State>;
+
+        if (nextState.stale === false) {
+          if (
+            state.routeNames.length !== nextState.routeNames.length ||
+            nextState.routeNames.some(name => !state.routeNames.includes(name))
+          ) {
+            return null;
+          }
+        }
+
+        if (
+          nextState.routes.length === 0 ||
+          nextState.routes.some(
+            (route: { name: string }) => !state.routeNames.includes(route.name)
+          )
+        ) {
+          return null;
+        }
+
+        return nextState;
+      }

      default:
        return null;
--- a/packages/routers/src/CommonActions.tsx
+++ b/packages/routers/src/CommonActions.tsx
@@ -41,11 +41,11 @@ export function navigate(...args: any): Action {
  if (typeof args[0] === 'string') {
    return { type: 'NAVIGATE', payload: { name: args[0], params: args[1] } };
  } else {
-    const payload = args[0];
+    const payload = args[0] || {};

    if (!payload.hasOwnProperty('key') && !payload.hasOwnProperty('name')) {
      throw new Error(
-        '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.'
+        'You need to specify name or key when calling navigate with an object as the argument. See https://reactnavigation.org/docs/navigation-actions#navigate for usage.'
      );
    }

--- a/packages/routers/src/DrawerRouter.tsx
+++ b/packages/routers/src/DrawerRouter.tsx
@@ -1,10 +1,16 @@
 import shortid from 'shortid';
-import { PartialState, CommonNavigationAction, Router } from './types';
+import {
+  PartialState,
+  CommonNavigationAction,
+  Router,
+  ParamListBase,
+} from './types';
 import TabRouter, {
  TabActions,
  TabActionType,
  TabRouterOptions,
  TabNavigationState,
+  TabActionHelpers,
 } from './TabRouter';

 export type DrawerActionType =
@@ -31,6 +37,25 @@ export type DrawerNavigationState = Omit<
  history: ({ type: 'route'; key: string } | { type: 'drawer' })[];
 };

+export type DrawerActionHelpers<
+  ParamList extends ParamListBase
+> = TabActionHelpers<ParamList> & {
+  /**
+   * Open the drawer sidebar.
+   */
+  openDrawer(): void;
+
+  /**
+   * Close the drawer sidebar.
+   */
+  closeDrawer(): void;
+
+  /**
+   * Open the drawer sidebar if closed, or close if opened.
+   */
+  toggleDrawer(): void;
+};
+
 export const DrawerActions = {
  ...TabActions,
  openDrawer(): DrawerActionType {
--- a/packages/routers/src/StackRouter.tsx
+++ b/packages/routers/src/StackRouter.tsx
@@ -6,6 +6,7 @@ import {
  Router,
  DefaultRouterOptions,
  Route,
+  ParamListBase,
 } from './types';

 export type StackActionType =
@@ -42,6 +43,42 @@ export type StackNavigationState = NavigationState & {
  type: 'stack';
 };

+export type StackActionHelpers<ParamList extends ParamListBase> = {
+  /**
+   * Replace the current route with a new one.
+   *
+   * @param name Route name of the new route.
+   * @param [params] Params object for the new route.
+   */
+  replace<RouteName extends keyof ParamList>(
+    ...args: ParamList[RouteName] extends undefined
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
+      : [RouteName, ParamList[RouteName]]
+  ): void;
+
+  /**
+   * Push a new screen onto the stack.
+   *
+   * @param name Name of the route for the tab.
+   * @param [params] Params object for the route.
+   */
+  push<RouteName extends keyof ParamList>(
+    ...args: ParamList[RouteName] extends undefined | any
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
+      : [RouteName, ParamList[RouteName]]
+  ): void;
+
+  /**
+   * Pop a screen from the stack.
+   */
+  pop(count?: number): void;
+
+  /**
+   * Pop to the first route in the stack, dismissing all other screens.
+   */
+  popToTop(): void;
+};
+
 export const StackActions = {
  replace(name: string, params?: object): StackActionType {
    return { type: 'REPLACE', payload: { name, params } };
--- a/packages/routers/src/TabRouter.tsx
+++ b/packages/routers/src/TabRouter.tsx
@@ -7,6 +7,7 @@ import {
  Router,
  DefaultRouterOptions,
  Route,
+  ParamListBase,
 } from './types';

 export type TabActionType = {
@@ -33,6 +34,20 @@ export type TabNavigationState = Omit<NavigationState, 'history'> & {
  history: { type: 'route'; key: string }[];
 };

+export type TabActionHelpers<ParamList extends ParamListBase> = {
+  /**
+   * Jump to an existing tab.
+   *
+   * @param name Name of the route for the tab.
+   * @param [params] Params object for the route.
+   */
+  jumpTo<RouteName extends Extract<keyof ParamList, string>>(
+    ...args: ParamList[RouteName] extends undefined | any
+      ? [RouteName] | [RouteName, ParamList[RouteName]]
+      : [RouteName, ParamList[RouteName]]
+  ): void;
+};
+
 const TYPE_ROUTE = 'route' as const;

 export const TabActions = {
--- a/packages/routers/src/tests/BaseRouter.test.tsx
+++ b/packages/routers/src/tests/BaseRouter.test.tsx
@@ -83,3 +83,46 @@ it('resets state to new state with RESET', () => {

  expect(result).toEqual({ index: 0, routes });
 });
+
+it("doesn't handle RESET if routes don't match routeNames", () => {
+  const routes = [
+    { key: 'bar', name: 'bar', params: { fruit: 'orange' } },
+    { key: 'baz', name: 'baz' },
+    { key: 'qux', name: 'quz' },
+  ];
+
+  const result = BaseRouter.getStateForAction(
+    STATE,
+    CommonActions.reset({
+      index: 0,
+      routes,
+    })
+  );
+
+  expect(result).toEqual(null);
+});
+
+it("doesn't handle RESET if routeNames don't match", () => {
+  const result = BaseRouter.getStateForAction(
+    STATE,
+    CommonActions.reset({
+      ...STATE,
+      // @ts-ignore
+      routeNames: ['ten'],
+    })
+  );
+
+  expect(result).toEqual(null);
+});
+
+it("doesn't handle RESET if there are no routes", () => {
+  const result = BaseRouter.getStateForAction(
+    STATE,
+    CommonActions.reset({
+      index: 0,
+      routes: [],
+    })
+  );
+
+  expect(result).toEqual(null);
+});
--- a/packages/routers/src/index.tsx
+++ b/packages/routers/src/index.tsx
@@ -7,6 +7,7 @@ export { default as BaseRouter } from './BaseRouter';
 export {
  default as StackRouter,
  StackActions,
+  StackActionHelpers,
  StackActionType,
  StackRouterOptions,
  StackNavigationState,
@@ -15,6 +16,7 @@ export {
 export {
  default as TabRouter,
  TabActions,
+  TabActionHelpers,
  TabActionType,
  TabRouterOptions,
  TabNavigationState,
@@ -23,6 +25,7 @@ export {
 export {
  default as DrawerRouter,
  DrawerActions,
+  DrawerActionHelpers,
  DrawerActionType,
  DrawerRouterOptions,
  DrawerNavigationState,
--- a/packages/stack/CHANGELOG.md
+++ b/packages/stack/CHANGELOG.md
@@ -3,6 +3,75 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [5.2.1](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.0...@react-navigation/stack@5.2.1) (2020-03-17)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.1.1...@react-navigation/stack@5.2.0) (2020-03-16)
+
+
+### Bug Fixes
+
+* fix android header title font weight ([#7720](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7720)) ([0dcaea3](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/0dcaea32428484cdc9b4d56f7bf38f9f1bdf1dee))
+* fix back gesture cancellation ([#7700](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7700)) ([469d054](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/469d0542c7341dc524a597d70216ba743602a51e)), closes [#6782](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6782)
+
+
+### Features
+
+* add an option to change use a custom card overlay ([#7809](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7809)) ([70029d6](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/70029d6c130f0f47de94b6a6c4cbee6afa12b405))
+
+
+
+
+
+## [5.1.1](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.1.0...@react-navigation/stack@5.1.1) (2020-03-03)
+
+
+### Bug Fixes
+
+* ignore back button press if screen isn't focused. closes [#7673](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/7673) ([296c836](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/296c836064447e055a88e43cfbbf5f9de93838f0))
+
+
+
+
+
+# [5.1.0](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.0.9...@react-navigation/stack@5.1.0) (2020-02-26)
+
+
+### Features
+
+* add ability add listeners with listeners prop ([1624108](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/162410843c4f175ae107756de1c3af04d1d47aa7)), closes [#6756](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/issues/6756)
+
+
+
+
+
+## [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)


--- a/packages/stack/package.json
+++ b/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.7",
+  "version": "5.2.1",
  "keywords": [
    "react-native-component",
    "react-component",
@@ -38,18 +38,18 @@
    "react-native-iphone-x-helper": "^1.2.1"
  },
  "devDependencies": {
-    "@react-native-community/bob": "^0.9.3",
-    "@react-native-community/masked-view": "^0.1.6",
-    "@react-navigation/native": "^5.0.7",
+    "@react-native-community/bob": "^0.10.0",
+    "@react-native-community/masked-view": "^0.1.7",
+    "@react-navigation/native": "^5.1.0",
    "@types/color": "^3.0.1",
-    "@types/react": "^16.9.19",
-    "@types/react-native": "^0.60.30",
+    "@types/react": "^16.9.23",
+    "@types/react-native": "^0.61.22",
    "del-cli": "^3.0.0",
    "react": "~16.9.0",
    "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.6",
-    "react-native-safe-area-context": "^0.7.2",
-    "react-native-screens": "^2.0.0-beta.2",
+    "react-native-gesture-handler": "^1.6.0",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.3.0",
    "typescript": "^3.7.5"
  },
  "peerDependencies": {
@@ -59,7 +59,7 @@
    "react-native": "*",
    "react-native-gesture-handler": ">= 1.0.0",
    "react-native-safe-area-context": ">= 0.6.0",
-    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0"
+    "react-native-screens": ">= 2.0.0-alpha.0 || >= 2.0.0-beta.0 || >= 2.0.0"
  },
  "@react-native-community/bob": {
    "source": "src",
--- a/packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
+++ b/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;

--- a/packages/stack/src/navigators/createStackNavigator.tsx
+++ b/packages/stack/src/navigators/createStackNavigator.tsx
@@ -74,6 +74,8 @@ function StackNavigator({
 }

 export default createNavigatorFactory<
+  StackNavigationState,
  StackNavigationOptions,
+  StackNavigationEventMap,
  typeof StackNavigator
 >(StackNavigator);
--- a/packages/stack/src/types.tsx
+++ b/packages/stack/src/types.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
  Animated,
  StyleProp,
@@ -13,6 +14,7 @@ import {
  Route,
  NavigationHelpers,
  StackNavigationState,
+  StackActionHelpers,
 } from '@react-navigation/native';

 export type StackNavigationEventMap = {
@@ -40,29 +42,8 @@ export type StackNavigationProp<
  StackNavigationState,
  StackNavigationOptions,
  StackNavigationEventMap
-> & {
-  /**
-   * Push a new screen onto the stack.
-   *
-   * @param name Name of the route for the tab.
-   * @param [params] Params object for the route.
-   */
-  push<RouteName extends keyof ParamList>(
-    ...args: ParamList[RouteName] extends undefined | any
-      ? [RouteName] | [RouteName, ParamList[RouteName]]
-      : [RouteName, ParamList[RouteName]]
-  ): void;
-
-  /**
-   * Pop a screen from the stack.
-   */
-  pop(count?: number): void;
-
-  /**
-   * Pop to the first route in the stack, dismissing all other screens.
-   */
-  popToTop(): void;
-};
+> &
+  StackActionHelpers<ParamList>;

 export type Layout = { width: number; height: number };

@@ -122,7 +103,7 @@ export type StackHeaderOptions = {
  /**
   * Style object for the title component.
   */
-  headerTitleStyle?: StyleProp<TextStyle>;
+  headerTitleStyle?: React.ComponentProps<typeof Animated.Text>['style'];
  /**
   * Style object for the container of the `headerTitle` component, for example to add padding.
   * By default, `headerTitleContainerStyle` is with an absolute position style and offsets both `left` and `right`.
@@ -279,6 +260,10 @@ export type StackNavigationOptions = StackHeaderOptions &
     * Defaults to `true` on Android and `false` on iOS.
     */
    cardOverlayEnabled?: boolean;
+    /**
+     * Function that returns a React Element to display as a overlay for the card.
+     */
+    cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
    /**
     * Style object for the card in stack.
     * You can provide a custom background color to use instead of the default background here.
@@ -430,7 +415,7 @@ export type StackHeaderTitleProps = {
  /**
   * Style object for the title element.
   */
-  style?: StyleProp<TextStyle>;
+  style?: React.ComponentProps<typeof Animated.Text>['style'];
 };

 export type TransitionSpec =
--- a/packages/stack/src/views/BorderlessButton.tsx
+++ b/packages/stack/src/views/BorderlessButton.tsx
@@ -32,13 +32,14 @@ export default class BorderlessButton extends React.Component<Props> {
      }).start();
    }

-    this.props.onActiveStateChange && this.props.onActiveStateChange(active);
+    this.props.onActiveStateChange?.(active);
  };

  render() {
    const { children, style, enabled, ...rest } = this.props;

    return (
+      // @ts-ignore
      <AnimatedBaseButton
        {...rest}
        onActiveStateChange={this.handleActiveStateChange}
--- a/packages/stack/src/views/Header/Header.tsx
+++ b/packages/stack/src/views/Header/Header.tsx
@@ -43,7 +43,7 @@ export default React.memo(function Header(props: StackHeaderProps) {

  const goBack = React.useCallback(
    debounce(() => {
-      if (navigation.canGoBack()) {
+      if (navigation.isFocused() && navigation.canGoBack()) {
        navigation.dispatch({
          ...StackActions.pop(),
          source: scene.route.key,
--- a/packages/stack/src/views/Header/HeaderContainer.tsx
+++ b/packages/stack/src/views/Header/HeaderContainer.tsx
@@ -139,7 +139,7 @@ export default function HeaderContainer({
                style={
                  // Avoid positioning the focused header absolutely
                  // Otherwise accessibility tools don't seem to be able to find it
-                  (mode === 'float' || options.headerTransparent) && !isFocused
+                  (mode === 'float' && !isFocused) || options.headerTransparent
                    ? styles.header
                    : null
                }
--- a/packages/stack/src/views/Header/HeaderTitle.tsx
+++ b/packages/stack/src/views/Header/HeaderTitle.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { Animated, StyleSheet, Platform, TextProps } from 'react-native';
+import { Animated, StyleSheet, Platform } from 'react-native';
 import { useTheme } from '@react-navigation/native';

-type Props = TextProps & {
+type Props = React.ComponentProps<typeof Animated.Text> & {
  tintColor?: string;
  children?: string;
 };
@@ -32,7 +32,8 @@ const styles = StyleSheet.create({
    },
    android: {
      fontSize: 20,
-      fontWeight: '500',
+      fontFamily: 'sans-serif-medium',
+      fontWeight: 'normal',
    },
    default: {
      fontSize: 18,
--- a/packages/stack/src/views/Stack/Card.tsx
+++ b/packages/stack/src/views/Stack/Card.tsx
@@ -44,6 +44,7 @@ type Props = ViewProps & {
  onGestureCanceled?: () => void;
  onGestureEnd?: () => void;
  children: React.ReactNode;
+  overlay: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
  overlayEnabled: boolean;
  shadowEnabled: boolean;
  gestureEnabled: boolean;
@@ -80,6 +81,10 @@ export default class Card extends React.Component<Props> {
    shadowEnabled: true,
    gestureEnabled: true,
    gestureVelocityImpact: GESTURE_VELOCITY_IMPACT,
+    overlay: ({ style }: { style: StyleProp<ViewStyle> }) =>
+      style ? (
+        <Animated.View pointerEvents="none" style={[styles.overlay, style]} />
+      ) : null,
  };

  componentDidMount() {
@@ -267,8 +272,7 @@ export default class Card extends React.Component<Props> {
        }

        const closing =
-          Math.abs(translation + velocity * gestureVelocityImpact) >
-          distance / 2
+          translation + velocity * gestureVelocityImpact > distance / 2
            ? velocity !== 0 || translation !== 0
            : false;

@@ -409,6 +413,7 @@ export default class Card extends React.Component<Props> {
      next,
      layout,
      insets,
+      overlay,
      overlayEnabled,
      shadowEnabled,
      gestureEnabled,
@@ -470,55 +475,54 @@ export default class Card extends React.Component<Props> {
      : false;

    return (
-      <View pointerEvents="box-none" {...rest}>
-        {overlayEnabled && overlayStyle ? (
+      <CardAnimationContext.Provider value={animationContext}>
+        <View pointerEvents="box-none" {...rest}>
+          {overlayEnabled ? (
+            <View style={StyleSheet.absoluteFill}>
+              {overlay({ style: overlayStyle })}
+            </View>
+          ) : null}
          <Animated.View
-            pointerEvents="none"
-            style={[styles.overlay, overlayStyle]}
-          />
-        ) : null}
-        <Animated.View
-          style={[styles.container, containerStyle, customContainerStyle]}
-          pointerEvents="box-none"
-        >
-          <PanGestureHandler
-            ref={this.gestureRef}
-            enabled={layout.width !== 0 && gestureEnabled}
-            onGestureEvent={handleGestureEvent}
-            onHandlerStateChange={this.handleGestureStateChange}
-            {...this.gestureActivationCriteria()}
+            style={[styles.container, containerStyle, customContainerStyle]}
+            pointerEvents="box-none"
          >
-            <Animated.View style={[styles.container, cardStyle]}>
-              {shadowEnabled && shadowStyle && !isTransparent ? (
-                <Animated.View
-                  style={[
-                    styles.shadow,
-                    gestureDirection === 'horizontal'
-                      ? [styles.shadowHorizontal, styles.shadowLeft]
-                      : gestureDirection === 'horizontal-inverted'
-                      ? [styles.shadowHorizontal, styles.shadowRight]
-                      : gestureDirection === 'vertical'
-                      ? [styles.shadowVertical, styles.shadowTop]
-                      : [styles.shadowVertical, styles.shadowBottom],
-                    shadowStyle,
-                  ]}
-                  pointerEvents="none"
-                />
-              ) : null}
-              <View
-                ref={this.contentRef}
-                style={[styles.content, contentStyle]}
-              >
-                <StackGestureRefContext.Provider value={this.gestureRef}>
-                  <CardAnimationContext.Provider value={animationContext}>
+            <PanGestureHandler
+              ref={this.gestureRef}
+              enabled={layout.width !== 0 && gestureEnabled}
+              onGestureEvent={handleGestureEvent}
+              onHandlerStateChange={this.handleGestureStateChange}
+              {...this.gestureActivationCriteria()}
+            >
+              <Animated.View style={[styles.container, cardStyle]}>
+                {shadowEnabled && shadowStyle && !isTransparent ? (
+                  <Animated.View
+                    style={[
+                      styles.shadow,
+                      gestureDirection === 'horizontal'
+                        ? [styles.shadowHorizontal, styles.shadowLeft]
+                        : gestureDirection === 'horizontal-inverted'
+                        ? [styles.shadowHorizontal, styles.shadowRight]
+                        : gestureDirection === 'vertical'
+                        ? [styles.shadowVertical, styles.shadowTop]
+                        : [styles.shadowVertical, styles.shadowBottom],
+                      shadowStyle,
+                    ]}
+                    pointerEvents="none"
+                  />
+                ) : null}
+                <View
+                  ref={this.contentRef}
+                  style={[styles.content, contentStyle]}
+                >
+                  <StackGestureRefContext.Provider value={this.gestureRef}>
                    {children}
-                  </CardAnimationContext.Provider>
-                </StackGestureRefContext.Provider>
-              </View>
-            </Animated.View>
-          </PanGestureHandler>
-        </Animated.View>
-      </View>
+                  </StackGestureRefContext.Provider>
+                </View>
+              </Animated.View>
+            </PanGestureHandler>
+          </Animated.View>
+        </View>
+      </CardAnimationContext.Provider>
    );
  }
 }
@@ -532,7 +536,7 @@ const styles = StyleSheet.create({
    overflow: 'hidden',
  },
  overlay: {
-    ...StyleSheet.absoluteFillObject,
+    flex: 1,
    backgroundColor: '#000',
  },
  shadow: {
--- a/packages/stack/src/views/Stack/CardContainer.tsx
+++ b/packages/stack/src/views/Stack/CardContainer.tsx
@@ -19,6 +19,7 @@ type Props = TransitionPreset & {
  safeAreaInsetRight: number;
  safeAreaInsetBottom: number;
  safeAreaInsetLeft: number;
+  cardOverlay?: (props: { style: StyleProp<ViewStyle> }) => React.ReactNode;
  cardOverlayEnabled?: boolean;
  cardShadowEnabled?: boolean;
  cardStyle?: StyleProp<ViewStyle>;
@@ -58,6 +59,7 @@ const EPSILON = 0.1;

 function CardContainer({
  active,
+  cardOverlay,
  cardOverlayEnabled,
  cardShadowEnabled,
  cardStyle,
@@ -162,6 +164,7 @@ function CardContainer({
      closing={closing}
      onOpen={handleOpen}
      onClose={handleClose}
+      overlay={cardOverlay}
      overlayEnabled={cardOverlayEnabled}
      shadowEnabled={cardShadowEnabled}
      onTransitionStart={handleTransitionStart}
--- a/packages/stack/src/views/Stack/CardStack.tsx
+++ b/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,
@@ -493,6 +431,7 @@ export default class CardStack extends React.Component<Props, State> {
              headerTransparent,
              cardShadowEnabled,
              cardOverlayEnabled,
+              cardOverlay,
              cardStyle,
              animationEnabled,
              gestureResponseDistance,
@@ -590,6 +529,7 @@ export default class CardStack extends React.Component<Props, State> {
                  safeAreaInsetRight={safeAreaInsetRight}
                  safeAreaInsetBottom={safeAreaInsetBottom}
                  safeAreaInsetLeft={safeAreaInsetLeft}
+                  cardOverlay={cardOverlay}
                  cardOverlayEnabled={cardOverlayEnabled}
                  cardShadowEnabled={cardShadowEnabled}
                  cardStyle={cardStyle}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Satyajit Sahoo	358d9e9feb	chore: publish - @react-navigation/bottom-tabs@5.2.1 - @react-navigation/compat@5.1.3 - @react-navigation/drawer@5.3.0 - @react-navigation/material-bottom-tabs@5.1.3 - @react-navigation/material-top-tabs@5.1.3 - @react-navigation/native@5.1.0 - @react-navigation/stack@5.2.1	2020-03-17 14:37:21 +01:00
Satyajit Sahoo	6a5d0a035a	feat: add permanent drawer type (#7818 ) Co-authored-by: NoemiRozpara <nrozpara@gmail.com>	2020-03-17 14:11:00 +01:00
Satyajit Sahoo	b75744abd5	chore: publish - @react-navigation/bottom-tabs@5.2.0 - @react-navigation/compat@5.1.2 - @react-navigation/core@5.2.2 - @react-navigation/drawer@5.2.0 - @react-navigation/material-bottom-tabs@5.1.2 - @react-navigation/material-top-tabs@5.1.2 - @react-navigation/native@5.0.10 - @react-navigation/routers@5.1.1 - @react-navigation/stack@5.2.0	2020-03-16 14:29:25 +01:00
Satyajit Sahoo	6dbda1a0c2	chore: upgrade depenendecies	2020-03-16 14:28:10 +01:00
Michał Osadnik	70029d6c13	feat: add an option to change use a custom card overlay (#7809 ) I find it sometimes useful to define overlay renderer on my own. Eg. I needed to replace the background with BlurView and with this API I find it quite easy Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-03-16 14:28:10 +01:00
Tien Pham	469d0542c7	fix: fix back gesture cancellation (#7700 ) The problem here is that when we scroll back really fast, even though velocity is negative, `Math.abs(translation + velocity * gestureVelocityImpact)` will end up bigger than `distance / 2`. I removed the `Math.abs`, I think it's not necessary. When `translation + velocity * gestureVelocityImpact` is negative, it's also < `distance / 2` and we should just close the screen. Closes #6782	2020-03-16 12:03:16 +01:00
Vojtech Novak	0dcaea3242	fix: fix android header title font weight (#7720 ) the previously used fort weight of 500 would effectively be converted to `fontWeight: bold` because of https://github.com/facebook/react-native/pull/25341 this fixes the title appearance to look as customary	2020-03-16 11:05:02 +01:00
Satyajit Sahoo	646cbfb28e	refactor: move action helper types to routers	2020-03-13 12:34:37 +01:00
Satyajit Sahoo	660cac3557	fix: don't handle action if no routes are present	2020-03-11 18:17:19 +01:00
Satyajit Sahoo	e637250a7e	chore: add a triage action for feature requests	2020-03-11 03:19:49 +01:00
Satyajit Sahoo	82af7bed71	feat: add safeAreaInsets to bottom tabs	2020-03-09 22:21:04 +01:00
Michał Osadnik	cb46d0bca4	feat: make useIsDrawerOpen workable inside drawer content (#7746 )	2020-03-06 15:46:13 +01:00
Mike Rogers	b3665a325d	Correcting spelling 'Supress' > 'Suppress' (#7731 )	2020-03-06 07:24:43 -03:00
Satyajit Sahoo	0cc7a12b9c	chore: remove stale action coz it's not keeping issues open after reply	2020-03-04 13:53:42 +01:00
Satyajit Sahoo	90e417248d	chore: fix typo in expo preview url	2020-03-03 18:38:20 +01:00
Satyajit Sahoo	e071a978e6	chore: publish - @react-navigation/bottom-tabs@5.1.1 - @react-navigation/compat@5.1.1 - @react-navigation/core@5.2.1 - @react-navigation/drawer@5.1.1 - @react-navigation/material-bottom-tabs@5.1.1 - @react-navigation/material-top-tabs@5.1.1 - @react-navigation/native@5.0.9 - @react-navigation/routers@5.1.0 - @react-navigation/stack@5.1.1	2020-03-03 11:58:45 +01:00
Satyajit Sahoo	296c836064	fix: ignore back button press if screen isn't focused. closes #7673	2020-03-03 11:34:38 +01:00
Satyajit Sahoo	09f6808d7d	feat: make reset bubble up	2020-03-01 02:45:08 +01:00
Satyajit Sahoo	5bb0f405ce	fix: fix links for documentation	2020-02-28 17:12:18 +01:00
Satyajit Sahoo	2dfa4f3629	fix: move updating state to useEffect	2020-02-28 17:01:58 +01:00
Satyajit Sahoo	cf41288760	chore: run clean before release	2020-02-26 15:03:57 +01:00
Satyajit Sahoo	3677818f63	chore: publish - @react-navigation/bottom-tabs@5.1.0 - @react-navigation/compat@5.1.0 - @react-navigation/core@5.2.0 - @react-navigation/drawer@5.1.0 - @react-navigation/material-bottom-tabs@5.1.0 - @react-navigation/material-top-tabs@5.1.0 - @react-navigation/native@5.0.8 - @react-navigation/routers@5.0.3 - @react-navigation/stack@5.1.0	2020-02-26 13:57:42 +01:00
Satyajit Sahoo	162410843c	feat: add ability add listeners with listeners prop This adds ability to listen to events from the component where the navigator is defined, even if the screen is not rendered. ```js <Tabs.Screen name="Chat" component={Chat} options={{ title: 'Chat' }} listeners={{ tabPress: e => console.log('Tab press', e.target), }} /> ``` Closes #6756	2020-02-26 13:02:22 +01:00
Satyajit Sahoo	028c2887c6	refactor: tweak error messages more	2020-02-25 20:58:14 +01:00
Satyajit Sahoo	7a44cda136	refactor: tweak error messages	2020-02-25 17:58:09 +01:00
Satyajit Sahoo	a046db536f	chore: publish - @react-navigation/stack@5.0.9	2020-02-24 14:45:00 +01:00
Satyajit Sahoo	d115787b1c	chore: mark yarn script as binary	2020-02-24 14:44:29 +01:00
Michał Osadnik	80a337024a	fix: enhance border radius in modals on new iPhones (#6945 ) Co-authored-by: Satyajit Sahoo <satyajit.happy@gmail.com>	2020-02-24 14:44:20 +01:00
Satyajit Sahoo	c19da31240	refactor: enable screens only for last screen This will avoid issues such as https://github.com/react-navigation/react-navigation/issues/6909	2020-02-24 11:37:25 +01:00
Satyajit Sahoo	85e9376302	chore: publish - @react-navigation/stack@5.0.8	2020-02-21 20:09:06 +01:00
Satyajit Sahoo	a67b49477e	fix: fix transparent header on Android	2020-02-21 20:07:38 +01:00