chore: publish

- @react-navigation/bottom-tabs@5.0.0-alpha.32
 - @react-navigation/compat@5.0.0-alpha.21
 - @react-navigation/drawer@5.0.0-alpha.34
 - @react-navigation/material-bottom-tabs@5.0.0-alpha.29
 - @react-navigation/material-top-tabs@5.0.0-alpha.27
 - @react-navigation/native-stack@5.0.0-alpha.22
 - @react-navigation/routers@5.0.0-alpha.20
 - @react-navigation/stack@5.0.0-alpha.51

example/package.json

@@ -28,6 +28,7 @@
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "~1.5.0",
+    "react-native-iphone-x-helper": "^1.2.1",
     "react-native-paper": "^3.3.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.0",

example/webpack.config.js

@@ -4,6 +4,9 @@ const createExpoWebpackConfigAsync = require('@expo/webpack-config');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 
+const node_modules = path.resolve(__dirname, 'node_modules');
+const packages = path.resolve(__dirname, '..', 'packages');
+
 module.exports = async function(env, argv) {
   const config = await createExpoWebpackConfigAsync(env, argv);
 
@@ -19,28 +22,15 @@ module.exports = async function(env, argv) {
   );
 
   Object.assign(config.resolve.alias, {
-    react: path.resolve(__dirname, 'node_modules', 'react'),
+    react: path.resolve(node_modules, 'react'),
-    'react-native': path.resolve(__dirname, 'node_modules', 'react-native-web'),
+    'react-native': path.resolve(node_modules, 'react-native-web'),
-    'react-native-web': path.resolve(
+    'react-native-web': path.resolve(node_modules, 'react-native-web'),
-      __dirname,
+    '@expo/vector-icons': path.resolve(node_modules, '@expo/vector-icons'),
-      'node_modules',
-      'react-native-web'
-    ),
-    'react-native-reanimated': path.resolve(
-      __dirname,
-      'node_modules',
-      'react-native-reanimated-web'
-    ),
-    '@expo/vector-icons/MaterialCommunityIcons': require.resolve(
-      '@expo/vector-icons/MaterialCommunityIcons'
-    ),
   });
 
-  fs.readdirSync(path.join(__dirname, '..')).forEach(name => {
+  fs.readdirSync(packages).forEach(name => {
     config.resolve.alias[`@react-navigation/${name}`] = path.resolve(
-      __dirname,
+      packages,
-      '..',
-      'packages',
       name,
       'src'
     );

packages/bottom-tabs/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.31...@react-navigation/bottom-tabs@5.0.0-alpha.32) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
+# [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.30...@react-navigation/bottom-tabs@5.0.0-alpha.31) (2020-01-03)
+
+
+### Bug Fixes
+
+* provide initial values for safe area to prevent blank screen ([#238](https://github.com/react-navigation/navigation-ex/issues/238)) ([77b7570](https://github.com/react-navigation/navigation-ex/commit/77b757091c0451e20bca01138629669c7da544a8))
+
+
+
+
+
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.29...@react-navigation/bottom-tabs@5.0.0-alpha.30) (2020-01-03)
+
+**Note:** Version bump only for package @react-navigation/bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.28...@react-navigation/bottom-tabs@5.0.0-alpha.29) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -10,7 +10,7 @@
     "android",
     "tab"
   ],
-  "version": "5.0.0-alpha.29",
+  "version": "5.0.0-alpha.32",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,8 +33,9 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19",
+    "@react-navigation/routers": "^5.0.0-alpha.20",
-    "color": "^3.1.2"
+    "color": "^3.1.2",
+    "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",
@@ -51,7 +52,7 @@
     "@react-navigation/native": "^5.0.0-alpha.0",
     "react": "*",
     "react-native": "*",
-    "react-native-safe-area-context": "^0.3.6"
+    "react-native-safe-area-context": "^0.6.0"
   },
   "@react-native-community/bob": {
     "source": "src",

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

@@ -3,6 +3,17 @@ import {
   SafeAreaProvider,
   SafeAreaConsumer,
 } from 'react-native-safe-area-context';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+const initialSafeAreaInsets = {
+  top: getStatusBarHeight(true),
+  bottom: getBottomSpace(),
+  right: 0,
+  left: 0,
+};
 
 type Props = {
   children: React.ReactNode;
@@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
           return children;
         }
 
-        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+        return (
+          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+            {children}
+          </SafeAreaProvider>
+        );
       }}
     </SafeAreaConsumer>
   );

