chore: publish

- @react-navigation/stack@5.0.0-alpha.54

.circleci/config.yml

@@ -49,6 +49,7 @@ jobs:
             at: ~/project
         - run: |
             yarn lerna run prepare
+            node scripts/check-types-path.js
 
 workflows:
   version: 2

babel.config.js

@@ -13,5 +13,8 @@ module.exports = {
     '@babel/preset-react',
     '@babel/preset-typescript',
   ],
-  plugins: ['@babel/plugin-proposal-class-properties'],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-optional-chaining',
+  ],
 };

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/src/Screens/BottomTabs.tsx

@@ -16,10 +16,10 @@ const getTabBarIcon = (name: string) => ({
 }) => <MaterialCommunityIcons name={name} color={color} size={size} />;
 
 type BottomTabParams = {
-  article: undefined;
+  Article: undefined;
-  albums: undefined;
+  Albums: undefined;
-  contacts: undefined;
+  Contacts: undefined;
-  chat: undefined;
+  Chat: undefined;
 };
 
 const BottomTabs = createBottomTabNavigator<BottomTabParams>();
@@ -32,7 +32,7 @@ export default function BottomTabsScreen() {
       }}
     >
       <BottomTabs.Screen
-        name="article"
+        name="Article"
         options={{
           title: 'Article',
           tabBarIcon: getTabBarIcon('file-document-box'),
@@ -41,7 +41,7 @@ export default function BottomTabsScreen() {
         {props => <SimpleStackScreen {...props} headerMode="none" />}
       </BottomTabs.Screen>
       <BottomTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
@@ -49,7 +49,7 @@ export default function BottomTabsScreen() {
         }}
       />
       <BottomTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{
           title: 'Contacts',
@@ -57,7 +57,7 @@ export default function BottomTabsScreen() {
         }}
       />
       <BottomTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{
           title: 'Albums',

example/src/Screens/MaterialBottomTabs.tsx

@@ -7,10 +7,10 @@ import Chat from '../Shared/Chat';
 import SimpleStackScreen from './SimpleStack';
 
 type MaterialBottomTabParams = {
-  article: undefined;
+  Article: undefined;
-  albums: undefined;
+  Albums: undefined;
-  contacts: undefined;
+  Contacts: undefined;
-  chat: undefined;
+  Chat: undefined;
 };
 
 const MaterialBottomTabs = createMaterialBottomTabNavigator<
@@ -21,7 +21,7 @@ export default function MaterialBottomTabsScreen() {
   return (
     <MaterialBottomTabs.Navigator barStyle={styles.tabBar}>
       <MaterialBottomTabs.Screen
-        name="article"
+        name="Article"
         options={{
           tabBarLabel: 'Article',
           tabBarIcon: 'file-document-box',
@@ -31,7 +31,7 @@ export default function MaterialBottomTabsScreen() {
         {props => <SimpleStackScreen {...props} headerMode="none" />}
       </MaterialBottomTabs.Screen>
       <MaterialBottomTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{
           tabBarLabel: 'Chat',
@@ -41,7 +41,7 @@ export default function MaterialBottomTabsScreen() {
         }}
       />
       <MaterialBottomTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{
           tabBarLabel: 'Contacts',
@@ -50,7 +50,7 @@ export default function MaterialBottomTabsScreen() {
         }}
       />
       <MaterialBottomTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{
           tabBarLabel: 'Albums',

example/src/Screens/MaterialTopTabs.tsx

@@ -5,9 +5,9 @@ import Contacts from '../Shared/Contacts';
 import Chat from '../Shared/Chat';
 
 type MaterialTopTabParams = {
-  albums: undefined;
+  Albums: undefined;
-  contacts: undefined;
+  Contacts: undefined;
-  chat: undefined;
+  Chat: undefined;
 };
 
 const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
@@ -16,17 +16,17 @@ export default function MaterialTopTabsScreen() {
   return (
     <MaterialTopTabs.Navigator>
       <MaterialTopTabs.Screen
-        name="chat"
+        name="Chat"
         component={Chat}
         options={{ title: 'Chat' }}
       />
       <MaterialTopTabs.Screen
-        name="contacts"
+        name="Contacts"
         component={Contacts}
         options={{ title: 'Contacts' }}
       />
       <MaterialTopTabs.Screen
-        name="albums"
+        name="Albums"
         component={Albums}
         options={{ title: 'Albums' }}
       />

example/src/Screens/ModalPresentationStack.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
-import { useSafeArea } from 'react-native-safe-area-context';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
   createStackNavigator,
@@ -11,28 +10,26 @@ import {
 import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
-type SimpleStackParams = {
+type ModalStackParams = {
-  article: { author: string };
+  Article: { author: string };
-  album: undefined;
+  Album: undefined;
 };
 
-type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
+type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
 
 const ArticleScreen = ({
   navigation,
   route,
 }: {
-  navigation: SimpleStackNavigation;
+  navigation: ModalStackNavigation;
-  route: RouteProp<SimpleStackParams, 'article'>;
+  route: RouteProp<ModalStackParams, 'Article'>;
 }) => {
-  const insets = useSafeArea();
-
   return (
     <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+      <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('album')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -50,19 +47,13 @@ const ArticleScreen = ({
   );
 };
 
-const AlbumsScreen = ({
+const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
-  navigation,
-}: {
-  navigation: SimpleStackNavigation;
-}) => {
-  const insets = useSafeArea();
-
   return (
     <React.Fragment>
-      <View style={[styles.buttons, { marginTop: insets.top }]}>
+      <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
           style={styles.button}
         >
           Push article
@@ -80,7 +71,7 @@ const AlbumsScreen = ({
   );
 };
 
-const ModalPresentationStack = createStackNavigator<SimpleStackParams>();
+const ModalPresentationStack = createStackNavigator<ModalStackParams>();
 
 type Props = {
   options?: React.ComponentProps<typeof ModalPresentationStack.Navigator>;
@@ -95,16 +86,20 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
   return (
     <ModalPresentationStack.Navigator
       mode="modal"
-      headerMode="none"
+      headerMode="screen"
-      screenOptions={{
+      screenOptions={({ route, navigation }) => ({
         ...TransitionPresets.ModalPresentationIOS,
         cardOverlayEnabled: true,
         gestureEnabled: true,
-      }}
+        headerStatusBarHeight:
+          navigation.dangerouslyGetState().routes.indexOf(route) > 0
+            ? 0
+            : undefined,
+      })}
       {...options}
     >
       <ModalPresentationStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params.author}`,
@@ -112,7 +107,7 @@ export default function SimpleStackScreen({ navigation, options }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <ModalPresentationStack.Screen
-        name="album"
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />

example/src/Screens/NativeStack.tsx

@@ -18,8 +18,8 @@ import {
 import Albums from '../Shared/Albums';
 
 type NativeStackParams = {
-  article: { author: string };
+  Article: { author: string };
-  album: undefined;
+  Album: undefined;
 };
 
 type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
@@ -42,7 +42,7 @@ const ArticleScreen = ({
   navigation,
 }: {
   navigation: NativeStackNavigation;
-  route: RouteProp<NativeStackParams, 'article'>;
+  route: RouteProp<NativeStackParams, 'Article'>;
 }) => {
   const { colors } = useTheme();
 
@@ -54,7 +54,7 @@ const ArticleScreen = ({
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('album')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -141,7 +141,7 @@ const AlbumsScreen = ({
     <View style={styles.buttons}>
       <Button
         mode="contained"
-        onPress={() => navigation.push('article', { author: 'Babel fish' })}
+        onPress={() => navigation.push('Article', { author: 'Babel fish' })}
         style={styles.button}
       >
         Push article
@@ -188,7 +188,7 @@ export default function NativeStackScreen({ navigation }: Props) {
   return (
     <NativeStack.Navigator>
       <NativeStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={{
           title: 'Lorem Ipsum',
@@ -197,7 +197,7 @@ export default function NativeStackScreen({ navigation }: Props) {
         }}
       />
       <NativeStack.Screen
-        name="album"
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />

example/src/Screens/SimpleStack.tsx

@@ -10,8 +10,8 @@ import Article from '../Shared/Article';
 import Albums from '../Shared/Albums';
 
 type SimpleStackParams = {
-  article: { author: string };
+  Article: { author: string };
-  album: undefined;
+  Album: undefined;
 };
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
@@ -21,14 +21,14 @@ const ArticleScreen = ({
   route,
 }: {
   navigation: SimpleStackNavigation;
-  route: RouteProp<SimpleStackParams, 'article'>;
+  route: RouteProp<SimpleStackParams, 'Article'>;
 }) => {
   return (
     <React.Fragment>
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('album')}
+          onPress={() => navigation.push('Album')}
           style={styles.button}
         >
           Push album
@@ -56,7 +56,7 @@ const AlbumsScreen = ({
       <View style={styles.buttons}>
         <Button
           mode="contained"
-          onPress={() => navigation.push('article', { author: 'Babel fish' })}
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
           style={styles.button}
         >
           Push article
@@ -88,7 +88,7 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
   return (
     <SimpleStack.Navigator {...rest}>
       <SimpleStack.Screen
-        name="article"
+        name="Article"
         component={ArticleScreen}
         options={({ route }) => ({
           title: `Article by ${route.params.author}`,
@@ -96,7 +96,7 @@ export default function SimpleStackScreen({ navigation, ...rest }: Props) {
         initialParams={{ author: 'Gandalf' }}
       />
       <SimpleStack.Screen
-        name="album"
+        name="Album"
         component={AlbumsScreen}
         options={{ title: 'Album' }}
       />

example/src/Shared/Albums.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs */
+
 import * as React from 'react';
 import { Image, Dimensions, ScrollView, StyleSheet } from 'react-native';
 import { useScrollToTop } from '@react-navigation/native';

example/src/index.tsx

@@ -21,7 +21,6 @@ import {
 import { Asset } from 'expo-asset';
 import {
   InitialState,
-  getStateFromPath,
   useLinking,
   NavigationContainerRef,
   NavigationNativeContainer,
@@ -104,20 +103,19 @@ export default function App() {
   // The first segment of the link is the the scheme + host (returned by `Linking.makeUrl`)
   const { getInitialState } = useLinking(containerRef, {
     prefixes: LinkingPrefixes,
-    getStateFromPath: path => {
+    config: {
-      const state = getStateFromPath(path);
+      Root: Object.keys(SCREENS).reduce<{ [key: string]: string }>(
+        (acc, name) => {
+          // Convert screen names such as SimpleStack to kebab case (simple-stack)
+          acc[name] = name
+            .replace(/([A-Z]+)/g, '-$1')
+            .replace(/^-/, '')
+            .toLowerCase();
 
-      return {
+          return acc;
-        routes: [
+        },
-          {
+        {}
-            name: 'root',
+      ),
-            state: {
-              ...state,
-              routes: [{ name: 'home' }, ...(state ? state.routes : [])],
-            },
-          },
-        ],
-      };
     },
   });
 
@@ -252,19 +250,19 @@ export default function App() {
                         />
                       </View>
                       <Divider />
-                      {(Object.keys(SCREENS) as Array<
+                      {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
-                        keyof typeof SCREENS
+                        name => (
-                      >).map(name => (
+                          <List.Item
-                        <List.Item
+                            key={name}
-                          key={name}
+                            title={SCREENS[name].title}
-                          title={SCREENS[name].title}
+                            onPress={() => navigation.push(name)}
-                          onPress={() => navigation.push(name)}
+                          />
-                        />
+                        )
-                      ))}
+                      )}
                     </ScrollView>
                   )}
                 </Stack.Screen>
-                {(Object.keys(SCREENS) as Array<keyof typeof SCREENS>).map(
+                {(Object.keys(SCREENS) as (keyof typeof SCREENS)[]).map(
                   name => (
                     <Stack.Screen
                       key={name}

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'
     );

jest/setup.js

@@ -2,7 +2,7 @@ const error = console.error;
 
 console.error = (...args) =>
   // Supress error messages regarding error boundary in tests
-  /Consider adding an error boundary to your tree to customize error handling behavior/m.test(
+  /(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]
   )
     ? void 0

package.json

@@ -24,6 +24,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@babel/preset-env": "^7.7.6",
     "@babel/preset-react": "^7.7.0",
     "@babel/preset-typescript": "^7.7.2",
@@ -34,7 +35,7 @@
     "commitlint": "^8.2.0",
     "core-js": "^3.5.0",
     "eslint": "^6.7.2",
-    "eslint-config-satya164": "^3.1.2",
+    "eslint-config-satya164": "^3.1.5",
     "husky": "^3.0.9",
     "jest": "^24.8.0",
     "lerna": "^3.18.4",

packages/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.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
+
+
+
+
+
 # [5.0.0-alpha.28](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/bottom-tabs@5.0.0-alpha.27...@react-navigation/bottom-tabs@5.0.0-alpha.28) (2019-12-19)
 
 **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.28",
+  "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.18",
+    "@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/ResourceSavingScene.tsx

@@ -14,7 +14,7 @@ const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view o
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    if (screensEnabled && screensEnabled()) {
+    if (screensEnabled?.()) {
       const { isVisible, ...rest } = this.props;
       // @ts-ignore
       return <Screen active={isVisible ? 1 : 0} {...rest} />;

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,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.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
+
+
+
+
+
 # [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/compat@5.0.0-alpha.18...@react-navigation/compat@5.0.0-alpha.19) (2019-12-19)
 
 **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.19",
+  "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.18"
+    "@react-navigation/routers": "^5.0.0-alpha.20"
   },
   "devDependencies": {
     "@types/react": "^16.9.16",

packages/compat/src/NavigationActions.tsx

@@ -25,7 +25,7 @@ export function navigate({
 }
 
 export function back(options?: { key?: null | string }) {
-  return options && options.key != null
+  return options?.key != null
     ? (state: NavigationState) => ({
         ...CommonActions.goBack(),
         source: options.key,

packages/compat/src/createCompatNavigationProp.tsx

@@ -109,17 +109,17 @@ export default function createCompatNavigationProp<
           break;
         case 'didFocus': {
           const unsubscribe = focusSubscriptions.get(callback);
-          unsubscribe && unsubscribe();
+          unsubscribe?.();
           break;
         }
         case 'didBlur': {
           const unsubscribe = blurSubscriptions.get(callback);
-          unsubscribe && unsubscribe();
+          unsubscribe?.();
           break;
         }
         case 'refocus': {
           const unsubscribe = refocusSubscriptions.get(callback);
-          unsubscribe && unsubscribe();
+          unsubscribe?.();
           break;
         }
         default:

packages/compat/src/createCompatNavigatorFactory.tsx

@@ -47,7 +47,7 @@ export default function createCompatNavigatorFactory<
   >(
     routeConfig: CompatRouteConfig<NavigationPropType>,
     navigationConfig: Partial<Omit<NavigationConfig, 'screenOptions'>> & {
-      order?: Array<Extract<keyof ParamList, string>>;
+      order?: Extract<keyof ParamList, string>[];
       defaultNavigationOptions?: ScreenOptions;
       navigationOptions?: Record<string, any>;
     } = {}

packages/core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.29...@react-navigation/core@5.0.0-alpha.30) (2020-01-01)
+
+
+### Bug Fixes
+
+* cleanup transaction even if action wasn't handled ([f462d67](https://github.com/react-navigation/navigation-ex/commit/f462d672708cabfb0477c3a48505bd194ea626fd))
+* show error if an action was not handled ([0252bdc](https://github.com/react-navigation/navigation-ex/commit/0252bdc2222ebe7410a0ed593bf03b2bdf5dc7ca))
+
+
+
+
+
 # [5.0.0-alpha.29](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/core@5.0.0-alpha.28...@react-navigation/core@5.0.0-alpha.29) (2019-12-19)
 
 **Note:** Version bump only for package @react-navigation/core

packages/core/package.json

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

packages/core/src/CommonActions.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-cycle
 import { NavigationState, PartialState } from './types';
 
 export type Action =

packages/core/src/NavigationContainer.tsx

@@ -123,9 +123,11 @@ const Container = React.forwardRef(function NavigationContainer(
       isTransactionActiveRef.current = true;
       transactionStateRef.current = navigationState;
 
-      callback();
+      try {
-
+        callback();
-      isTransactionActiveRef.current = false;
+      } finally {
+        isTransactionActiveRef.current = false;
+      }
 
       return transactionStateRef.current;
     });
@@ -202,7 +204,7 @@ const Container = React.forwardRef(function NavigationContainer(
   }, [getStateForRoute]);
 
   React.useImperativeHandle(ref, () => ({
-    ...(Object.keys(CommonActions) as Array<keyof typeof CommonActions>).reduce<
+    ...(Object.keys(CommonActions) as (keyof typeof CommonActions)[]).reduce<
       any
     >((acc, name) => {
       acc[name] = (...args: any[]) =>

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

@@ -0,0 +1,75 @@
+import getActionFromState from '../getActionFromState';
+
+it('gets navigate action from state', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              params: { answer: 42 },
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: {
+      name: 'foo',
+      params: {
+        params: {
+          answer: 42,
+          params: {
+            author: 'jane',
+          },
+          screen: 'qux',
+        },
+        screen: 'bar',
+      },
+    },
+    type: 'NAVIGATE',
+  });
+});
+
+it('gets reset action from state', () => {
+  const state = {
+    routes: [
+      {
+        name: 'foo',
+        state: {
+          routes: [
+            {
+              name: 'bar',
+              state: {
+                routes: [
+                  {
+                    name: 'qux',
+                    params: { author: 'jane' },
+                  },
+                  { name: 'quz' },
+                ],
+              },
+            },
+          ],
+        },
+      },
+    ],
+  };
+
+  expect(getActionFromState(state)).toEqual({
+    payload: state,
+    type: 'RESET_ROOT',
+  });
+});

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

@@ -357,6 +357,8 @@ it("doesn't update state if action wasn't handled", () => {
 
   const onStateChange = jest.fn();
 
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
   render(
     <NavigationContainer onStateChange={onStateChange}>
       <TestNavigator initialRouteName="foo">
@@ -367,6 +369,12 @@ 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."
+  );
+
+  spy.mockRestore();
 });
 
 it('cleans up state when the navigator unmounts', () => {

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

@@ -305,8 +305,7 @@ it("action doesn't bubble if target is specified", () => {
   expect(onStateChange).not.toBeCalled();
 });
 
-// eslint-disable-next-line jest/expect-expect
+it('logs error if no navigator handled the action', () => {
-it("doesn't crash if no navigator handled the action", () => {
   const TestRouter = MockRouter;
 
   const TestNavigator = (props: any) => {
@@ -366,5 +365,13 @@ it("doesn't crash if no navigator handled the action", () => {
     </NavigationContainer>
   );
 
+  const spy = jest.spyOn(console, 'error').mockImplementation();
+
   render(element).update(element);
+
+  expect(spy.mock.calls[0][0]).toMatch(
+    "The action 'UNKNOWN' with payload 'undefined' was not handled by any navigator."
+  );
+
+  spy.mockRestore();
 });

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

@@ -19,7 +19,7 @@ it('gets route prop from context', () => {
   const Test = () => {
     const route = useRoute<RouteProp<{ sample: { x: string } }, 'sample'>>();
 
-    expect(route && route.params && route.params.x).toEqual(1);
+    expect(route?.params?.x).toEqual(1);
 
     return null;
   };

packages/core/src/getActionFromState.tsx

@@ -0,0 +1,67 @@
+import { PartialState, NavigationState } from './types';
+
+type NavigateParams = {
+  screen?: string;
+  params?: NavigateParams;
+};
+
+type Action =
+  | {
+      type: 'NAVIGATE';
+      payload: { name: string; params: NavigateParams };
+    }
+  | {
+      type: 'RESET_ROOT';
+      payload: PartialState<NavigationState>;
+    };
+
+export default function getActionFromState(
+  state: PartialState<NavigationState>
+): Action {
+  let payload: { name: string; params: NavigateParams } | undefined;
+
+  if (state.routes.length === 1) {
+    // Try to construct payload for a `NAVIGATE` action from the state
+    // This lets us preserve the navigation state and not lose it
+    let route = state.routes[0];
+
+    payload = {
+      name: route.name,
+      params: { ...route.params },
+    };
+
+    let current = state.routes[0].state;
+    let params = payload.params;
+
+    while (current) {
+      if (current.routes.length === 1) {
+        route = current.routes[0];
+        params.screen = route.name;
+
+        if (route.state) {
+          params.params = { ...route.params };
+          params = params.params;
+        } else {
+          params.params = route.params;
+        }
+
+        current = route.state;
+      } else {
+        payload = undefined;
+        break;
+      }
+    }
+  }
+
+  if (payload) {
+    return {
+      type: 'NAVIGATE',
+      payload,
+    };
+  }
+
+  return {
+    type: 'RESET_ROOT',
+    payload: state,
+  };
+}

packages/core/src/getPathFromState.tsx

@@ -60,7 +60,7 @@ export default function getPathFromState(
         Object.entries(route.params).reduce<{
           [key: string]: string;
         }>((acc, [key, value]) => {
-          acc[key] = config && config[key] ? config[key](value) : String(value);
+          acc[key] = config?.[key] ? config[key](value) : String(value);
           return acc;
         }, {})
       : undefined;
@@ -80,6 +80,7 @@ export default function getPathFromState(
           if (params && name in params && p.startsWith(':')) {
             const value = params[name];
             // Remove the used value from the params object since we'll use the rest for query string
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
             delete params[name];
             return encodeURIComponent(value);
           }

packages/core/src/getStateFromPath.tsx

@@ -15,6 +15,10 @@ type RouteConfig = {
   parse: Record<string, (value: string) => any> | undefined;
 };
 
+type ResultState = PartialState<NavigationState> & {
+  state?: ResultState;
+};
+
 /**
  * Utility to parse a path string to initial state object accepted by the container.
  * This is useful for deep linking when we need to handle the incoming URL.
@@ -37,7 +41,7 @@ type RouteConfig = {
 export default function getStateFromPath(
   path: string,
   options: Options = {}
-): PartialState<NavigationState> | undefined {
+): ResultState | undefined {
   // Create a normalized configs array which will be easier to use
   const configs = ([] as RouteConfig[]).concat(
     ...Object.keys(options).map(key => createNormalizedConfigs(key, options))

packages/core/src/index.tsx

@@ -17,5 +17,6 @@ export { default as useIsFocused } from './useIsFocused';
 
 export { default as getStateFromPath } from './getStateFromPath';
 export { default as getPathFromState } from './getPathFromState';
+export { default as getActionFromState } from './getActionFromState';
 
 export * from './types';

packages/core/src/types.tsx

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-cycle
 import * as CommonActions from './CommonActions';
 import * as React from 'react';
 
@@ -20,9 +19,9 @@ export type NavigationState = {
   /**
    * List of rendered routes.
    */
-  routes: Array<
+  routes: (Route<string> & {
-    Route<string> & { state?: NavigationState | PartialState<NavigationState> }
+    state?: NavigationState | PartialState<NavigationState>;
-  >;
+  })[];
   /**
    * Custom type for the state, whether it's for tab, stack, drawer etc.
    * During rehydration, the state will be discarded if type doesn't match with router type.
@@ -38,7 +37,7 @@ export type NavigationState = {
 export type InitialState = Partial<
   Omit<NavigationState, 'stale' | 'routes'>
 > & {
-  routes: Array<Omit<Route<string>, 'key'> & { state?: InitialState }>;
+  routes: (Omit<Route<string>, 'key'> & { state?: InitialState })[];
 };
 
 export type PartialState<State extends NavigationState> = Partial<
@@ -46,9 +45,10 @@ export type PartialState<State extends NavigationState> = Partial<
 > & {
   stale?: true;
   type?: string;
-  routes: Array<
+  routes: (Omit<Route<string>, 'key'> & {
-    Omit<Route<string>, 'key'> & { key?: string; state?: InitialState }
+    key?: string;
-  >;
+    state?: InitialState;
+  })[];
 };
 
 export type Route<RouteName extends string> = {
@@ -71,6 +71,10 @@ export type NavigationAction = {
    * Type of the action (e.g. `NAVIGATE`)
    */
   type: string;
+  /**
+   * Additional data for the action
+   */
+  payload?: object;
   /**
    * Key of the route which dispatched this action.
    */

packages/core/src/useDevTools.tsx

@@ -44,16 +44,15 @@ export default function useDevTools({ name, reset, state }: Options) {
 
   const devTools = devToolsRef.current;
   const lastStateRef = React.useRef<State>(state);
-  const actions = React.useRef<Array<NavigationAction | string>>([]);
+  const actions = React.useRef<(NavigationAction | string)[]>([]);
 
   React.useEffect(() => {
-    devTools && devTools.init(lastStateRef.current);
+    devTools?.init(lastStateRef.current);
   }, [devTools]);
 
   React.useEffect(
     () =>
-      devTools &&
+      devTools?.subscribe(message => {
-      devTools.subscribe(message => {
         if (message.type === 'DISPATCH' && message.state) {
           reset(JSON.parse(message.state));
         }

packages/core/src/useEventEmitter.tsx

@@ -5,7 +5,7 @@ export type NavigationEventEmitter = EventEmitter<Record<string, any>> & {
   create: (target: string) => EventConsumer<Record<string, any>>;
 };
 
-type Listeners = Array<(data: any) => void>;
+type Listeners = ((data: any) => void)[];
 
 /**
  * Hook to manage the event system used by the navigator to notify screens of various events.
@@ -69,7 +69,7 @@ export default function useEventEmitter(): NavigationEventEmitter {
         },
       };
 
-      callbacks && callbacks.forEach(cb => cb(event));
+      callbacks?.forEach(cb => cb(event));
 
       return event;
     },

packages/core/src/useFocusEffect.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import useNavigation from './useNavigation';
 
-type EffectCallback = (() => void) | (() => () => void);
+type EffectCallback = (() => undefined) | (() => () => void);
 
 /**
  * Hook to run an effect in a focused screen, similar to `React.useEffect`.
@@ -15,7 +15,7 @@ export default function useFocusEffect(callback: EffectCallback) {
 
   React.useEffect(() => {
     let isFocused = false;
-    let cleanup: (() => void) | void;
+    let cleanup: (() => void) | undefined;
 
     // We need to run the effect on intial render/dep changes if the screen is focused
     if (navigation.isFocused()) {
@@ -30,19 +30,19 @@ export default function useFocusEffect(callback: EffectCallback) {
         return;
       }
 
-      cleanup && cleanup();
+      cleanup?.();
       cleanup = callback();
       isFocused = true;
     });
 
     const unsubscribeBlur = navigation.addListener('blur', () => {
-      cleanup && cleanup();
+      cleanup?.();
       cleanup = undefined;
       isFocused = false;
     });
 
     return () => {
-      cleanup && cleanup();
+      cleanup?.();
       unsubscribeFocus();
       unsubscribeBlur();
     };

packages/core/src/useFocusEvents.tsx

@@ -21,8 +21,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
   // Coz the child screen can't be focused if the parent screen is out of fcous
   React.useEffect(
     () =>
-      navigation &&
+      navigation?.addListener('focus', () =>
-      navigation.addListener('focus', () =>
         emitter.emit({ type: 'focus', target: currentFocusedKey })
       ),
     [currentFocusedKey, emitter, navigation]
@@ -30,8 +29,7 @@ export default function useFocusEvents({ state, emitter }: Options) {
 
   React.useEffect(
     () =>
-      navigation &&
+      navigation?.addListener('blur', () =>
-      navigation.addListener('blur', () =>
         emitter.emit({ type: 'blur', target: currentFocusedKey })
       ),
     [currentFocusedKey, emitter, navigation]

packages/core/src/useFocusedListenersChildrenAdapter.tsx

@@ -38,7 +38,7 @@ export default function useFocusedListenersChildrenAdapter({
     [focusedListeners, navigation]
   );
 
-  React.useEffect(() => addFocusedListener && addFocusedListener(listener), [
+  React.useEffect(() => addFocusedListener?.(listener), [
     addFocusedListener,
     listener,
   ]);

packages/core/src/useNavigationBuilder.tsx

@@ -117,7 +117,7 @@ export default function useNavigationBuilder<
   const { current: router } = React.useRef<Router<State, any>>(
     createRouter({
       ...((rest as unknown) as RouterOptions),
-      ...(route && route.params && typeof route.params.screen === 'string'
+      ...(route?.params && typeof route.params.screen === 'string'
         ? { initialRouteName: route.params.screen }
         : null),
     })
@@ -141,7 +141,7 @@ export default function useNavigationBuilder<
     (acc, curr) => {
       const { initialParams } = screens[curr];
       const initialParamsFromParams =
-        route && route.params && route.params.screen === curr
+        route?.params && route.params.screen === curr
           ? route.params.params
           : undefined;
 

packages/core/src/useNavigationHelpers.tsx

@@ -42,13 +42,22 @@ export default function useNavigationHelpers<
   const { performTransaction } = React.useContext(NavigationStateContext);
 
   return React.useMemo(() => {
-    const dispatch = (action: Action | ((state: State) => Action)) =>
+    const dispatch = (action: Action | ((state: State) => Action)) => {
       performTransaction(() => {
         const payload =
           typeof action === 'function' ? action(getState()) : action;
 
-        onAction(payload);
+        const handled = onAction(payload);
+
+        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.`
+          );
+        }
       });
+    };
 
     const actions = {
       ...router.actionCreators,
@@ -81,7 +90,7 @@ export default function useNavigationHelpers<
             routeNames: state.routeNames,
             routeParamList: {},
           }) !== null ||
-          (parentNavigationHelpers && parentNavigationHelpers.canGoBack()) ||
+          parentNavigationHelpers?.canGoBack() ||
           false
         );
       },

packages/core/src/useOnAction.tsx

@@ -130,10 +130,10 @@ export default function useOnAction({
     ]
   );
 
-  React.useEffect(
+  React.useEffect(() => addActionListenerParent?.(onAction), [
-    () => addActionListenerParent && addActionListenerParent(onAction),
+    addActionListenerParent,
-    [addActionListenerParent, onAction]
+    onAction,
-  );
+  ]);
 
   return onAction;
 }

packages/core/src/useOnGetState.tsx

@@ -26,6 +26,6 @@ export default function useOnGetState({
   }, [getState, getStateForRoute]);
 
   React.useEffect(() => {
-    return addStateGetter && addStateGetter(key, getRehydratedState);
+    return addStateGetter?.(key, getRehydratedState);
   }, [addStateGetter, getRehydratedState, key]);
 }

packages/drawer/CHANGELOG.md

@@ -3,6 +3,49 @@
 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
+
+
+
+
+
 # [5.0.0-alpha.30](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/drawer@5.0.0-alpha.29...@react-navigation/drawer@5.0.0-alpha.30) (2019-12-19)
 
 

packages/drawer/package.json

@@ -11,7 +11,7 @@
     "material",
     "drawer"
   ],
-  "version": "5.0.0-alpha.30",
+  "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.18",
+    "@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 }),
@@ -288,8 +305,9 @@ export default class DrawerView extends React.PureComponent<Props> {
         set(this.offsetX, 0),
         // When the animation finishes, stop the clock
         stopClock(this.clock),
-        call([this.isOpen], ([value]: ReadonlyArray<Binary>) => {
+        call([this.isOpen], ([value]: readonly Binary[]) => {
           const open = Boolean(value);
+          this.handleEndInteraction();
 
           if (open !== this.props.open) {
             // Sync drawer's state after animation finished
@@ -304,7 +322,7 @@ export default class DrawerView extends React.PureComponent<Props> {
   private dragX = block([
     onChange(
       this.isOpen,
-      call([this.isOpen], ([value]: ReadonlyArray<Binary>) => {
+      call([this.isOpen], ([value]: readonly Binary[]) => {
         const open = Boolean(value);
 
         this.currentOpenValue = open;
@@ -344,7 +362,7 @@ export default class DrawerView extends React.PureComponent<Props> {
       // Listen to updates for this value only when it changes
       // Without `onChange`, this will fire even if the value didn't change
       // We don't want to call the listeners if the value didn't change
-      call([this.isSwiping], ([value]: ReadonlyArray<Binary>) => {
+      call([this.isSwiping], ([value]: readonly Binary[]) => {
         const { keyboardDismissMode } = this.props;
 
         if (value === TRUE) {
@@ -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/ResourceSavingScene.tsx

@@ -13,7 +13,7 @@ const FAR_FAR_AWAY = 3000; // this should be big enough to move the whole view o
 
 export default class ResourceSavingScene extends React.Component<Props> {
   render() {
-    if (screensEnabled && screensEnabled()) {
+    if (screensEnabled?.()) {
       const { isVisible, ...rest } = this.props;
 
       // @ts-ignore

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,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.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
+
+
+
+
+
 # [5.0.0-alpha.27](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-bottom-tabs@5.0.0-alpha.26...@react-navigation/material-bottom-tabs@5.0.0-alpha.27) (2019-12-19)
 
 **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.27",
+  "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.18"
+    "@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,25 @@
 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
+
+
+
+
+
 # [5.0.0-alpha.25](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/material-top-tabs@5.0.0-alpha.24...@react-navigation/material-top-tabs@5.0.0-alpha.25) (2019-12-19)
 
 

packages/material-top-tabs/package.json

@@ -11,7 +11,7 @@
     "material",
     "tab"
   ],
-  "version": "5.0.0-alpha.25",
+  "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.18",
+    "@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,30 @@
 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
+
+
+
+
+
 # [5.0.0-alpha.19](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/native-stack@5.0.0-alpha.18...@react-navigation/native-stack@5.0.0-alpha.19) (2019-12-19)
 
 **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.19",
+  "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.18"
+    "@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/native/CHANGELOG.md

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

packages/native/package.json

@@ -7,7 +7,7 @@
     "ios",
     "android"
   ],
-  "version": "5.0.0-alpha.21",
+  "version": "5.0.0-alpha.22",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -30,7 +30,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.29"
+    "@react-navigation/core": "^5.0.0-alpha.30"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.7.0",

packages/native/src/useLinking.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Linking } from 'react-native';
 import {
+  getActionFromState,
   getStateFromPath as getStateFromPathDefault,
   NavigationContainerRef,
 } from '@react-navigation/core';
@@ -82,7 +83,13 @@ export default function useLinking(
         const state = getStateFromPathRef.current(path, configRef.current);
 
         if (state) {
-          navigation.resetRoot(state);
+          const action = getActionFromState(state);
+
+          if (action.type === 'RESET_ROOT') {
+            navigation.resetRoot(action.payload);
+          } else {
+            navigation.dispatch(action);
+          }
         }
       }
     };

packages/routers/CHANGELOG.md

@@ -3,6 +3,25 @@
 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
+
+
+
+
+
 # [5.0.0-alpha.18](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/routers@5.0.0-alpha.17...@react-navigation/routers@5.0.0-alpha.18) (2019-12-19)
 
 **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.18",
+  "version": "5.0.0-alpha.20",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.0.0-alpha.29",
+    "@react-navigation/core": "^5.0.0-alpha.30",
     "shortid": "^2.2.15"
   },
   "devDependencies": {

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,98 @@
 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.54](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.53...@react-navigation/stack@5.0.0-alpha.54) (2020-01-05)
+
+
+### Bug Fixes
+
+* expose the header height even if not floating ([12d9083](https://github.com/react-navigation/navigation-ex/commit/12d90833eb36e9e7f229384ec8a05823b0a564d1))
+* use memo for card container ([65ce20e](https://github.com/react-navigation/navigation-ex/commit/65ce20ecbc1e5f2dba9f1004cb29de03a6e5504a))
+
+
+
+
+
+# [5.0.0-alpha.53](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.52...@react-navigation/stack@5.0.0-alpha.53) (2020-01-05)
+
+
+### Bug Fixes
+
+* compare with correct height when floating header height updates ([a9e584c](https://github.com/react-navigation/navigation-ex/commit/a9e584c3b765ae1e166a3a82b3fa0a40e8e2172a))
+
+
+### Features
+
+* expose header height in context ([133b59c](https://github.com/react-navigation/navigation-ex/commit/133b59cd175ddc899dff3b56bf3a0514c0c91ae6))
+
+
+
+
+
+# [5.0.0-alpha.52](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.51...@react-navigation/stack@5.0.0-alpha.52) (2020-01-05)
+
+
+### Features
+
+* add headerStatusBarHeight option to stack ([b201fd2](https://github.com/react-navigation/navigation-ex/commit/b201fd20716a2f03cb9373c72281f5d396a9356d))
+
+
+
+
+
+# [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
+
+
+
+
+
 # [5.0.0-alpha.46](https://github.com/react-navigation/navigation-ex/compare/@react-navigation/stack@5.0.0-alpha.45...@react-navigation/stack@5.0.0-alpha.46) (2019-12-19)
 
 

packages/stack/README.md

@@ -10,18 +10,18 @@ Open a Terminal in your project's folder and run,
 yarn add @react-navigation/native @react-navigation/stack @react-native-community/masked-view
 ```
 
-Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-reanimated`](https://github.com/kmagiera/react-native-reanimated), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
+Now we need to install [`react-native-gesture-handler`](https://github.com/kmagiera/react-native-gesture-handler), [`react-native-screens`](https://github.com/kmagiera/react-native-screens) and [`react-native-safe-area-context`](https://github.com/th3rdwave/react-native-safe-area-context).
 
 If you are using Expo, to ensure that you get the compatible versions of the libraries, run:
 
 ```sh
-expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context
+expo install react-native-gesture-handler react-native-screens react-native-safe-area-context
 ```
 
 If you are not using Expo, run the following:
 
 ```sh
-yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context
+yarn add react-native-gesture-handler react-native-screens react-native-safe-area-context
 ```
 
 If you are using Expo, you are done. Otherwise, continue to the next steps.

packages/stack/package.json

@@ -10,7 +10,7 @@
     "android",
     "stack"
   ],
-  "version": "5.0.0-alpha.46",
+  "version": "5.0.0-alpha.54",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,8 +33,9 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.0.0-alpha.18",
+    "@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",
@@ -46,7 +47,6 @@
     "react": "~16.9.0",
     "react-native": "~0.61.5",
     "react-native-gesture-handler": "^1.5.0",
-    "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.0",
     "react-native-screens": "^2.0.0-alpha.19",
     "typescript": "^3.7.3"
@@ -57,7 +57,6 @@
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
-    "react-native-reanimated": "^1.0.0",
     "react-native-safe-area-context": "^0.6.0",
     "react-native-screens": "^1.0.0-alpha.0 || ^2.0.0-alpha.0"
   },

packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx

@@ -1,10 +1,11 @@
-import Animated from 'react-native-reanimated';
+import { Animated } from 'react-native';
+import conditional from '../utils/conditional';
 import {
   StackCardInterpolationProps,
   StackCardInterpolatedStyle,
 } from '../types';
 
-const { cond, add, multiply, interpolate } = Animated;
+const { add, multiply } = Animated;
 
 /**
  * Standard iOS-style slide in from the right.
@@ -16,7 +17,7 @@ export function forHorizontalIOS({
   layouts: { screen },
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateFocused = multiply(
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.width, 0],
     }),
@@ -25,20 +26,20 @@ export function forHorizontalIOS({
 
   const translateUnfocused = next
     ? multiply(
-        interpolate(next.progress, {
+        next.progress.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, multiply(screen.width, -0.3)],
+          outputRange: [0, screen.width * -0.3],
         }),
         inverted
       )
     : 0;
 
-  const overlayOpacity = interpolate(current.progress, {
+  const overlayOpacity = current.progress.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.07],
   });
 
-  const shadowOpacity = interpolate(current.progress, {
+  const shadowOpacity = current.progress.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.3],
   });
@@ -66,7 +67,7 @@ export function forVerticalIOS({
   layouts: { screen },
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = multiply(
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height, 0],
     }),
@@ -102,7 +103,7 @@ export function forModalPresentationIOS({
   const progress = add(current.progress, next ? next.progress : 0);
 
   const translateY = multiply(
-    interpolate(progress, {
+    progress.interpolate({
       inputRange: [0, 1, 2],
       outputRange: [
         screen.height,
@@ -113,14 +114,14 @@ export function forModalPresentationIOS({
     inverted
   );
 
-  const overlayOpacity = interpolate(progress, {
+  const overlayOpacity = progress.interpolate({
     inputRange: [0, 1, 1.0001, 2],
     outputRange: [0, 0.3, 1, 1],
   });
 
   const scale = isLandscape
     ? 1
-    : interpolate(progress, {
+    : progress.interpolate({
         inputRange: [0, 1, 2],
         outputRange: [
           1,
@@ -132,7 +133,7 @@ export function forModalPresentationIOS({
   const borderRadius = isLandscape
     ? 0
     : index === 0
-    ? interpolate(progress, {
+    ? progress.interpolate({
         inputRange: [0, 1, 2],
         outputRange: [0, 0, 10],
       })
@@ -160,17 +161,17 @@ export function forFadeFromBottomAndroid({
   closing,
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const translateY = multiply(
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [multiply(screen.height, 0.08), 0],
+      outputRange: [screen.height * 0.08, 0],
     }),
     inverted
   );
 
-  const opacity = cond(
+  const opacity = conditional(
     closing,
     current.progress,
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 0.5, 0.9, 1],
       outputRange: [0, 0.25, 0.7, 1],
     })
@@ -194,7 +195,7 @@ export function forRevealFromBottomAndroid({
   layouts: { screen },
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const containerTranslateY = multiply(
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [screen.height, 0],
     }),
@@ -202,24 +203,24 @@ export function forRevealFromBottomAndroid({
   );
 
   const cardTranslateYFocused = multiply(
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [multiply(screen.height, 95.9 / 100, -1), 0],
+      outputRange: [screen.height * (95.9 / 100) * -1, 0],
     }),
     inverted
   );
 
   const cardTranslateYUnfocused = next
     ? multiply(
-        interpolate(next.progress, {
+        next.progress.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, multiply(screen.height, 2 / 100, -1)],
+          outputRange: [0, screen.height * (2 / 100) * -1],
         }),
         inverted
       )
     : 0;
 
-  const overlayOpacity = interpolate(current.progress, {
+  const overlayOpacity = current.progress.interpolate({
     inputRange: [0, 0.36, 1],
     outputRange: [0, 0.1, 0.1],
   });
@@ -249,18 +250,18 @@ export function forScaleFromCenterAndroid({
 }: StackCardInterpolationProps): StackCardInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
 
-  const opacity = interpolate(progress, {
+  const opacity = progress.interpolate({
     inputRange: [0, 0.8, 1, 1.2, 2],
     outputRange: [0, 0.5, 1, 0.33, 0],
   });
 
-  const scale = cond(
+  const scale = conditional(
     closing,
-    interpolate(current.progress, {
+    current.progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0.9, 1],
     }),
-    interpolate(progress, {
+    progress.interpolate({
       inputRange: [0, 1, 2],
       outputRange: [0.85, 1, 1.1],
     })

packages/stack/src/TransitionConfigs/HeaderStyleInterpolators.tsx

@@ -1,11 +1,10 @@
-import { I18nManager } from 'react-native';
+import { Animated, I18nManager } from 'react-native';
-import Animated from 'react-native-reanimated';
 import {
   StackHeaderInterpolationProps,
   StackHeaderInterpolatedStyle,
 } from '../types';
 
-const { interpolate, add } = Animated;
+const { add } = Animated;
 
 /**
  * Standard UIKit style animation for the header where the title fades into the back button label.
@@ -38,7 +37,7 @@ export function forUIKit({
 
   return {
     leftButtonStyle: {
-      opacity: interpolate(progress, {
+      opacity: progress.interpolate({
         inputRange: [0.3, 1, 1.5],
         outputRange: [0, 1, 0],
       }),
@@ -46,7 +45,7 @@ export function forUIKit({
     leftLabelStyle: {
       transform: [
         {
-          translateX: interpolate(progress, {
+          translateX: progress.interpolate({
             inputRange: [0, 1, 2],
             outputRange: I18nManager.isRTL
               ? [-rightOffset, 0, leftLabelOffset]
@@ -56,19 +55,19 @@ export function forUIKit({
       ],
     },
     rightButtonStyle: {
-      opacity: interpolate(progress, {
+      opacity: progress.interpolate({
         inputRange: [0.3, 1, 1.5],
         outputRange: [0, 1, 0],
       }),
     },
     titleStyle: {
-      opacity: interpolate(progress, {
+      opacity: progress.interpolate({
         inputRange: [0, 0.4, 1, 1.5],
         outputRange: [0, 0.1, 1, 0],
       }),
       transform: [
         {
-          translateX: interpolate(progress, {
+          translateX: progress.interpolate({
             inputRange: [0.5, 1, 2],
             outputRange: I18nManager.isRTL
               ? [-titleLeftOffset, 0, rightOffset]
@@ -80,7 +79,7 @@ export function forUIKit({
     backgroundStyle: {
       transform: [
         {
-          translateX: interpolate(progress, {
+          translateX: progress.interpolate({
             inputRange: [0, 1, 2],
             outputRange: I18nManager.isRTL
               ? [-layouts.screen.width, 0, layouts.screen.width]
@@ -100,7 +99,7 @@ export function forFade({
   next,
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
-  const opacity = interpolate(progress, {
+  const opacity = progress.interpolate({
     inputRange: [0, 1, 2],
     outputRange: [0, 1, 0],
   });
@@ -110,7 +109,7 @@ export function forFade({
     rightButtonStyle: { opacity },
     titleStyle: { opacity },
     backgroundStyle: {
-      opacity: interpolate(progress, {
+      opacity: progress.interpolate({
         inputRange: [0, 1, 1.9, 2],
         outputRange: [0, 1, 1, 0],
       }),
@@ -127,7 +126,7 @@ export function forStatic({
   layouts: { screen },
 }: StackHeaderInterpolationProps): StackHeaderInterpolatedStyle {
   const progress = add(current.progress, next ? next.progress : 0);
-  const translateX = interpolate(progress, {
+  const translateX = progress.interpolate({
     inputRange: [0, 1, 2],
     outputRange: I18nManager.isRTL
       ? [-screen.width, 0, screen.width]

packages/stack/src/TransitionConfigs/TransitionSpecs.tsx

@@ -1,4 +1,4 @@
-import { Easing } from 'react-native-reanimated';
+import { Easing } from 'react-native';
 import { TransitionSpec } from '../types';
 
 /**

packages/stack/src/index.tsx

@@ -9,7 +9,9 @@ import * as TransitionPresets from './TransitionConfigs/TransitionPresets';
 export { default as createStackNavigator } from './navigators/createStackNavigator';
 
 export const Assets = [
+  // eslint-disable-next-line import/no-commonjs
   require('./views/assets/back-icon.png'),
+  // eslint-disable-next-line import/no-commonjs
   require('./views/assets/back-icon-mask.png'),
 ];
 
@@ -34,8 +36,13 @@ export {
 /**
  * Utilities
  */
-export { default as StackGestureContext } from './utils/StackGestureContext';
+export { default as CardAnimationContext } from './utils/CardAnimationContext';
-export { default as StackCardAnimationContext } from './utils/StackCardAnimationContext';
+export { default as HeaderHeightContext } from './utils/HeaderHeightContext';
+export { default as GestureHandlerRefContext } from './utils/GestureHandlerRefContext';
+
+export { default as useCardAnimation } from './utils/useCardAnimation';
+export { default as useHeaderHeight } from './utils/useHeaderHeight';
+export { default as useGestureHandlerRef } from './utils/useGestureHandlerRef';
 
 /**
  * Types

packages/stack/src/types.tsx

@@ -1,10 +1,11 @@
 import {
+  Animated,
+  EasingFunction,
   StyleProp,
   TextStyle,
   ViewStyle,
   LayoutChangeEvent,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import {
   NavigationProp,
@@ -88,22 +89,24 @@ export type Scene<T> = {
     /**
      * Progress value of the current screen.
      */
-    current: Animated.Node<number>;
+    current: Animated.AnimatedInterpolation;
     /**
      * Progress value for the screen after this one in the stack.
      * This can be `undefined` in case the screen animating is the last one.
      */
-    next?: Animated.Node<number>;
+    next?: Animated.AnimatedInterpolation;
     /**
      * Progress value for the screen before this one in the stack.
      * This can be `undefined` in case the screen animating is the first one.
      */
-    previous?: Animated.Node<number>;
+    previous?: Animated.AnimatedInterpolation;
   };
 };
 
 export type StackHeaderMode = 'float' | 'screen' | 'none';
 
+export type StackCardMode = 'card' | 'modal';
+
 export type StackHeaderOptions = {
   /**
    * String or a function that returns a React Element to be used by the header.
@@ -202,6 +205,12 @@ export type StackHeaderOptions = {
    * This is useful if you want to render a semi-transparent header or a blurred background.
    */
   headerTransparent?: boolean;
+  /**
+   * Extra padding to add at the top of header to account for translucent status bar.
+   * By default, it uses the top value from the safe area insets of the device.
+   * Pass 0 or a custom value to disable the default behaviour, and customize the height.
+   */
+  headerStatusBarHeight?: number;
 };
 
 export type StackHeaderProps = {
@@ -322,7 +331,7 @@ export type StackNavigationOptions = StackHeaderOptions &
   };
 
 export type StackNavigationConfig = {
-  mode?: 'card' | 'modal';
+  mode?: StackCardMode;
   headerMode?: StackHeaderMode;
   /**
    * If `false`, the keyboard will NOT automatically dismiss when navigating to a new screen.
@@ -433,7 +442,7 @@ export type SpringConfig = {
 
 export type TimingConfig = {
   duration: number;
-  easing: Animated.EasingFunction;
+  easing: EasingFunction;
 };
 
 export type TransitionSpec =
@@ -448,7 +457,7 @@ export type StackCardInterpolationProps = {
     /**
      * Animated node representing the progress value of the current screen.
      */
-    progress: Animated.Node<number>;
+    progress: Animated.AnimatedInterpolation;
   };
   /**
    * Values for the current screen the screen after this one in the stack.
@@ -458,24 +467,24 @@ export type StackCardInterpolationProps = {
     /**
      * Animated node representing the progress value of the next screen.
      */
-    progress: Animated.Node<number>;
+    progress: Animated.AnimatedInterpolation;
   };
   /**
    * The index of the card in the stack.
    */
   index: number;
   /**
-   * Animated node representing whether the card is closing.
+   * Animated node representing whether the card is closing (1 - closing, 0 - not closing).
    */
-  closing: Animated.Node<0 | 1>;
+  closing: Animated.AnimatedInterpolation;
   /**
-   * Animated node representing whether the card is being swiped.
+   * Animated node representing whether the card is being swiped (1 - swiping, 0 - not swiping).
    */
-  swiping: Animated.Node<0 | 1>;
+  swiping: Animated.AnimatedInterpolation;
   /**
-   * Animated node representing multiplier when direction is inverted.
+   * Animated node representing multiplier when direction is inverted (-1 - inverted, 1 - normal).
    */
-  inverted: Animated.Node<-1 | 1>;
+  inverted: Animated.AnimatedInterpolation;
   /**
    * Layout measurements for various items we use for animation.
    */
@@ -527,7 +536,7 @@ export type StackHeaderInterpolationProps = {
     /**
      * Animated node representing the progress value of the current screen.
      */
-    progress: Animated.Node<number>;
+    progress: Animated.AnimatedInterpolation;
   };
   /**
    * Values for the current screen the screen after this one in the stack.
@@ -537,7 +546,7 @@ export type StackHeaderInterpolationProps = {
     /**
      * Animated node representing the progress value of the next screen.
      */
-    progress: Animated.Node<number>;
+    progress: Animated.AnimatedInterpolation;
   };
   /**
    * Layout measurements for various items we use for animation.

packages/stack/src/utils/HeaderHeightContext.tsx

@@ -0,0 +1,3 @@
+import * as React from 'react';
+
+export default React.createContext<number | undefined>(undefined);

packages/stack/src/utils/conditional.tsx

@@ -0,0 +1,33 @@
+import { Animated } from 'react-native';
+
+const { add, multiply } = Animated;
+
+/**
+ * Use an Animated Node based on a condition. Similar to Reanimated's `cond`.
+ *
+ * @param condition Animated Node representing the condition, must be 0 or 1, 1 means `true`, 0 means `false`
+ * @param main Animated Node to use if the condition is `true`
+ * @param fallback Animated Node to use if the condition is `false`
+ */
+export default function conditional(
+  condition: Animated.AnimatedInterpolation,
+  main: Animated.AnimatedInterpolation,
+  fallback: Animated.AnimatedInterpolation
+) {
+  // To implement this behavior, we multiply the main node with the condition.
+  // So if condition is 0, result will be 0, and if condition is 1, result will be main node.
+  // Then we multiple reverse of the condition (0 if condition is 1) with the fallback.
+  // So if condition is 0, result will be fallback node, and if condition is 1, result will be 0,
+  // This way, one of them will always be 0, and other one will be the value we need.
+  // In the end we add them both together, 0 + value we need = value we need
+  return add(
+    multiply(condition, main),
+    multiply(
+      condition.interpolate({
+        inputRange: [0, 1],
+        outputRange: [1, 0],
+      }),
+      fallback
+    )
+  );
+}

packages/stack/src/utils/getDistanceForDirection.tsx

@@ -0,0 +1,18 @@
+import getInvertedMultiplier from './getInvertedMultiplier';
+import { GestureDirection, Layout } from '../types';
+
+export default function getDistanceForDirection(
+  layout: Layout,
+  gestureDirection: GestureDirection
+): number {
+  const multiplier = getInvertedMultiplier(gestureDirection);
+
+  switch (gestureDirection) {
+    case 'vertical':
+    case 'vertical-inverted':
+      return layout.height * multiplier;
+    case 'horizontal':
+    case 'horizontal-inverted':
+      return layout.width * multiplier;
+  }
+}

packages/stack/src/utils/getInvertedMultiplier.tsx

@@ -0,0 +1,17 @@
+import { I18nManager } from 'react-native';
+import { GestureDirection } from '../types';
+
+export default function getInvertedMultiplier(
+  gestureDirection: GestureDirection
+): 1 | -1 {
+  switch (gestureDirection) {
+    case 'vertical':
+      return 1;
+    case 'vertical-inverted':
+      return -1;
+    case 'horizontal':
+      return I18nManager.isRTL ? -1 : 1;
+    case 'horizontal-inverted':
+      return I18nManager.isRTL ? 1 : -1;
+  }
+}

packages/stack/src/utils/memoize.tsx

@@ -1,4 +1,4 @@
-export default function memoize<Result, Deps extends ReadonlyArray<any>>(
+export default function memoize<Result, Deps extends readonly any[]>(
   callback: (...deps: Deps) => Result
 ) {
   let previous: Deps | undefined;

packages/stack/src/utils/useCardAnimation.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import CardAnimationContext from './CardAnimationContext';
+
+export default function useCardAnimation() {
+  const animation = React.useContext(CardAnimationContext);
+
+  if (animation === undefined) {
+    throw new Error(
+      "Couldn't find values for card animation. Are you inside a screen in Stack?"
+    );
+  }
+
+  return animation;
+}

packages/stack/src/utils/useGestureHandlerRef.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import StackGestureRefContext from './GestureHandlerRefContext';
+
+export default function useGestureHandlerRef() {
+  const ref = React.useContext(StackGestureRefContext);
+
+  if (ref === undefined) {
+    throw new Error(
+      "Couldn't find a ref for gesture handler. Are you inside a screen in Stack?"
+    );
+  }
+
+  return ref;
+}

packages/stack/src/utils/useHeaderHeight.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import HeaderHeightContext from './HeaderHeightContext';
+
+export default function useFloatingHeaderHeight() {
+  const height = React.useContext(HeaderHeightContext);
+
+  if (height === undefined) {
+    throw new Error(
+      "Couldn't find the header height. Are you inside a screen in Stack?"
+    );
+  }
+
+  return height;
+}

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  Animated,
   I18nManager,
   Image,
   View,
@@ -7,7 +8,6 @@ import {
   StyleSheet,
   LayoutChangeEvent,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { useTheme } from '@react-navigation/native';
 import MaskedView from '../MaskedView';
 import TouchableItem from '../TouchableItem';
@@ -52,7 +52,7 @@ export default function HeaderBackButton({
       : 'rgba(0, 0, 0, .32)';
 
   const handleLabelLayout = (e: LayoutChangeEvent) => {
-    onLabelLayout && onLabelLayout(e);
+    onLabelLayout?.(e);
 
     setInitialLabelWidth(e.nativeEvent.layout.x + e.nativeEvent.layout.width);
   };

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, Platform, ViewProps } from 'react-native';
+import { Animated, StyleSheet, Platform, ViewProps } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { useTheme } from '@react-navigation/native';
 
 export default function HeaderBackground({ style, ...rest }: ViewProps) {

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

@@ -21,7 +21,7 @@ export type Props = {
   mode: 'float' | 'screen';
   layout: Layout;
   insets: EdgeInsets;
-  scenes: Array<Scene<Route<string>> | undefined>;
+  scenes: (Scene<Route<string>> | undefined)[];
   state: StackNavigationState;
   getPreviousRoute: (props: {
     route: Route<string>;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import {
+  Animated,
   View,
   StyleSheet,
   LayoutChangeEvent,
   Platform,
   ViewStyle,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
 import { EdgeInsets } from 'react-native-safe-area-context';
 import { Route } from '@react-navigation/native';
 import HeaderBackButton from './HeaderBackButton';
@@ -53,7 +53,10 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
   });
 };
 
-export const getDefaultHeaderHeight = (layout: Layout, insets: EdgeInsets) => {
+export const getDefaultHeaderHeight = (
+  layout: Layout,
+  statusBarHeight: number
+) => {
   const isLandscape = layout.width > layout.height;
 
   let headerHeight;
@@ -71,7 +74,7 @@ export const getDefaultHeaderHeight = (layout: Layout, insets: EdgeInsets) => {
     headerHeight = 64;
   }
 
-  return headerHeight + insets.top;
+  return headerHeight + statusBarHeight;
 };
 
 export default class HeaderSegment extends React.Component<Props, State> {
@@ -114,8 +117,8 @@ export default class HeaderSegment extends React.Component<Props, State> {
     (
       styleInterpolator: StackHeaderStyleInterpolator,
       layout: Layout,
-      current: Animated.Node<number>,
+      current: Animated.AnimatedInterpolation,
-      next: Animated.Node<number> | undefined,
+      next: Animated.AnimatedInterpolation | undefined,
       titleLayout: Layout | undefined,
       leftLabelLayout: Layout | undefined
     ) =>
@@ -163,6 +166,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       headerRightContainerStyle: rightContainerStyle,
       headerTitleContainerStyle: titleContainerStyle,
       headerStyle: customHeaderStyle,
+      headerStatusBarHeight = insets.top,
       styleInterpolator,
     } = this.props;
 
@@ -184,7 +188,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
     );
 
     const {
-      height = getDefaultHeaderHeight(layout, insets),
+      height = getDefaultHeaderHeight(layout, headerStatusBarHeight),
       minHeight,
       maxHeight,
       backgroundColor,
@@ -272,6 +276,7 @@ export default class HeaderSegment extends React.Component<Props, State> {
       // @ts-ignore
       if (safeStyles[styleProp] === undefined) {
         // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete safeStyles[styleProp];
       }
     }
@@ -310,7 +315,10 @@ export default class HeaderSegment extends React.Component<Props, State> {
           pointerEvents="box-none"
           style={[{ height, minHeight, maxHeight, opacity, transform }]}
         >
-          <View pointerEvents="none" style={{ height: insets.top }} />
+          <View
+            pointerEvents="none"
+            style={{ height: headerStatusBarHeight }}
+          />
           <View pointerEvents="box-none" style={styles.content}>
             {leftButton ? (
               <Animated.View