packages/compat/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.20...@react-navigation/compat@5.0.0-alpha.21) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/compat
+
+
+
+
+
 # [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.19...@react-navigation/compat@5.0.0-alpha.20) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/compat

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.0-alpha.20",
+  "version": "5.0.0-alpha.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19"
+    "@react-navigation/routers": "^5.0.0-alpha.20"
   },
   "devDependencies": {
     "@types/react": "^16.9.16",

packages/drawer/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.0.0-alpha.34](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.33...@react-navigation/drawer@5.0.0-alpha.34) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/drawer
+
+
+
+
+
+# [5.0.0-alpha.33](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.32...@react-navigation/drawer@5.0.0-alpha.33) (2020-01-03)
+
+
+### Bug Fixes
+
+* provide initial values for safe area to prevent blank screen ([#238](https://github.com/react-navigation/navigation-ex/issues/238)) ([77b7570](https://github.com/react-navigation/navigation-ex/commit/77b757091c0451e20bca01138629669c7da544a8))
+
+
+### Features
+
+* add interaction handle to drawer ([#239](https://github.com/react-navigation/navigation-ex/issues/239)) ([fa4411a](https://github.com/react-navigation/navigation-ex/commit/fa4411a14dc4aae568794e4b884088e3276a2876))
+
+
+
+
+
+# [5.0.0-alpha.32](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.31...@react-navigation/drawer@5.0.0-alpha.32) (2020-01-03)
+
+
+### Bug Fixes
+
+* pass backBehavior to the router in drawer. fixes [#230](https://github.com/react-navigation/navigation-ex/issues/230) ([3cd1aed](https://github.com/react-navigation/navigation-ex/commit/3cd1aedcf490a4c7962b2d36873d714637f3b9b0))
+
+
+
+
+
 # [5.0.0-alpha.31](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.30...@react-navigation/drawer@5.0.0-alpha.31) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.31",
+  "version": "5.0.0-alpha.34",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,8 +34,9 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19",
+    "@react-navigation/routers": "^5.0.0-alpha.20",
-    "color": "^3.1.2"
+    "color": "^3.1.2",
+    "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/drawer/src/navigators/createDrawerNavigator.tsx

@@ -23,6 +23,7 @@ type Props = DefaultNavigatorOptions<DrawerNavigationOptions> &
 
 function DrawerNavigator({
   initialRouteName,
+  backBehavior,
   children,
   screenOptions,
   ...rest
@@ -34,6 +35,7 @@ function DrawerNavigator({
     DrawerNavigationEventMap
   >(DrawerRouter, {
     initialRouteName,
+    backBehavior,
     children,
     screenOptions,
   });

packages/drawer/src/views/Drawer.tsx

@@ -9,6 +9,7 @@ import {
   StatusBar,
   StyleProp,
   View,
+  InteractionManager,
 } from 'react-native';
 import {
   PanGestureHandler,
@@ -161,9 +162,24 @@ export default class DrawerView extends React.PureComponent<Props> {
 
   componentWillUnmount() {
     this.toggleStatusBar(false);
+    this.handleEndInteraction();
   }
 
+  private handleEndInteraction = () => {
+    if (this.interactionHandle !== undefined) {
+      InteractionManager.clearInteractionHandle(this.interactionHandle);
+      this.interactionHandle = undefined;
+    }
+  };
+
+  private handleStartInteraction = () => {
+    if (this.interactionHandle === undefined) {
+      this.interactionHandle = InteractionManager.createInteractionHandle();
+    }
+  };
+
   private clock = new Clock();
+  private interactionHandle: number | undefined;
 
   private isDrawerTypeFront = new Value<Binary>(
     this.props.drawerType === 'front' ? TRUE : FALSE
@@ -277,6 +293,7 @@ export default class DrawerView extends React.PureComponent<Props> {
         set(state.velocity, this.velocityX),
         set(this.isOpen, isOpen),
         startClock(this.clock),
+        call([], this.handleStartInteraction),
         set(this.manuallyTriggerSpring, FALSE),
       ]),
       spring(this.clock, state, { ...SPRING_CONFIG, toValue }),
@@ -290,6 +307,7 @@ export default class DrawerView extends React.PureComponent<Props> {
         stopClock(this.clock),
         call([this.isOpen], ([value]: readonly Binary[]) => {
           const open = Boolean(value);
+          this.handleEndInteraction();
 
           if (open !== this.props.open) {
             // Sync drawer's state after animation finished
@@ -358,6 +376,13 @@ export default class DrawerView extends React.PureComponent<Props> {
         }
       })
     ),
+    onChange(
+      this.gestureState,
+      cond(
+        eq(this.gestureState, State.ACTIVE),
+        call([], this.handleStartInteraction)
+      )
+    ),
     cond(
       eq(this.gestureState, State.ACTIVE),
       [

packages/drawer/src/views/SafeAreaProviderCompat.tsx

@@ -3,6 +3,17 @@ import {
   SafeAreaProvider,
   SafeAreaConsumer,
 } from 'react-native-safe-area-context';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+const initialSafeAreaInsets = {
+  top: getStatusBarHeight(true),
+  bottom: getBottomSpace(),
+  right: 0,
+  left: 0,
+};
 
 type Props = {
   children: React.ReactNode;
@@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
           return children;
         }
 
-        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+        return (
+          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+            {children}
+          </SafeAreaProvider>
+        );
       }}
     </SafeAreaConsumer>
   );

packages/material-bottom-tabs/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.28...@react-navigation/material-bottom-tabs@5.0.0-alpha.29) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/material-bottom-tabs
+
+
+
+
+
 # [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.27...@react-navigation/material-bottom-tabs@5.0.0-alpha.28) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/material-bottom-tabs

packages/material-bottom-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.28",
+  "version": "5.0.0-alpha.29",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19"
+    "@react-navigation/routers": "^5.0.0-alpha.20"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/material-top-tabs/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.26...@react-navigation/material-top-tabs@5.0.0-alpha.27) (2020-01-05)
+
+
+### Features
+
+* add support for pager component ([dcc5f99](https://github.com/react-navigation/navigation-ex/commit/dcc5f99ecd495ad1903c9e99884e0d4e9b3994f1))
+
+
+
+
+
 # [5.0.0-alpha.26](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.25...@react-navigation/material-top-tabs@5.0.0-alpha.26) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/material-top-tabs

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.26",
+  "version": "5.0.0-alpha.27",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -34,7 +34,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19",
+    "@react-navigation/routers": "^5.0.0-alpha.20",
     "color": "^3.1.2"
   },
   "devDependencies": {

packages/material-top-tabs/src/types.tsx

@@ -113,9 +113,15 @@ export type MaterialTopTabNavigationConfig = Partial<
     | 'onSwipeEnd'
     | 'renderScene'
     | 'renderTabBar'
+    | 'renderPager'
     | 'renderLazyPlaceholder'
   >
 > & {
+  /**
+   * Function that returns a React element to use as the pager.
+   * The pager handles swipe gestures and page switching.
+   */
+  pager?: React.ComponentProps<typeof TabView>['renderPager'];
   /**
    * Function that returns a React element to render for routes that haven't been rendered yet.
    * Receives an object containing the route as the prop.

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TabView, SceneRendererProps } from 'react-native-tab-view';
-import { Route, useTheme } from '@react-navigation/native';
+import { useTheme } from '@react-navigation/native';
 import { TabNavigationState, TabActions } from '@react-navigation/routers';
 
 import MaterialTopTabBar from './MaterialTopTabBar';
@@ -19,6 +19,7 @@ type Props = MaterialTopTabNavigationConfig & {
 };
 
 export default function MaterialTopTabView({
+  pager,
   lazyPlaceholder,
   tabBar = (props: MaterialTopTabBarProps) => <MaterialTopTabBar {...props} />,
   tabBarOptions,
@@ -30,14 +31,6 @@ export default function MaterialTopTabView({
 }: Props) {
   const { colors } = useTheme();
 
-  const renderLazyPlaceholder = (props: { route: Route<string> }) => {
-    if (lazyPlaceholder != null) {
-      return lazyPlaceholder(props);
-    }
-
-    return null;
-  };
-
   const renderTabBar = (props: SceneRendererProps) => {
     const route = state.routes[state.index];
     const options = descriptors[route.key].options;
@@ -69,7 +62,8 @@ export default function MaterialTopTabView({
       renderScene={({ route }) => descriptors[route.key].render()}
       navigationState={state}
       renderTabBar={renderTabBar}
-      renderLazyPlaceholder={renderLazyPlaceholder}
+      renderPager={pager}
+      renderLazyPlaceholder={lazyPlaceholder}
       onSwipeStart={() => navigation.emit({ type: 'swipeStart' })}
       onSwipeEnd={() => navigation.emit({ type: 'swipeEnd' })}
       sceneContainerStyle={[

packages/native-stack/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.22](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.21...@react-navigation/native-stack@5.0.0-alpha.22) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
+# [5.0.0-alpha.21](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.20...@react-navigation/native-stack@5.0.0-alpha.21) (2020-01-03)
+
+**Note:** Version bump only for package @react-navigation/native-stack
+
+
+
+
+
 # [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.19...@react-navigation/native-stack@5.0.0-alpha.20) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/native-stack

packages/native-stack/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.20",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19"
+    "@react-navigation/routers": "^5.0.0-alpha.20"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

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

@@ -57,7 +57,7 @@ export default function HeaderConfig(props: Props) {
           ? headerTintColor
           : colors.text
       }
-      backTitle={headerBackTitleVisible ? headerBackTitle : ''}
+      backTitle={headerBackTitleVisible ? headerBackTitle : ' '}
       backTitleFontFamily={headerBackTitleStyle.fontFamily}
       backTitleFontSize={headerBackTitleStyle.fontSize}
       color={headerTintColor !== undefined ? headerTintColor : colors.primary}

packages/routers/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.20](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.19...@react-navigation/routers@5.0.0-alpha.20) (2020-01-05)
+
+
+### Bug Fixes
+
+* preserve focused route in tab on changing screens list ([adbeb29](https://github.com/react-navigation/navigation-ex/commit/adbeb292f522be8d7a58dd3f84e560a6d83d01a8))
+
+
+
+
+
 # [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.18...@react-navigation/routers@5.0.0-alpha.19) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/routers

packages/routers/__tests__/TabRouter.test.tsx

@@ -250,6 +250,89 @@ it('gets state on route names change', () => {
   });
 });
 
+it('preserves focused route on route names change', () => {
+  const router = TabRouter({});
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'tab-test',
+        routeKeyHistory: [],
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        stale: false,
+        type: 'tab',
+      },
+      {
+        routeNames: ['qux', 'foo', 'fiz', 'baz'],
+        routeParamList: {
+          qux: { name: 'John' },
+          fiz: { fruit: 'apple' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 3,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['qux', 'foo', 'fiz', 'baz'],
+    routes: [
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+      { key: 'foo-test', name: 'foo' },
+      { key: 'fiz-test', name: 'fiz', params: { fruit: 'apple' } },
+      { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+    ],
+    stale: false,
+    type: 'tab',
+  });
+});
+
+it('falls back to first route if route is removed on route names change', () => {
+  const router = TabRouter({});
+
+  expect(
+    router.getStateForRouteNamesChange(
+      {
+        index: 1,
+        key: 'tab-test',
+        routeKeyHistory: [],
+        routeNames: ['bar', 'baz', 'qux'],
+        routes: [
+          { key: 'bar-test', name: 'bar' },
+          { key: 'baz-test', name: 'baz', params: { answer: 42 } },
+          { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+        ],
+        stale: false,
+        type: 'tab',
+      },
+      {
+        routeNames: ['qux', 'foo', 'fiz'],
+        routeParamList: {
+          qux: { name: 'John' },
+          fiz: { fruit: 'apple' },
+        },
+      }
+    )
+  ).toEqual({
+    index: 0,
+    key: 'tab-test',
+    routeKeyHistory: [],
+    routeNames: ['qux', 'foo', 'fiz'],
+    routes: [
+      { key: 'qux-test', name: 'qux', params: { name: 'Jane' } },
+      { key: 'foo-test', name: 'foo' },
+      { key: 'fiz-test', name: 'fiz', params: { fruit: 'apple' } },
+    ],
+    stale: false,
+    type: 'tab',
+  });
+});
+
 it('handles navigate action', () => {
   const router = TabRouter({});
   const options = {

packages/routers/package.json

@@ -6,7 +6,7 @@
     "react-native",
     "react-navigation"
   ],
-  "version": "5.0.0-alpha.19",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/routers/src/TabRouter.tsx

@@ -147,11 +147,16 @@ export default function TabRouter({
           }
       );
 
+      const index = Math.max(
+        0,
+        routeNames.indexOf(state.routes[state.index].name)
+      );
+
       return {
         ...state,
         routeNames,
         routes,
-        index: Math.min(state.index, routes.length - 1),
+        index,
       };
     },
 

packages/stack/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.51](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.50...@react-navigation/stack@5.0.0-alpha.51) (2020-01-05)
+
+**Note:** Version bump only for package @react-navigation/stack
+
+
+
+
+
+# [5.0.0-alpha.50](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.49...@react-navigation/stack@5.0.0-alpha.50) (2020-01-03)
+
+
+### Bug Fixes
+
+* keep screens for replace when animation is enabled ([7f963a7](https://github.com/react-navigation/navigation-ex/commit/7f963a74bb4d4b04134e917fe47e38e4d982afed))
+* use gesture direction when using next screen's animation ([572beae](https://github.com/react-navigation/navigation-ex/commit/572beae41b326f3ef80bc2b790badf123e0071bc))
+
+
+
+
+
+# [5.0.0-alpha.49](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.48...@react-navigation/stack@5.0.0-alpha.49) (2020-01-03)
+
+
+### Bug Fixes
+
+* dismiss keyboard on page change ([2c31d17](https://github.com/react-navigation/navigation-ex/commit/2c31d1705c4e5827b19b9cc7f3e5b05207c3238a))
+* interaction manager in stack ([#237](https://github.com/react-navigation/navigation-ex/issues/237)) ([6b9b999](https://github.com/react-navigation/navigation-ex/commit/6b9b999c5b60a67ed683b84484928700d4260585))
+* provide initial values for safe area to prevent blank screen ([#238](https://github.com/react-navigation/navigation-ex/issues/238)) ([77b7570](https://github.com/react-navigation/navigation-ex/commit/77b757091c0451e20bca01138629669c7da544a8))
+
+
+
+
+
+# [5.0.0-alpha.48](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.47...@react-navigation/stack@5.0.0-alpha.48) (2020-01-01)
+
+
+### Bug Fixes
+
+* improve gesture performance ([59803f5](https://github.com/react-navigation/navigation-ex/commit/59803f54d64f85c8e46c1ebc70613a70a812f53a))
+* use native driver for gestures ([9356598](https://github.com/react-navigation/navigation-ex/commit/935659899f1d4084c601fbefea4a935f9b6ce087))
+
+
+
+
+
 # [5.0.0-alpha.47](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.46...@react-navigation/stack@5.0.0-alpha.47) (2020-01-01)
 
 **Note:** Version bump only for package @react-navigation/stack

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.47",
+  "version": "5.0.0-alpha.51",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,8 +33,9 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.19",
+    "@react-navigation/routers": "^5.0.0-alpha.20",
-    "color": "^3.1.2"
+    "color": "^3.1.2",
+    "react-native-iphone-x-helper": "^1.2.1"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/stack/src/views/KeyboardManager.tsx

@@ -11,9 +11,10 @@ type Props = {
 };
 
 export default class KeyboardManager extends React.Component<Props> {
-  componentWillUnmount = () => {
+  componentWillUnmount() {
     this.clearKeyboardTimeout();
-  };
+  }
+
   // Numeric id of the previously focused text input
   // When a gesture didn't change the tab, we can restore the focused input with this
   private previouslyFocusedTextInput: number | null = null;
@@ -31,6 +32,7 @@ export default class KeyboardManager extends React.Component<Props> {
     if (!this.props.enabled) {
       return;
     }
+
     this.clearKeyboardTimeout();
 
     const input = TextInput.State.currentlyFocusedField();
@@ -49,6 +51,7 @@ export default class KeyboardManager extends React.Component<Props> {
     if (!this.props.enabled) {
       return;
     }
+
     this.clearKeyboardTimeout();
 
     Keyboard.dismiss();
@@ -61,6 +64,7 @@ export default class KeyboardManager extends React.Component<Props> {
     if (!this.props.enabled) {
       return;
     }
+
     this.clearKeyboardTimeout();
 
     // The page didn't change, we should restore the focus of text input

packages/stack/src/views/SafeAreaProviderCompat.tsx

@@ -3,6 +3,17 @@ import {
   SafeAreaProvider,
   SafeAreaConsumer,
 } from 'react-native-safe-area-context';
+import {
+  getStatusBarHeight,
+  getBottomSpace,
+} from 'react-native-iphone-x-helper';
+
+const initialSafeAreaInsets = {
+  top: getStatusBarHeight(true),
+  bottom: getBottomSpace(),
+  right: 0,
+  left: 0,
+};
 
 type Props = {
   children: React.ReactNode;
@@ -19,7 +30,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
           return children;
         }
 
-        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+        return (
+          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+            {children}
+          </SafeAreaProvider>
+        );
       }}
     </SafeAreaConsumer>
   );

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

@@ -16,7 +16,6 @@ import {
 } from 'react-native-gesture-handler';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import Color from 'color';
-import PointerEventsView from './PointerEventsView';
 import StackGestureContext from '../../utils/StackGestureContext';
 import StackCardAnimationContext from '../../utils/StackCardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
@@ -31,7 +30,6 @@ import {
 
 type Props = ViewProps & {
   index: number;
-  active: boolean;
   closing?: boolean;
   next?: Animated.AnimatedInterpolation;
   current: Animated.AnimatedInterpolation;
@@ -105,6 +103,11 @@ export default class Card extends React.Component<Props> {
     if (
       this.getAnimateToValue(this.props) !== this.getAnimateToValue(prevProps)
     ) {
+      // We need to trigger the animation when route was closed
+      // Thr route might have been closed by a `POP` action or by a gesture
+      // When route was closed due to a gesture, the animation would've happened already
+      // It's still important to trigger the animation so that `onClose` is called
+      // If `onClose` is not called, cleanup step won't be performed for gestures
       this.animate({ closing });
     }
   }
@@ -132,7 +135,7 @@ export default class Card extends React.Component<Props> {
     closing,
     velocity,
   }: {
-    closing: boolean | undefined;
+    closing?: boolean;
     velocity?: number;
   }) => {
     const {
@@ -143,18 +146,29 @@ export default class Card extends React.Component<Props> {
       onTransitionStart,
     } = this.props;
 
+    const toValue = this.getAnimateToValue({
+      ...this.props,
+      closing,
+    });
+
     const spec = closing ? transitionSpec.close : transitionSpec.open;
 
     const animation =
       spec.animation === 'spring' ? Animated.spring : Animated.timing;
 
+    this.setPointerEventsEnabled(!closing);
+    this.handleStartInteraction();
+
     onTransitionStart?.({ closing: Boolean(closing) });
     animation(gesture, {
       ...spec.config,
       velocity,
+      toValue,
       useNativeDriver: true,
-      toValue: this.getAnimateToValue(this.props),
+      isInteraction: false,
     }).start(({ finished }) => {
+      this.handleEndInteraction();
+
       if (finished) {
         if (closing) {
           onClose();
@@ -169,7 +183,11 @@ export default class Card extends React.Component<Props> {
     closing,
     layout,
     gestureDirection,
-  }: Props) => {
+  }: {
+    closing?: boolean;
+    layout: Layout;
+    gestureDirection: GestureDirection;
+  }) => {
     if (!closing) {
       return 0;
     }
@@ -177,6 +195,15 @@ export default class Card extends React.Component<Props> {
     return getDistanceForDirection(layout, gestureDirection);
   };
 
+  private setPointerEventsEnabled = (enabled: boolean) => {
+    const pointerEvents = enabled ? 'box-none' : 'none';
+
+    this.content.current &&
+      this.content.current.setNativeProps({ pointerEvents });
+  };
+
+  private content = React.createRef<View>();
+
   private handleStartInteraction = () => {
     if (this.interactionHandle === undefined) {
       this.interactionHandle = InteractionManager.createInteractionHandle();
@@ -215,7 +242,6 @@ export default class Card extends React.Component<Props> {
         break;
       case GestureState.END: {
         this.isSwiping.setValue(FALSE);
-        this.handleEndInteraction();
 
         let distance;
         let translation;
@@ -326,7 +352,6 @@ export default class Card extends React.Component<Props> {
 
   render() {
     const {
-      active,
       styleInterpolator,
       index,
       current,
@@ -376,15 +401,18 @@ export default class Card extends React.Component<Props> {
     } = interpolatedStyle;
 
     const handleGestureEvent = gestureEnabled
-      ? Animated.event([
+      ? Animated.event(
-          {
+          [
-            nativeEvent:
+            {
-              gestureDirection === 'vertical' ||
+              nativeEvent:
-              gestureDirection === 'vertical-inverted'
+                gestureDirection === 'vertical' ||
-                ? { translationY: gesture }
+                gestureDirection === 'vertical-inverted'
-                : { translationX: gesture },
+                  ? { translationY: gesture }
-          },
+                  : { translationX: gesture },
-        ])
+            },
+          ],
+          { useNativeDriver: true }
+        )
       : undefined;
 
     const { backgroundColor } = StyleSheet.flatten(contentStyle || {});
@@ -425,15 +453,11 @@ export default class Card extends React.Component<Props> {
                     pointerEvents="none"
                   />
                 ) : null}
-                <PointerEventsView
+                <View ref={this.content} style={[styles.content, contentStyle]}>
-                  active={active}
-                  progress={current}
-                  style={[styles.content, contentStyle]}
-                >
                   <StackCardAnimationContext.Provider value={animationContext}>
                     {children}
                   </StackCardAnimationContext.Provider>
-                </PointerEventsView>
+                </View>
               </Animated.View>
             </PanGestureHandler>
           </Animated.View>

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

@@ -30,7 +30,6 @@ type Props = TransitionPreset & {
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
-  onGoBack: (props: { route: Route<string> }) => void;
   onTransitionStart?: (
     props: { route: Route<string> },
     closing: boolean
@@ -73,7 +72,6 @@ export default function CardContainer({
   index,
   layout,
   onCloseRoute,
-  onGoBack,
   onOpenRoute,
   onPageChangeCancel,
   onPageChangeConfirm,
@@ -91,6 +89,10 @@ export default function CardContainer({
   state,
   transitionSpec,
 }: Props) {
+  React.useEffect(() => {
+    onPageChangeConfirm?.();
+  }, [active, onPageChangeConfirm]);
+
   const handleOpen = () => {
     onTransitionEnd?.({ route: scene.route }, false);
     onOpenRoute({ route: scene.route });
@@ -102,14 +104,13 @@ export default function CardContainer({
   };
 
   const handleTransitionStart = ({ closing }: { closing: boolean }) => {
-    if (closing) {
+    if (active && closing) {
       onPageChangeConfirm?.();
     } else {
       onPageChangeCancel?.();
     }
 
     onTransitionStart?.({ route: scene.route }, closing);
-    closing && onGoBack({ route: scene.route });
   };
 
   const insets = {
@@ -124,7 +125,6 @@ export default function CardContainer({
   return (
     <Card
       index={index}
-      active={active}
       gestureDirection={gestureDirection}
       layout={layout}
       insets={insets}

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

@@ -46,7 +46,6 @@ type Props = {
   routes: Route<string>[];
   openingRouteKeys: string[];
   closingRouteKeys: string[];
-  onGoBack: (props: { route: Route<string> }) => void;
   onOpenRoute: (props: { route: Route<string> }) => void;
   onCloseRoute: (props: { route: Route<string> }) => void;
   getPreviousRoute: (props: {
@@ -360,7 +359,6 @@ export default class CardStack extends React.Component<Props, State> {
       closingRouteKeys,
       onOpenRoute,
       onCloseRoute,
-      onGoBack,
       getPreviousRoute,
       getGesturesEnabled,
       renderHeader,
@@ -446,6 +444,7 @@ export default class CardStack extends React.Component<Props, State> {
               : ({} as StackNavigationOptions);
 
             let transitionConfig = {
+              gestureDirection,
               transitionSpec,
               cardStyleInterpolator,
               headerStyleInterpolator,
@@ -463,6 +462,7 @@ export default class CardStack extends React.Component<Props, State> {
               if (nextScene) {
                 const {
                   animationEnabled,
+                  gestureDirection = defaultTransitionPreset.gestureDirection,
                   transitionSpec = defaultTransitionPreset.transitionSpec,
                   cardStyleInterpolator = animationEnabled === false
                     ? forNoAnimationCard
@@ -473,6 +473,7 @@ export default class CardStack extends React.Component<Props, State> {
                   : ({} as StackNavigationOptions);
 
                 transitionConfig = {
+                  gestureDirection,
                   transitionSpec,
                   cardStyleInterpolator,
                   headerStyleInterpolator,
@@ -527,10 +528,8 @@ export default class CardStack extends React.Component<Props, State> {
                   onCloseRoute={onCloseRoute}
                   onTransitionStart={onTransitionStart}
                   onTransitionEnd={onTransitionEnd}
-                  onGoBack={onGoBack}
                   gestureEnabled={index !== 0 && getGesturesEnabled({ route })}
                   gestureVelocityImpact={gestureVelocityImpact}
-                  gestureDirection={gestureDirection}
                   {...transitionConfig}
                 />
               </MaybeScreen>

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

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Animated, View, ViewProps } from 'react-native';
-
-type Props = ViewProps & {
-  active: boolean;
-  progress: Animated.AnimatedInterpolation;
-  children: React.ReactNode;
-};
-
-const TRUE = 1;
-const FALSE = 0;
-
-/**
- * Component that automatically computes the `pointerEvents` property
- * whenever position changes.
- */
-export default function PointerEventsView({ active, ...rest }: Props) {
-  const [pointerEventsEnabled] = React.useState(
-    () => new Animated.Value(active ? TRUE : FALSE)
-  );
-
-  const root = React.useRef<View | null>(null);
-
-  const setPointerEventsEnabled = React.useCallback((enabled: boolean) => {
-    const pointerEvents = enabled ? 'box-none' : 'none';
-
-    root.current && root.current.setNativeProps({ pointerEvents });
-  }, []);
-
-  React.useEffect(() => {
-    pointerEventsEnabled.setValue(active ? TRUE : FALSE);
-    setPointerEventsEnabled(active);
-  }, [active, pointerEventsEnabled, setPointerEventsEnabled]);
-
-  return <View ref={root} {...rest} />;
-}

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

@@ -90,6 +90,12 @@ class StackView extends React.Component<Props, State> {
       | undefined;
     const nextFocusedRoute = routes[routes.length - 1];
 
+    const isAnimationEnabled = (key: string) => {
+      const descriptor = props.descriptors[key] || state.descriptors[key];
+
+      return descriptor ? descriptor.options.animationEnabled !== false : true;
+    };
+
     if (
       previousFocusedRoute &&
       previousFocusedRoute.key !== nextFocusedRoute.key
@@ -97,21 +103,12 @@ class StackView extends React.Component<Props, State> {
       // We only need to animate routes if the focused route changed
       // Animating previous routes won't be visible coz the focused route is on top of everything
 
-      const isAnimationEnabled = (route: Route<string>) => {
-        const descriptor =
-          props.descriptors[route.key] || state.descriptors[route.key];
-
-        return descriptor
-          ? descriptor.options.animationEnabled !== false
-          : true;
-      };
-
       if (!previousRoutes.find(r => r.key === nextFocusedRoute.key)) {
         // A new route has come to the focus, we treat this as a push
         // A replace can also trigger this, the animation should look like push
 
         if (
-          isAnimationEnabled(nextFocusedRoute) &&
+          isAnimationEnabled(nextFocusedRoute.key) &&
           !openingRouteKeys.includes(nextFocusedRoute.key)
         ) {
           // In this case, we need to animate pushing the focused route
@@ -151,7 +148,7 @@ class StackView extends React.Component<Props, State> {
         // The previously focused route was removed, we treat this as a pop
 
         if (
-          isAnimationEnabled(previousFocusedRoute) &&
+          isAnimationEnabled(previousFocusedRoute.key) &&
           !closingRouteKeys.includes(previousFocusedRoute.key)
         ) {
           // Sometimes a route can be closed before the opening animation finishes
@@ -174,14 +171,15 @@ class StackView extends React.Component<Props, State> {
         // We don't know how to animate this
       }
     } else if (replacingRouteKeys.length || closingRouteKeys.length) {
-      // Keep the routes we are closing or replacing
+      // Keep the routes we are closing or replacing if animation is enabled for them
       routes = routes.slice();
       routes.splice(
         routes.length - 1,
         0,
-        ...state.routes.filter(
+        ...state.routes.filter(({ key }) =>
-          ({ key }) =>
+          isAnimationEnabled(key)
-            replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
+            ? replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
+            : false
         )
       );
     }
@@ -266,18 +264,6 @@ class StackView extends React.Component<Props, State> {
     return <HeaderContainer {...props} />;
   };
 
-  private handleGoBack = ({ route }: { route: Route<string> }) => {
-    const { state, navigation } = this.props;
-
-    // This event will trigger when a gesture ends
-    // We need to perform the transition before removing the route completely
-    navigation.dispatch({
-      ...StackActions.pop(),
-      source: route.key,
-      target: state.key,
-    });
-  };
-
   private handleOpenRoute = ({ route }: { route: Route<string> }) => {
     this.setState(state => ({
       routes: state.replacingRouteKeys.length
@@ -290,15 +276,33 @@ class StackView extends React.Component<Props, State> {
   };
 
   private handleCloseRoute = ({ route }: { route: Route<string> }) => {
-    // This event will trigger when the animation for closing the route ends
+    const { state, navigation } = this.props;
-    // In this case, we need to clean up any state tracking the route and pop it immediately
 
-    // @ts-ignore
+    if (state.routes.find(r => r.key === route.key)) {
-    this.setState(state => ({
+      // If a route exists in state, trigger a pop
-      routes: state.routes.filter(r => r.key !== route.key),
+      // This will happen in when the route was closed from the card component
-      openingRouteKeys: state.openingRouteKeys.filter(key => key !== route.key),
+      // e.g. When the close animation triggered from a gesture ends
-      closingRouteKeys: state.closingRouteKeys.filter(key => key !== route.key),
+      // For the cleanup, the card needs to call this function again from its componentDidUpdate
-    }));
+      navigation.dispatch({
+        ...StackActions.pop(),
+        source: route.key,
+        target: state.key,
+      });
+    } else {
+      // Otherwise, the animation was triggered due to a route removal
+      // In this case, we need to clean up any state tracking the route and pop it immediately
+
+      // @ts-ignore
+      this.setState(state => ({
+        routes: state.routes.filter(r => r.key !== route.key),
+        openingRouteKeys: state.openingRouteKeys.filter(
+          key => key !== route.key
+        ),
+        closingRouteKeys: state.closingRouteKeys.filter(
+          key => key !== route.key
+        ),
+      }));
+    }
   };
 
   private handleTransitionStart = (
@@ -355,7 +359,6 @@ class StackView extends React.Component<Props, State> {
                   routes={routes}
                   openingRouteKeys={openingRouteKeys}
                   closingRouteKeys={closingRouteKeys}
-                  onGoBack={this.handleGoBack}
                   onOpenRoute={this.handleOpenRoute}
                   onCloseRoute={this.handleCloseRoute}
                   onTransitionStart={this.handleTransitionStart}

yarn.lock

@@ -13191,6 +13191,11 @@ react-native-gesture-handler@^1.5.0, react-native-gesture-handler@~1.5.0:
     invariant "^2.2.4"
     prop-types "^15.7.2"
 
+react-native-iphone-x-helper@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-native-iphone-x-helper/-/react-native-iphone-x-helper-1.2.1.tgz#645e2ffbbb49e80844bb4cbbe34a126fda1e6772"
+  integrity sha512-/VbpIEp8tSNNHIvstuA3Swx610whci1Zpc9mqNkqn14DkMbw+ORviln2u0XyHG1kPvvwTNGZY6QpeFwxYaSdbQ==
+
 react-native-paper@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-native-paper/-/react-native-paper-3.3.0.tgz#c2a1e9b793b7063aa1848c1ce7db5719912e215a"