wip

.eslintrc.json

@@ -8,6 +8,7 @@
       "@react-navigation/routers",
       "@react-navigation/compat",
       "@react-navigation/stack",
+      "@react-navigation/web-stack",
       "@react-navigation/drawer",
       "@react-navigation/bottom-tabs",
       "@react-navigation/material-top-tabs",

example/src/AsyncStorage.native.tsx

@@ -1,3 +0,0 @@
-import { AsyncStorage } from 'react-native';
-
-export default AsyncStorage;

example/src/AsyncStorage.tsx

@@ -1,14 +0,0 @@
-export default {
-  getItem(key: string) {
-    return Promise.resolve(localStorage.getItem(key));
-  },
-  setItem(key: string, value: string) {
-    return Promise.resolve(localStorage.setItem(key, value));
-  },
-  removeItem(key: string) {
-    return Promise.resolve(localStorage.removeItem(key));
-  },
-  clear() {
-    return Promise.resolve(localStorage.clear());
-  },
-};

example/src/Screens/CompatAPI.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, ScrollView, StyleSheet, Platform } from 'react-native';
+import { View, ScrollView, StyleSheet } from 'react-native';
 import { Button } from 'react-native-paper';
 import {
   createCompatNavigatorFactory,
@@ -23,8 +23,6 @@ type NestedStackParams = {
   Article: { author: string };
 };
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const AlbumsScreen: CompatScreenType<StackNavigationProp<
   CompatStackParams
 >> = ({ navigation }) => {
@@ -46,7 +44,7 @@ const AlbumsScreen: CompatScreenType<StackNavigationProp<
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -72,7 +70,7 @@ const FeedScreen: CompatScreenType<StackNavigationProp<NestedStackParams>> = ({
           Go back
         </Button>
       </View>
-      <NewsFeed scrollEnabled={scrollEnabled} />
+      <NewsFeed scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -102,7 +100,7 @@ const ArticleScreen: CompatScreenType<StackNavigationProp<
       </View>
       <Article
         author={{ name: navigation.getParam('author') }}
-        scrollEnabled={scrollEnabled}
+        scrollEnabled={false}
       />
     </ScrollView>
   );

example/src/Screens/LinkComponent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import {
   Link,
@@ -22,24 +22,13 @@ type SimpleStackParams = {
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const LinkButton = ({
   to,
   ...rest
 }: React.ComponentProps<typeof Button> & { to: string }) => {
-  const { onPress, ...props } = useLinkProps({ to });
+  const props = useLinkProps({ to });
 
-  return (
-    <Button
-      {...props}
-      {...rest}
-      {...Platform.select({
-        web: { onClick: onPress } as any,
-        default: { onPress },
-      })}
-    />
-  );
+  return <Button {...props} {...rest} />;
 };
 
 const ArticleScreen = ({
@@ -80,10 +69,7 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -117,7 +103,7 @@ const AlbumsScreen = ({
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };

example/src/Screens/ModalPresentationStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -17,8 +17,6 @@ type ModalStackParams = {
 
 type ModalStackNavigation = StackNavigationProp<ModalStackParams>;
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const ArticleScreen = ({
   navigation,
   route,
@@ -44,10 +42,7 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -71,7 +66,7 @@ const AlbumsScreen = ({ navigation }: { navigation: ModalStackNavigation }) => {
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };

example/src/Screens/SimpleStack.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, Platform, StyleSheet, ScrollView } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button } from 'react-native-paper';
 import { RouteProp, ParamListBase } from '@react-navigation/native';
 import {
@@ -18,8 +18,6 @@ type SimpleStackParams = {
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const ArticleScreen = ({
   navigation,
   route,
@@ -45,10 +43,7 @@ const ArticleScreen = ({
           Pop screen
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -76,7 +71,7 @@ const NewsFeedScreen = ({
           Go back
         </Button>
       </View>
-      <NewsFeed scrollEnabled={scrollEnabled} />
+      <NewsFeed scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -104,7 +99,7 @@ const AlbumsScreen = ({
           Pop by 2
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };

example/src/Screens/StackHeaderCustomization.tsx

@@ -20,8 +20,6 @@ type SimpleStackParams = {
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const ArticleScreen = ({
   navigation,
   route,
@@ -47,10 +45,7 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };
@@ -80,7 +75,7 @@ const AlbumsScreen = ({
           Go back
         </Button>
       </View>
-      <Albums scrollEnabled={scrollEnabled} />
+      <Albums scrollEnabled={false} />
     </ScrollView>
   );
 };

example/src/Screens/StackTransparent.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { View, StyleSheet, ScrollView, Platform } from 'react-native';
+import { View, StyleSheet, ScrollView } from 'react-native';
 import { Button, Paragraph } from 'react-native-paper';
 import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
 import {
@@ -15,8 +15,6 @@ type SimpleStackParams = {
 
 type SimpleStackNavigation = StackNavigationProp<SimpleStackParams>;
 
-const scrollEnabled = Platform.select({ web: true, default: false });
-
 const ArticleScreen = ({
   navigation,
   route,
@@ -42,10 +40,7 @@ const ArticleScreen = ({
           Go back
         </Button>
       </View>
-      <Article
-        author={{ name: route.params.author }}
-        scrollEnabled={scrollEnabled}
-      />
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
     </ScrollView>
   );
 };

example/src/Screens/WebStack.native.tsx

@@ -0,0 +1,3 @@
+export default function WebStack() {
+  return null;
+}

example/src/Screens/WebStack.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { Button } from 'react-native-paper';
+import { RouteProp, ParamListBase } from '@react-navigation/native';
+import {
+  createWebStackNavigator,
+  WebStackNavigationProp,
+} from '@react-navigation/web-stack';
+import Article from '../Shared/Article';
+import Albums from '../Shared/Albums';
+import NewsFeed from '../Shared/NewsFeed';
+
+type WebStackParams = {
+  Article: { author: string };
+  NewsFeed: undefined;
+  Album: undefined;
+};
+
+type WebStackNavigation = WebStackNavigationProp<WebStackParams>;
+
+const ArticleScreen = ({
+  navigation,
+  route,
+}: {
+  navigation: WebStackNavigation;
+  route: RouteProp<WebStackParams, 'Article'>;
+}) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.replace('NewsFeed')}
+          style={styles.button}
+        >
+          Replace with feed
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop()}
+          style={styles.button}
+        >
+          Pop screen
+        </Button>
+      </View>
+      <Article author={{ name: route.params.author }} scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const NewsFeedScreen = ({ navigation }: { navigation: WebStackNavigation }) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.navigate('Album')}
+          style={styles.button}
+        >
+          Navigate to album
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.goBack()}
+          style={styles.button}
+        >
+          Go back
+        </Button>
+      </View>
+      <NewsFeed scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const AlbumsScreen = ({ navigation }: { navigation: WebStackNavigation }) => {
+  return (
+    <ScrollView>
+      <View style={styles.buttons}>
+        <Button
+          mode="contained"
+          onPress={() => navigation.push('Article', { author: 'Babel fish' })}
+          style={styles.button}
+        >
+          Push article
+        </Button>
+        <Button
+          mode="outlined"
+          onPress={() => navigation.pop(2)}
+          style={styles.button}
+        >
+          Pop by 2
+        </Button>
+      </View>
+      <Albums scrollEnabled={false} />
+    </ScrollView>
+  );
+};
+
+const WebStack = createWebStackNavigator<WebStackParams>();
+
+type Props = Partial<React.ComponentProps<typeof WebStack.Navigator>> & {
+  navigation: WebStackNavigationProp<ParamListBase>;
+};
+
+export default function WebStackScreen({ navigation, ...rest }: Props) {
+  navigation.setOptions({
+    headerShown: false,
+  });
+
+  return (
+    <WebStack.Navigator {...rest}>
+      <WebStack.Screen
+        name="Article"
+        component={ArticleScreen}
+        options={({ route }) => ({
+          title: `Article by ${route.params.author}`,
+        })}
+        initialParams={{ author: 'Gandalf' }}
+      />
+      <WebStack.Screen
+        name="NewsFeed"
+        component={NewsFeedScreen}
+        options={{ title: 'Feed' }}
+      />
+      <WebStack.Screen
+        name="Album"
+        component={AlbumsScreen}
+        options={{ title: 'Album' }}
+      />
+    </WebStack.Navigator>
+  );
+}
+
+const styles = StyleSheet.create({
+  buttons: {
+    flexDirection: 'row',
+    padding: 8,
+  },
+  button: {
+    margin: 8,
+  },
+});

example/src/index.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   ScrollView,
+  AsyncStorage,
   YellowBox,
   Platform,
   StatusBar,
@@ -41,9 +42,9 @@ import {
   HeaderStyleInterpolators,
 } from '@react-navigation/stack';
 
-import AsyncStorage from './AsyncStorage';
 import LinkingPrefixes from './LinkingPrefixes';
 import SettingsItem from './Shared/SettingsItem';
+import WebStack from './Screens/WebStack';
 import SimpleStack from './Screens/SimpleStack';
 import ModalPresentationStack from './Screens/ModalPresentationStack';
 import StackTransparent from './Screens/StackTransparent';
@@ -76,6 +77,11 @@ type RootStackParamList = {
 };
 
 const SCREENS = {
+  ...(Platform.OS === 'web'
+    ? {
+        WebStack: { title: 'Web Stack', component: WebStack },
+      }
+    : null),
   SimpleStack: { title: 'Simple Stack', component: SimpleStack },
   ModalPresentationStack: {
     title: 'Modal Presentation Stack',

example/web/_redirects

@@ -1 +0,0 @@
-/*    /index.html   200

packages/bottom-tabs/CHANGELOG.md

@@ -3,18 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.3.0](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.8...@react-navigation/bottom-tabs@5.3.0) (2020-04-30)
-
-
-### Features
-
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/commit/942d2be2c72720469475ce12ec8df23825994dbf))
-
-
-
-
-
 ## [5.2.8](https://github.com/react-navigation/react-navigation/tree/master/packages/bottom-tabs/compare/@react-navigation/bottom-tabs@5.2.7...@react-navigation/bottom-tabs@5.2.8) (2020-04-27)
 
 **Note:** Version bump only for package @react-navigation/bottom-tabs

packages/bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/bottom-tabs",
   "description": "Bottom tab navigator following iOS design guidelines",
-  "version": "5.3.0",
+  "version": "5.2.8",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",

packages/compat/CHANGELOG.md

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

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.1.11",
+  "version": "5.1.10",
   "license": "MIT",
   "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/compat",
   "bugs": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/react": "^16.9.23",
     "react": "~16.9.0",
     "typescript": "^3.8.3"

packages/core/CHANGELOG.md

@@ -3,23 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.4.0](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.5...@react-navigation/core@5.4.0) (2020-04-30)
-
-
-### Bug Fixes
-
-* handle empty paths when parsing ([c3fa83e](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/c3fa83efe0d73db76365f8be3d6a8ca1d1289b71))
-* parsing url ([bd35b4f](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/bd35b4fc202c3868fb75c3675b62de67557089e1))
-
-
-### Features
-
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/core/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-
-
-
-
-
 ## [5.3.5](https://github.com/react-navigation/react-navigation/tree/master/packages/core/compare/@react-navigation/core@5.3.4...@react-navigation/core@5.3.5) (2020-04-27)
 
 

packages/core/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "5.4.0",
+  "version": "5.3.5",
   "keywords": [
     "react",
     "react-native",
@@ -29,7 +29,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^5.4.2",
+    "@react-navigation/routers": "^5.4.1",
     "escape-string-regexp": "^2.0.0",
     "nanoid": "^3.0.2",
     "query-string": "^6.12.0",

packages/core/src/BaseNavigationContainer.tsx

@@ -219,8 +219,6 @@ const BaseNavigationContainer = React.forwardRef(
       dispatch,
       canGoBack,
       getRootState,
-      dangerouslyGetState: () => state,
-      dangerouslyGetParent: () => undefined,
     }));
 
     const builderContext = React.useMemo(

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

@@ -426,49 +426,6 @@ it('ignores empty string paths', () => {
   expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
 });
 
-it('keeps query params if path is empty', () => {
-  const path = '/?foo=42';
-  const config = {
-    Foo: {
-      screens: {
-        Foe: 'foe',
-        Bar: {
-          screens: {
-            Qux: {
-              path: '',
-              parse: { foo: Number },
-            },
-            Baz: 'baz',
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foo',
-        state: {
-          routes: [
-            {
-              name: 'Bar',
-              state: {
-                routes: [{ name: 'Qux', params: { foo: 42 } }],
-              },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getPathFromState(state, config)).toBe(path);
-  expect(getPathFromState(getStateFromPath(path, config), config)).toEqual(
-    path
-  );
-});
-
 it('cuts nested configs too', () => {
   const path = '/baz';
   const config = {
@@ -538,8 +495,6 @@ it('handles empty path at the end', () => {
 });
 
 it('returns "/" for empty path', () => {
-  const path = '/';
-
   const config = {
     Foo: {
       path: '',
@@ -564,8 +519,7 @@ it('returns "/" for empty path', () => {
     ],
   };
 
-  expect(getPathFromState(state, config)).toBe(path);
-  expect(getPathFromState(getStateFromPath(path, config), config)).toBe(path);
+  expect(getPathFromState(state, config)).toBe('/');
 });
 
 it('parses no path specified', () => {

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

@@ -677,7 +677,7 @@ it('accepts initialRouteName without config for it', () => {
   );
 });
 
-it('returns undefined if path is empty and no matching screen is present', () => {
+it('returns undefined if path is empty', () => {
   const config = {
     Foo: {
       screens: {
@@ -695,292 +695,3 @@ it('returns undefined if path is empty and no matching screen is present', () =>
 
   expect(getStateFromPath(path, config)).toEqual(undefined);
 });
-
-it('returns matching screen if path is empty', () => {
-  const path = '';
-  const config = {
-    Foo: {
-      screens: {
-        Foe: 'foe',
-        Bar: {
-          screens: {
-            Qux: '',
-            Baz: 'baz',
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foo',
-        state: {
-          routes: [
-            {
-              name: 'Bar',
-              state: {
-                routes: [{ name: 'Qux' }],
-              },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});
-
-it('returns matching screen with params if path is empty', () => {
-  const path = '?foo=42';
-  const config = {
-    Foo: {
-      screens: {
-        Foe: 'foe',
-        Bar: {
-          screens: {
-            Qux: {
-              path: '',
-              parse: { foo: Number },
-            },
-            Baz: 'baz',
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foo',
-        state: {
-          routes: [
-            {
-              name: 'Bar',
-              state: {
-                routes: [{ name: 'Qux', params: { foo: 42 } }],
-              },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});
-
-it("doesn't match nested screen if path is empty", () => {
-  const config = {
-    Foo: {
-      screens: {
-        Foe: 'foe',
-        Bar: {
-          path: 'bar',
-          screens: {
-            Qux: {
-              path: '',
-              parse: { foo: Number },
-            },
-          },
-        },
-      },
-    },
-  };
-
-  const path = '';
-
-  expect(getStateFromPath(path, config)).toEqual(undefined);
-});
-
-it('chooses more exhaustive pattern', () => {
-  const path = '/foo/5';
-
-  const config = {
-    Foe: {
-      path: '/',
-      initialRouteName: 'Foo',
-      screens: {
-        Foo: 'foo',
-        Bis: {
-          path: 'foo/:id',
-          parse: {
-            id: Number,
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foe',
-        state: {
-          index: 1,
-          routes: [
-            {
-              name: 'Foo',
-            },
-            {
-              name: 'Bis',
-              params: { id: 5 },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});
-
-it('handles same paths beginnings', () => {
-  const path = '/foos';
-
-  const config = {
-    Foe: {
-      path: '/',
-      initialRouteName: 'Foo',
-      screens: {
-        Foo: 'foo',
-        Bis: {
-          path: 'foos',
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foe',
-        state: {
-          index: 1,
-          routes: [
-            {
-              name: 'Foo',
-            },
-            {
-              name: 'Bis',
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});
-
-it('handles same paths beginnings with params', () => {
-  const path = '/foos/5';
-
-  const config = {
-    Foe: {
-      path: '/',
-      initialRouteName: 'Foo',
-      screens: {
-        Foo: 'foo',
-        Bis: {
-          path: 'foos/:id',
-          parse: {
-            id: Number,
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foe',
-        state: {
-          index: 1,
-          routes: [
-            {
-              name: 'Foo',
-            },
-            {
-              name: 'Bis',
-              params: { id: 5 },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});
-
-it('handles not taking path with too many segments', () => {
-  const path = '/foos/5';
-
-  const config = {
-    Foe: {
-      path: '/',
-      initialRouteName: 'Foo',
-      screens: {
-        Foo: 'foo',
-        Bis: {
-          path: 'foos/:id',
-          parse: {
-            id: Number,
-          },
-        },
-        Bas: {
-          path: 'foos/:id/:nip',
-          parse: {
-            id: Number,
-            pwd: Number,
-          },
-        },
-      },
-    },
-  };
-
-  const state = {
-    routes: [
-      {
-        name: 'Foe',
-        state: {
-          index: 1,
-          routes: [
-            {
-              name: 'Foo',
-            },
-            {
-              name: 'Bis',
-              params: { id: 5 },
-            },
-          ],
-        },
-      },
-    ],
-  };
-
-  expect(getStateFromPath(path, config)).toEqual(state);
-  expect(getStateFromPath(getPathFromState(state, config), config)).toEqual(
-    state
-  );
-});

packages/core/src/getPathFromState.tsx

@@ -115,66 +115,70 @@ export default function getPathFromState(
       pattern = nestedRouteNames.substring(1);
     }
 
-    const config =
-      currentOptions[route.name] !== undefined
-        ? (currentOptions[route.name] as { stringify?: StringifyConfig })
-            .stringify
+    // we don't add empty path strings to path
+    if (pattern !== '') {
+      const config =
+        currentOptions[route.name] !== undefined
+          ? (currentOptions[route.name] as { stringify?: StringifyConfig })
+              .stringify
+          : undefined;
+
+      const params = route.params
+        ? // Stringify all of the param values before we use them
+          Object.entries(route.params).reduce<{
+            [key: string]: string;
+          }>((acc, [key, value]) => {
+            acc[key] = config?.[key] ? config[key](value) : String(value);
+            return acc;
+          }, {})
         : undefined;
 
-    const params = route.params
-      ? // Stringify all of the param values before we use them
-        Object.entries(route.params).reduce<{
-          [key: string]: string;
-        }>((acc, [key, value]) => {
-          acc[key] = config?.[key] ? config[key](value) : String(value);
-          return acc;
-        }, {})
-      : undefined;
+      if (currentOptions[route.name] !== undefined) {
+        path += pattern
+          .split('/')
+          .map((p) => {
+            const name = p.replace(/^:/, '');
 
-    if (currentOptions[route.name] !== undefined) {
-      path += pattern
-        .split('/')
-        .map((p) => {
-          const name = p.replace(/^:/, '');
+            // If the path has a pattern for a param, put the param in the path
+            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);
+            }
 
-          // If the path has a pattern for a param, put the param in the path
-          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);
-          }
-
-          return encodeURIComponent(p);
-        })
-        .join('/');
-    } else {
-      path += encodeURIComponent(route.name);
-    }
-
-    if (route.state) {
-      path += '/';
-    } else if (params) {
-      for (let param in params) {
-        if (params[param] === 'undefined') {
-          // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-          delete params[param];
-        }
+            return encodeURIComponent(p);
+          })
+          .join('/');
+      } else {
+        path += encodeURIComponent(route.name);
       }
-      const query = queryString.stringify(params);
 
-      if (query) {
-        path += `?${query}`;
+      if (route.state) {
+        path += '/';
+      } else if (params) {
+        for (let param in params) {
+          if (params[param] === 'undefined') {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            delete params[param];
+          }
+        }
+        const query = queryString.stringify(params);
+
+        if (query) {
+          path += `?${query}`;
+        }
       }
     }
 
     current = route.state;
   }
 
-  // Remove multiple as well as trailing slashes
-  path = path.replace(/\/+/, '/');
-  path = path.length > 1 ? path.replace(/\/$/, '') : path;
+  path =
+    path !== '/' && path.slice(path.length - 1) === '/'
+      ? path.slice(0, -1)
+      : path;
 
   return path;
 }

packages/core/src/getStateFromPath.tsx

@@ -1,3 +1,4 @@
+import escape from 'escape-string-regexp';
 import queryString from 'query-string';
 import {
   NavigationState,
@@ -19,8 +20,7 @@ type Options = {
 };
 
 type RouteConfig = {
-  screen: string;
-  match: string | null;
+  match: RegExp;
   pattern: string;
   routeNames: string[];
   parse: ParseConfig | undefined;
@@ -58,8 +58,10 @@ export default function getStateFromPath(
   path: string,
   options: Options = {}
 ): ResultState | undefined {
+  if (path === '') {
+    return undefined;
+  }
   let initialRoutes: InitialRouteConfig[] = [];
-
   // Create a normalized configs array which will be easier to use
   const configs = ([] as RouteConfig[]).concat(
     ...Object.keys(options).map((key) =>
@@ -67,74 +69,24 @@ export default function getStateFromPath(
     )
   );
 
-  // sort configs so the most exhaustive is always first to be chosen
-  configs.sort(
-    (config1, config2) =>
-      config2.pattern.split('/').length - config1.pattern.split('/').length
-  );
+  let result: PartialState<NavigationState> | undefined;
+  let current: PartialState<NavigationState> | undefined;
 
   let remaining = path
     .replace(/[/]+/, '/') // Replace multiple slash (//) with single ones
     .replace(/^\//, '') // Remove extra leading slash
     .replace(/\?.*/, ''); // Remove query params which we will handle later
 
-  if (remaining === '') {
-    // We need to add special handling of empty path so navigation to empty path also works
-    // When handling empty path, we should only look at the root level config
-    const match = configs.find(
-      (config) =>
-        config.pattern === '' &&
-        config.routeNames.every(
-          // make sure that none of the parent configs have a non-empty path defined
-          (name) => !configs.find((c) => c.screen === name)?.pattern
-        )
-    );
-
-    if (match) {
-      return createNestedStateObject(
-        match.routeNames,
-        initialRoutes,
-        parseQueryParams(path, match.parse)
-      );
-    }
-
-    return undefined;
-  }
-
-  let result: PartialState<NavigationState> | undefined;
-  let current: PartialState<NavigationState> | undefined;
-
   while (remaining) {
     let routeNames: string[] | undefined;
     let params: Record<string, any> | undefined;
 
     // Go through all configs, and see if the next path segment matches our regex
     for (const config of configs) {
-      if (!config.match) {
-        continue;
-      }
+      const match = remaining.match(config.match);
 
-      let didMatch = true;
-      const matchParts = config.match.split('/');
-      const remainingParts = remaining.split('/');
-
-      // we check if remaining path has enough segments to be handled with this pattern
-      if (config.pattern.split('/').length > remainingParts.length) {
-        continue;
-      }
-
-      // we keep info about the index of segment on which the params start
-      let paramsIndex = 0;
-      // the beginning of the remaining path should be the same as the part of config before params
-      for (paramsIndex; paramsIndex < matchParts.length; paramsIndex++) {
-        if (matchParts[paramsIndex] !== remainingParts[paramsIndex]) {
-          didMatch = false;
-          break;
-        }
-      }
-
-      // If the first part of the path matches, we need to extract params from the path
-      if (didMatch) {
+      // If our regex matches, we need to extract params from the path
+      if (match) {
         routeNames = [...config.routeNames];
 
         const paramPatterns = config.pattern
@@ -144,7 +96,8 @@ export default function getStateFromPath(
         if (paramPatterns.length) {
           params = paramPatterns.reduce<Record<string, any>>((acc, p, i) => {
             const key = p.replace(/^:/, '');
-            const value = remainingParts[i + paramsIndex]; // The param segments start from the end of matched part
+            const value = match[i + 1]; // The param segments start from index 1 in the regex match result
+
             acc[key] =
               config.parse && config.parse[key]
                 ? config.parse[key](value)
@@ -154,16 +107,8 @@ export default function getStateFromPath(
           }, {});
         }
 
-        // if pattern and remaining path have same amount of segments, there should be nothing left
-        if (config.pattern.split('/').length === remainingParts.length) {
-          remaining = '';
-        } else {
-          // For each segment of the pattern, remove one segment from remaining path
-          let i = config.pattern.split('/').length;
-          while (i--) {
-            remaining = remaining.substr(remaining.indexOf('/') + 1);
-          }
-        }
+        // Remove the matched segment from the remaining path
+        remaining = remaining.replace(match[0], '');
 
         break;
       }
@@ -178,7 +123,34 @@ export default function getStateFromPath(
       remaining = segments.join('/');
     }
 
-    const state = createNestedStateObject(routeNames, initialRoutes, params);
+    let state: InitialState;
+    let routeName = routeNames.shift() as string;
+    let initialRoute = findInitialRoute(routeName, initialRoutes);
+
+    state = createNestedState(
+      initialRoute,
+      routeName,
+      routeNames.length === 0,
+      params
+    );
+
+    if (routeNames.length > 0) {
+      let nestedState = state;
+
+      while ((routeName = routeNames.shift() as string)) {
+        initialRoute = findInitialRoute(routeName, initialRoutes);
+        nestedState.routes[nestedState.index || 0].state = createNestedState(
+          initialRoute,
+          routeName,
+          routeNames.length === 0,
+          params
+        );
+        if (routeNames.length > 0) {
+          nestedState = nestedState.routes[nestedState.index || 0]
+            .state as InitialState;
+        }
+      }
+    }
 
     if (current) {
       // The state should be nested inside the deepest route we parsed before
@@ -200,13 +172,29 @@ export default function getStateFromPath(
     return undefined;
   }
 
-  const route = findFocusedRoute(current);
-  const params = parseQueryParams(
-    path,
-    findParseConfigForRoute(route.name, configs)
-  );
+  const query = path.split('?')[1];
+
+  if (query) {
+    while (current?.routes[current.index || 0].state) {
+      // The query params apply to the deepest route
+      current = current.routes[current.index || 0].state;
+    }
+
+    const route = (current as PartialState<NavigationState>).routes[
+      current?.index || 0
+    ];
+
+    const params = queryString.parse(query);
+    const parseFunction = findParseConfigForRoute(route.name, configs);
+
+    if (parseFunction) {
+      Object.keys(params).forEach((name) => {
+        if (parseFunction[name] && typeof params[name] === 'string') {
+          params[name] = parseFunction[name](params[name] as string);
+        }
+      });
+    }
 
-  if (params) {
     route.params = { ...route.params, ...params };
   }
 
@@ -227,15 +215,16 @@ function createNormalizedConfigs(
 
   if (typeof value === 'string') {
     // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
-    configs.push(createConfigItem(key, routeNames, value));
+    if (value !== '') {
+      configs.push(createConfigItem(routeNames, value));
+    }
   } else if (typeof value === 'object') {
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
-    if (typeof value.path === 'string') {
-      configs.push(createConfigItem(key, routeNames, value.path, value.parse));
+    if (value.path && value.path !== '') {
+      configs.push(createConfigItem(routeNames, value.path, value.parse));
     }
-
     if (value.screens) {
       // property `initialRouteName` without `screens` has no purpose
       if (value.initialRouteName) {
@@ -262,16 +251,15 @@ function createNormalizedConfigs(
 }
 
 function createConfigItem(
-  screen: string,
   routeNames: string[],
   pattern: string,
   parse?: ParseConfig
 ): RouteConfig {
-  // part being matched ends on the first param
-  const match = pattern !== '' ? pattern.split('/:')[0] : null;
+  const match = new RegExp(
+    '^' + escape(pattern).replace(/:[a-z0-9]+/gi, '([^/]+)') + '/?'
+  );
 
   return {
-    screen,
     match,
     pattern,
     // The routeNames array is mutated, so copy it to keep the current state
@@ -307,9 +295,9 @@ function findInitialRoute(
   return undefined;
 }
 
-// returns state object with values depending on whether
+// returns nested state object with values depending on whether
 // it is the end of state and if there is initialRoute for this level
-function createStateObject(
+function createNestedState(
   initialRoute: string | undefined,
   routeName: string,
   isEmpty: boolean,
@@ -343,73 +331,3 @@ function createStateObject(
     }
   }
 }
-
-function createNestedStateObject(
-  routeNames: string[],
-  initialRoutes: InitialRouteConfig[],
-  params: object | undefined
-) {
-  let state: InitialState;
-  let routeName = routeNames.shift() as string;
-  let initialRoute = findInitialRoute(routeName, initialRoutes);
-
-  state = createStateObject(
-    initialRoute,
-    routeName,
-    routeNames.length === 0,
-    params
-  );
-
-  if (routeNames.length > 0) {
-    let nestedState = state;
-
-    while ((routeName = routeNames.shift() as string)) {
-      initialRoute = findInitialRoute(routeName, initialRoutes);
-      nestedState.routes[nestedState.index || 0].state = createStateObject(
-        initialRoute,
-        routeName,
-        routeNames.length === 0,
-        params
-      );
-      if (routeNames.length > 0) {
-        nestedState = nestedState.routes[nestedState.index || 0]
-          .state as InitialState;
-      }
-    }
-  }
-
-  return state;
-}
-
-function findFocusedRoute(state: InitialState) {
-  let current: InitialState | undefined = state;
-
-  while (current?.routes[current.index || 0].state) {
-    // The query params apply to the deepest route
-    current = current.routes[current.index || 0].state;
-  }
-
-  const route = (current as PartialState<NavigationState>).routes[
-    current?.index || 0
-  ];
-
-  return route;
-}
-
-function parseQueryParams(
-  path: string,
-  parseConfig?: Record<string, (value: string) => any>
-) {
-  const query = path.split('?')[1];
-  const params = queryString.parse(query);
-
-  if (parseConfig) {
-    Object.keys(params).forEach((name) => {
-      if (parseConfig[name] && typeof params[name] === 'string') {
-        params[name] = parseConfig[name](params[name] as string);
-      }
-    });
-  }
-
-  return Object.keys(params).length ? params : undefined;
-}

packages/drawer/CHANGELOG.md

@@ -3,24 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.6.0](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.5.1...@react-navigation/drawer@5.6.0) (2020-04-30)
-
-
-### Bug Fixes
-
-* fix closing drawer on web with tap on overlay ([70be3f6](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/70be3f6d863c56211e2f90bdf743bd8526338248))
-* make sure the address bar hides when scrolling on web ([0a19e94](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/0a19e94b23a4d2b5f22d1d9deb0544f586f475ee))
-
-
-### Features
-
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/commit/942d2be2c72720469475ce12ec8df23825994dbf))
-
-
-
-
-
 ## [5.5.1](https://github.com/react-navigation/react-navigation/tree/master/packages/drawer/compare/@react-navigation/drawer@5.5.0...@react-navigation/drawer@5.5.1) (2020-04-27)
 
 **Note:** Version bump only for package @react-navigation/drawer

packages/drawer/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/drawer",
   "description": "Drawer navigator component with animated transitions and gesturess",
-  "version": "5.6.0",
+  "version": "5.5.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "del-cli": "^3.0.0",

packages/drawer/src/types.tsx

@@ -9,7 +9,7 @@ import {
   DrawerNavigationState,
   DrawerActionHelpers,
 } from '@react-navigation/native';
-import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
 export type Scene = {
   route: Route<string>;
@@ -32,7 +32,6 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   drawerType?: 'front' | 'back' | 'slide' | 'permanent';
   /**
    * How far from the edge of the screen the swipe gesture should activate.
-   * Not supported on Web.
    */
   edgeWidth?: number;
   /**
@@ -59,9 +58,8 @@ export type DrawerNavigationConfig<T = DrawerContentOptions> = {
   statusBarAnimation?: 'slide' | 'none' | 'fade';
   /**
    * Props to pass to the underlying pan gesture handler.
-   * Not supported on Web.
    */
-  gestureHandlerProps?: PanGestureHandlerProperties;
+  gestureHandlerProps?: React.ComponentProps<typeof PanGestureHandler>;
   /**
    * Whether the screens should render the first time they are accessed. Defaults to `true`.
    * Set it to `false` if you want to render all screens on initial render.
@@ -115,15 +113,13 @@ export type DrawerNavigationOptions = {
    * Whether you can use gestures to open or close the drawer.
    * Setting this to `false` disables swipe gestures as well as tap on overlay to close.
    * See `swipeEnabled` to disable only the swipe gesture.
-   * Defaults to `true`.
-   * Not supported on Web.
+   * Defaults to `true`
    */
   gestureEnabled?: boolean;
 
   /**
    * Whether you can use swipe gestures to open or close the drawer.
-   * Defaults to `true`.
-   * Not supported on Web.
+   * Defaults to `true`
    */
   swipeEnabled?: boolean;
 

packages/drawer/src/views/Drawer.tsx

@@ -10,14 +10,14 @@ import {
   StyleProp,
   View,
   InteractionManager,
-  TouchableWithoutFeedback,
 } from 'react-native';
-import Animated from 'react-native-reanimated';
 import {
   PanGestureHandler,
   TapGestureHandler,
-  GestureState,
-} from './GestureHandler';
+  State as GestureState,
+  TapGestureHandlerStateChangeEvent,
+} from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
 import Overlay from './Overlay';
 
 const {
@@ -79,6 +79,7 @@ type Props = {
   open: boolean;
   onOpen: () => void;
   onClose: () => void;
+  onGestureRef?: (ref: PanGestureHandler | null) => void;
   gestureEnabled: boolean;
   swipeEnabled: boolean;
   drawerPosition: 'left' | 'right';
@@ -510,17 +511,28 @@ export default class DrawerView extends React.Component<Props> {
     },
   ]);
 
-  private handleTapStateChange = event([
-    {
-      nativeEvent: {
-        oldState: (s: Animated.Value<number>) =>
-          cond(
-            eq(s, GestureState.ACTIVE),
-            set(this.manuallyTriggerSpring, TRUE)
-          ),
-      },
-    },
-  ]);
+  private handleTapStateChange =
+    Platform.OS === 'web'
+      ? // FIXME: Drawer doesn't close on Web with the same code that we use for native
+        ({ nativeEvent }: TapGestureHandlerStateChangeEvent) => {
+          if (
+            nativeEvent.state === GestureState.END &&
+            nativeEvent.oldState === GestureState.ACTIVE
+          ) {
+            this.toggleDrawer(false);
+          }
+        }
+      : event([
+          {
+            nativeEvent: {
+              oldState: (s: Animated.Value<number>) =>
+                cond(
+                  eq(s, GestureState.ACTIVE),
+                  set(this.manuallyTriggerSpring, TRUE)
+                ),
+            },
+          },
+        ]);
 
   private handleContainerLayout = (e: LayoutChangeEvent) =>
     this.containerWidth.setValue(e.nativeEvent.layout.width);
@@ -567,6 +579,7 @@ export default class DrawerView extends React.Component<Props> {
       sceneContainerStyle,
       drawerStyle,
       overlayStyle,
+      onGestureRef,
       renderDrawerContent,
       renderSceneContent,
       gestureHandlerProps,
@@ -611,6 +624,7 @@ export default class DrawerView extends React.Component<Props> {
 
     return (
       <PanGestureHandler
+        ref={onGestureRef}
         activeOffsetX={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         failOffsetY={[-SWIPE_DISTANCE_MINIMUM, SWIPE_DISTANCE_MINIMUM]}
         onGestureEvent={this.handleGestureEvent}
@@ -649,15 +663,7 @@ export default class DrawerView extends React.Component<Props> {
             </View>
             {
               // Disable overlay if sidebar is permanent
-              drawerType === 'permanent' ? null : Platform.OS === 'web' ? (
-                <TouchableWithoutFeedback
-                  onPress={
-                    gestureEnabled ? () => this.toggleDrawer(false) : undefined
-                  }
-                >
-                  <Overlay progress={progress} style={overlayStyle} />
-                </TouchableWithoutFeedback>
-              ) : (
+              drawerType === 'permanent' ? null : (
                 <TapGestureHandler
                   enabled={gestureEnabled}
                   onHandlerStateChange={this.handleTapStateChange}
@@ -731,11 +737,6 @@ const styles = StyleSheet.create({
   },
   main: {
     flex: 1,
-    ...Platform.select({
-      // FIXME: We need to hide `overflowX` on Web so the translated content doesn't show offscreen.
-      // But adding `overflowX: 'hidden'` prevents content from collapsing the URL bar.
-      web: null,
-      default: { overflow: 'hidden' },
-    }),
+    overflow: 'hidden',
   },
 });

packages/drawer/src/views/DrawerView.tsx

@@ -11,6 +11,10 @@ import {
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
+import {
+  PanGestureHandler,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
 import {
   NavigationHelpersContext,
   DrawerNavigationState,
@@ -18,7 +22,7 @@ import {
   useTheme,
 } from '@react-navigation/native';
 
-import { GestureHandlerRootView } from './GestureHandler';
+import DrawerGestureContext from '../utils/DrawerGestureContext';
 import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import DrawerContent from './DrawerContent';
@@ -90,6 +94,8 @@ export default function DrawerView({
     Dimensions.get('window')
   );
 
+  const drawerGestureRef = React.useRef<PanGestureHandler>(null);
+
   const { colors } = useTheme();
 
   const isDrawerOpen = state.history.some((it) => it.type === 'drawer');
@@ -199,49 +205,55 @@ export default function DrawerView({
     <NavigationHelpersContext.Provider value={navigation}>
       <GestureHandlerWrapper style={styles.content}>
         <SafeAreaProviderCompat>
-          <DrawerOpenContext.Provider value={isDrawerOpen}>
-            <Drawer
-              open={isDrawerOpen}
-              gestureEnabled={gestureEnabled}
-              swipeEnabled={swipeEnabled}
-              onOpen={handleDrawerOpen}
-              onClose={handleDrawerClose}
-              gestureHandlerProps={gestureHandlerProps}
-              drawerType={drawerType}
-              drawerPosition={drawerPosition}
-              sceneContainerStyle={[
-                { backgroundColor: colors.background },
-                sceneContainerStyle,
-              ]}
-              drawerStyle={[
-                {
-                  width: getDefaultDrawerWidth(dimensions),
-                  backgroundColor: colors.card,
-                },
-                drawerType === 'permanent' &&
-                  (drawerPosition === 'left'
-                    ? {
-                        borderRightColor: colors.border,
-                        borderRightWidth: StyleSheet.hairlineWidth,
-                      }
-                    : {
-                        borderLeftColor: colors.border,
-                        borderLeftWidth: StyleSheet.hairlineWidth,
-                      }),
-                drawerStyle,
-              ]}
-              overlayStyle={{ backgroundColor: overlayColor }}
-              swipeEdgeWidth={edgeWidth}
-              swipeDistanceThreshold={minSwipeDistance}
-              hideStatusBar={hideStatusBar}
-              statusBarAnimation={statusBarAnimation}
-              renderDrawerContent={renderNavigationView}
-              renderSceneContent={renderContent}
-              keyboardDismissMode={keyboardDismissMode}
-              drawerPostion={drawerPosition}
-              dimensions={dimensions}
-            />
-          </DrawerOpenContext.Provider>
+          <DrawerGestureContext.Provider value={drawerGestureRef}>
+            <DrawerOpenContext.Provider value={isDrawerOpen}>
+              <Drawer
+                open={isDrawerOpen}
+                gestureEnabled={gestureEnabled}
+                swipeEnabled={swipeEnabled}
+                onOpen={handleDrawerOpen}
+                onClose={handleDrawerClose}
+                onGestureRef={(ref) => {
+                  // @ts-ignore
+                  drawerGestureRef.current = ref;
+                }}
+                gestureHandlerProps={gestureHandlerProps}
+                drawerType={drawerType}
+                drawerPosition={drawerPosition}
+                sceneContainerStyle={[
+                  { backgroundColor: colors.background },
+                  sceneContainerStyle,
+                ]}
+                drawerStyle={[
+                  {
+                    width: getDefaultDrawerWidth(dimensions),
+                    backgroundColor: colors.card,
+                  },
+                  drawerType === 'permanent' &&
+                    (drawerPosition === 'left'
+                      ? {
+                          borderRightColor: colors.border,
+                          borderRightWidth: StyleSheet.hairlineWidth,
+                        }
+                      : {
+                          borderLeftColor: colors.border,
+                          borderLeftWidth: StyleSheet.hairlineWidth,
+                        }),
+                  drawerStyle,
+                ]}
+                overlayStyle={{ backgroundColor: overlayColor }}
+                swipeEdgeWidth={edgeWidth}
+                swipeDistanceThreshold={minSwipeDistance}
+                hideStatusBar={hideStatusBar}
+                statusBarAnimation={statusBarAnimation}
+                renderDrawerContent={renderNavigationView}
+                renderSceneContent={renderContent}
+                keyboardDismissMode={keyboardDismissMode}
+                drawerPostion={drawerPosition}
+                dimensions={dimensions}
+              />
+            </DrawerOpenContext.Provider>
+          </DrawerGestureContext.Provider>
         </SafeAreaProviderCompat>
       </GestureHandlerWrapper>
     </NavigationHelpersContext.Provider>

packages/drawer/src/views/GestureHandler.native.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import {
-  PanGestureHandler as PanGestureHandlerNative,
-  PanGestureHandlerProperties,
-} from 'react-native-gesture-handler';
-import DrawerGestureContext from '../utils/DrawerGestureContext';
-
-export function PanGestureHandler(props: PanGestureHandlerProperties) {
-  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
-
-  return (
-    <DrawerGestureContext.Provider value={gestureRef}>
-      <PanGestureHandlerNative {...props} />
-    </DrawerGestureContext.Provider>
-  );
-}
-
-export {
-  GestureHandlerRootView,
-  TapGestureHandler,
-  State as GestureState,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';

packages/drawer/src/views/GestureHandler.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import type {
-  PanGestureHandlerProperties,
-  TapGestureHandlerProperties,
-} from 'react-native-gesture-handler';
-
-const Dummy: any = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
-
-export const PanGestureHandler = Dummy as React.ComponentType<
-  PanGestureHandlerProperties
->;
-
-export const TapGestureHandler = Dummy as React.ComponentType<
-  TapGestureHandlerProperties
->;
-
-export const GestureHandlerRootView = View;
-
-export const GestureState = {
-  UNDETERMINED: 0,
-  FAILED: 1,
-  BEGAN: 2,
-  CANCELLED: 3,
-  ACTIVE: 4,
-  END: 5,
-};
-
-export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';

packages/drawer/src/views/ResourceSavingScene.tsx

@@ -29,7 +29,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
           styles.container,
           Platform.OS === 'web'
             ? { display: isVisible ? 'flex' : 'none' }
-            : { overflow: 'hidden' },
+            : null,
           style,
         ]}
         collapsable={false}
@@ -52,6 +52,7 @@ export default class ResourceSavingScene extends React.Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    overflow: 'hidden',
   },
   attached: {
     flex: 1,

packages/material-bottom-tabs/CHANGELOG.md

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

packages/material-bottom-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-bottom-tabs",
   "description": "Integration for bottom navigation component from react-native-paper",
-  "version": "5.1.11",
+  "version": "5.1.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -36,7 +36,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "@types/react-native-vector-icons": "^6.4.5",

packages/material-top-tabs/CHANGELOG.md

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

packages/material-top-tabs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/material-top-tabs",
   "description": "Integration for the animated tab view component from react-native-tab-view",
-  "version": "5.1.11",
+  "version": "5.1.10",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",
     "del-cli": "^3.0.0",

packages/native/CHANGELOG.md

@@ -3,26 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [5.2.0](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.7...@react-navigation/native@5.2.0) (2020-04-30)
-
-
-### Bug Fixes
-
-* add catch to thenable returned by getInitialState ([d6fa279](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/d6fa279d9371c7a6403d10d209a2a64147891c63))
-* return onPress instead of onClick for useLinkProps ([ae5442e](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/ae5442ebe812b91fa1f12164f27d1aeed918ab0e))
-
-
-### Features
-
-* add `useLinkBuilder` hook to build links ([2792f43](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/2792f438fe45428fe193e3708fee7ad61966cbf4))
-* add a useLinkProps hook ([f2291d1](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/f2291d110faa2aa8e10c9133c1c0c28d54af7917))
-* add action prop to Link ([942d2be](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/942d2be2c72720469475ce12ec8df23825994dbf))
-* add Link component as useLinkTo hook for navigating to links ([2573b5b](https://github.com/react-navigation/react-navigation/tree/master/packages/native/commit/2573b5beaac1240434e52f3f57bb29da2f541c88))
-
-
-
-
-
 ## [5.1.7](https://github.com/react-navigation/react-navigation/tree/master/packages/native/compare/@react-navigation/native@5.1.6...@react-navigation/native@5.1.7) (2020-04-27)
 
 **Note:** Version bump only for package @react-navigation/native

packages/native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/native",
   "description": "React Native integration for React Navigation",
-  "version": "5.2.0",
+  "version": "5.1.7",
   "keywords": [
     "react-native",
     "react-navigation",
@@ -31,7 +31,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/core": "^5.4.0"
+    "@react-navigation/core": "^5.3.5"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",

packages/native/src/Link.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Text, TextProps, GestureResponderEvent, Platform } from 'react-native';
+import { Text, TextProps, GestureResponderEvent } from 'react-native';
 import { NavigationAction } from '@react-navigation/core';
 import useLinkProps from './useLinkProps';
 
@@ -28,15 +28,16 @@ export default function Link({ to, action, ...rest }: Props) {
       rest.onPress?.(e);
     }
 
-    props.onPress(e);
+    if (props.onClick) {
+      props.onClick(e);
+    } else {
+      props.onPress(e);
+    }
   };
 
   return React.createElement(Text, {
     ...props,
     ...rest,
-    ...Platform.select({
-      web: { onClick: onPress } as any,
-      default: { onPress },
-    }),
+    ...(props.onClick ? { onClick: onPress } : { onPress }),
   });
 }

packages/native/src/useLinkProps.tsx

@@ -57,6 +57,9 @@ export default function useLinkProps({ to, action }: Props) {
   return {
     href: to,
     accessibilityRole: 'link' as const,
-    onPress,
+    ...Platform.select({
+      web: { onClick: onPress } as any,
+      default: { onPress },
+    }),
   };
 }

packages/native/src/useLinking.tsx

@@ -10,15 +10,6 @@ import { LinkingOptions } from './types';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
-type HistoryState = { index: number };
-
-declare const history: {
-  state?: HistoryState;
-  go(delta: number): void;
-  pushState(state: HistoryState, title: string, url: string): void;
-  replaceState(state: HistoryState, title: string, url: string): void;
-};
-
 const getStateLength = (state: NavigationState) => {
   let length = 0;
 
@@ -89,18 +80,11 @@ export default function useLinking(
       }
     }
 
-    const then = (callback: (state: ResultState | undefined) => void) =>
-      Promise.resolve(callback(value));
-
     // Make it a thenable to keep consistent with the native impl
-    const thenable = {
-      then,
-      catch() {
-        return thenable;
-      },
+    return {
+      then: (callback: (state: ResultState | undefined) => void) =>
+        callback(value),
     };
-
-    return thenable;
   }, []);
 
   const previousStateLengthRef = React.useRef<number | undefined>(undefined);

packages/native/src/useThenable.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
 
-type Thenable<T> = { then(cb: (result: T) => void): void };
-
-export default function useThenable<T>(create: () => Thenable<T>) {
+export default function useThenable<T>(
+  create: () => {
+    then(success: (result: T) => void, error?: (error: any) => void): void;
+  }
+) {
   const [promise] = React.useState(create);
 
   // Check if our thenable is synchronous
@@ -22,20 +24,20 @@ export default function useThenable<T>(create: () => Thenable<T>) {
   React.useEffect(() => {
     let cancelled = false;
 
-    const resolve = async () => {
-      let result;
-
-      try {
-        result = await promise;
-      } finally {
-        if (!cancelled) {
-          setState([true, result]);
-        }
-      }
-    };
-
     if (!resolved) {
-      resolve();
+      promise.then(
+        (result) => {
+          if (!cancelled) {
+            setState([true, result]);
+          }
+        },
+        (error) => {
+          if (!cancelled) {
+            console.error(error);
+            setState([true, undefined]);
+          }
+        }
+      );
     }
 
     return () => {

packages/routers/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.4.2](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.4.1...@react-navigation/routers@5.4.2) (2020-04-30)
-
-
-### Bug Fixes
-
-* fix backBehavior with initialRoute ([#8110](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/issues/8110)) ([420f692](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/commit/420f6926e111d32c2388c44ff0bee2b8ea238a57))
-
-
-
-
-
 ## [5.4.1](https://github.com/react-navigation/react-navigation/tree/master/packages/routers/compare/@react-navigation/routers@5.4.0...@react-navigation/routers@5.4.1) (2020-04-27)
 
 

packages/routers/package.json

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

packages/routers/src/TabRouter.tsx

@@ -59,31 +59,21 @@ export const TabActions = {
 const getRouteHistory = (
   routes: Route<string>[],
   index: number,
-  backBehavior: BackBehavior,
-  initialRouteName: string | undefined
+  backBehavior: BackBehavior
 ) => {
   const history = [{ type: TYPE_ROUTE, key: routes[index].key }];
-  let initialRouteIndex;
 
   switch (backBehavior) {
+    case 'initialRoute':
+      if (index !== 0) {
+        history.unshift({ type: TYPE_ROUTE, key: routes[0].key });
+      }
+      break;
     case 'order':
       for (let i = index; i > 0; i--) {
         history.unshift({ type: TYPE_ROUTE, key: routes[i - 1].key });
       }
       break;
-    case 'initialRoute':
-      initialRouteIndex = routes.findIndex(
-        (route) => route.name === initialRouteName
-      );
-      initialRouteIndex = initialRouteIndex === -1 ? 0 : initialRouteIndex;
-
-      if (initialRouteIndex !== index) {
-        history.unshift({
-          type: TYPE_ROUTE,
-          key: routes[initialRouteIndex].key,
-        });
-      }
-      break;
     case 'history':
       // The history will fill up on navigation
       break;
@@ -95,8 +85,7 @@ const getRouteHistory = (
 const changeIndex = (
   state: TabNavigationState,
   index: number,
-  backBehavior: BackBehavior,
-  initialRouteName: string | undefined
+  backBehavior: BackBehavior
 ) => {
   let history;
 
@@ -107,12 +96,7 @@ const changeIndex = (
       .filter((it) => (it.type === 'route' ? it.key !== currentKey : false))
       .concat({ type: TYPE_ROUTE, key: currentKey });
   } else {
-    history = getRouteHistory(
-      state.routes,
-      index,
-      backBehavior,
-      initialRouteName
-    );
+    history = getRouteHistory(state.routes, index, backBehavior);
   }
 
   return {
@@ -146,12 +130,7 @@ export default function TabRouter({
         params: routeParamList[name],
       }));
 
-      const history = getRouteHistory(
-        routes,
-        index,
-        backBehavior,
-        initialRouteName
-      );
+      const history = getRouteHistory(routes, index, backBehavior);
 
       return {
         stale: false,
@@ -210,12 +189,7 @@ export default function TabRouter({
       );
 
       if (!history?.length) {
-        history = getRouteHistory(
-          routes,
-          index,
-          backBehavior,
-          initialRouteName
-        );
+        history = getRouteHistory(routes, index, backBehavior);
       }
 
       return {
@@ -249,12 +223,7 @@ export default function TabRouter({
       );
 
       if (!history.length) {
-        history = getRouteHistory(
-          routes,
-          index,
-          backBehavior,
-          initialRouteName
-        );
+        history = getRouteHistory(routes, index, backBehavior);
       }
 
       return {
@@ -273,7 +242,7 @@ export default function TabRouter({
         return state;
       }
 
-      return changeIndex(state, index, backBehavior, initialRouteName);
+      return changeIndex(state, index, backBehavior);
     },
 
     getStateForAction(state, action) {
@@ -315,8 +284,7 @@ export default function TabRouter({
                   : state.routes,
             },
             index,
-            backBehavior,
-            initialRouteName
+            backBehavior
           );
         }
 

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

@@ -882,78 +882,6 @@ it('handles back action with backBehavior: initialRoute', () => {
   ).toEqual(null);
 });
 
-it('handles back action with backBehavior: initialRoute and initialRouteName', () => {
-  const router = TabRouter({
-    backBehavior: 'initialRoute',
-    initialRouteName: 'baz',
-  });
-
-  const options = {
-    routeNames: ['bar', 'baz', 'qux'],
-    routeParamList: {},
-  };
-
-  let state = router.getInitialState(options);
-
-  expect(
-    router.getStateForAction(state, CommonActions.goBack(), options)
-  ).toEqual(null);
-
-  state = router.getStateForAction(
-    state,
-    TabActions.jumpTo('qux'),
-    options
-  ) as TabNavigationState;
-
-  expect(
-    router.getStateForAction(state, CommonActions.goBack(), options)
-  ).toEqual({
-    stale: false,
-    type: 'tab',
-    key: 'tab-test',
-    index: 1,
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-test', name: 'bar' },
-      { key: 'baz-test', name: 'baz' },
-      { key: 'qux-test', name: 'qux' },
-    ],
-    history: [{ type: 'route', key: 'baz-test' }],
-  });
-
-  state = router.getStateForAction(
-    state,
-    TabActions.jumpTo('bar'),
-    options
-  ) as TabNavigationState;
-
-  expect(
-    router.getStateForAction(state, CommonActions.goBack(), options)
-  ).toEqual({
-    stale: false,
-    type: 'tab',
-    key: 'tab-test',
-    index: 1,
-    routeNames: ['bar', 'baz', 'qux'],
-    routes: [
-      { key: 'bar-test', name: 'bar' },
-      { key: 'baz-test', name: 'baz' },
-      { key: 'qux-test', name: 'qux' },
-    ],
-    history: [{ type: 'route', key: 'baz-test' }],
-  });
-
-  state = router.getStateForAction(
-    state,
-    TabActions.jumpTo('baz'),
-    options
-  ) as TabNavigationState;
-
-  expect(
-    router.getStateForAction(state, CommonActions.goBack(), options)
-  ).toEqual(null);
-});
-
 it('handles back action with backBehavior: none', () => {
   const router = TabRouter({ backBehavior: 'none' });
   const options = {

packages/stack/CHANGELOG.md

@@ -3,17 +3,6 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.2.15](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.14...@react-navigation/stack@5.2.15) (2020-04-30)
-
-
-### Bug Fixes
-
-* make sure the address bar hides when scrolling on web ([0a19e94](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/commit/0a19e94b23a4d2b5f22d1d9deb0544f586f475ee))
-
-
-
-
-
 ## [5.2.14](https://github.com/react-navigation/react-navigation/tree/master/packages/stack/compare/@react-navigation/stack@5.2.13...@react-navigation/stack@5.2.14) (2020-04-27)
 
 

packages/stack/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/stack",
   "description": "Stack navigator component for iOS and Android with animated transitions and gestures",
-  "version": "5.2.15",
+  "version": "5.2.14",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -40,7 +40,7 @@
   "devDependencies": {
     "@react-native-community/bob": "^0.10.0",
     "@react-native-community/masked-view": "^0.1.7",
-    "@react-navigation/native": "^5.2.0",
+    "@react-navigation/native": "^5.1.7",
     "@types/color": "^3.0.1",
     "@types/react": "^16.9.23",
     "@types/react-native": "^0.61.22",

packages/stack/src/types.tsx

@@ -276,8 +276,7 @@ export type StackNavigationOptions = StackHeaderOptions &
     cardStyle?: StyleProp<ViewStyle>;
     /**
      * Whether transition animation should be enabled the screen.
-     * If you set it to `false`, the screen won't animate when pushing or popping.
-     * Defaults to `true` on Android and iOS, `false` on Web.
+     * If you set it to `false`, the screen won't animate when pushing or popping. Defaults to `true`.
      */
     animationEnabled?: boolean;
     /**
@@ -287,12 +286,10 @@ export type StackNavigationOptions = StackHeaderOptions &
     animationTypeForReplace?: 'push' | 'pop';
     /**
      * Whether you can use gestures to dismiss this screen. Defaults to `true` on iOS, `false` on Android.
-     * Not supported on Web.
      */
     gestureEnabled?: boolean;
     /**
      * Object to override the distance of touch start from the edge of the screen to recognize gestures.
-     * Not supported on Web.
      */
     gestureResponseDistance?: {
       /**
@@ -305,8 +302,8 @@ export type StackNavigationOptions = StackHeaderOptions &
       horizontal?: number;
     };
     /**
-     * Number which determines the relevance of velocity for the gesture. Defaults to 0.3.
-     * Not supported on Web.
+     * Number which determines the relevance of velocity for the gesture.
+     * Defaults to 0.3.
      */
     gestureVelocityImpact?: number;
     /**

packages/stack/src/utils/GestureHandlerRefContext.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
+import { PanGestureHandler } from 'react-native-gesture-handler';
 
-export default React.createContext<React.Ref<
-  import('react-native-gesture-handler').PanGestureHandler
-> | null>(null);
+export default React.createContext<React.Ref<PanGestureHandler> | undefined>(
+  undefined
+);

packages/stack/src/views/GestureHandler.native.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react';
-import {
-  PanGestureHandler as PanGestureHandlerNative,
-  PanGestureHandlerProperties,
-} from 'react-native-gesture-handler';
-import GestureHandlerRefContext from '../utils/GestureHandlerRefContext';
-
-export function PanGestureHandler(props: PanGestureHandlerProperties) {
-  const gestureRef = React.useRef<PanGestureHandlerNative>(null);
-
-  return (
-    <GestureHandlerRefContext.Provider value={gestureRef}>
-      <PanGestureHandlerNative {...props} />
-    </GestureHandlerRefContext.Provider>
-  );
-}
-
-export {
-  GestureHandlerRootView,
-  State as GestureState,
-  PanGestureHandlerGestureEvent,
-} from 'react-native-gesture-handler';

packages/stack/src/views/GestureHandler.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-import type { PanGestureHandlerProperties } from 'react-native-gesture-handler';
-
-const Dummy: any = ({ children }: { children: React.ReactNode }) => (
-  <>{children}</>
-);
-
-export const PanGestureHandler = Dummy as React.ComponentType<
-  PanGestureHandlerProperties
->;
-
-export const GestureHandlerRootView = View;
-
-export const GestureState = {
-  UNDETERMINED: 0,
-  FAILED: 1,
-  BEGAN: 2,
-  CANCELLED: 3,
-  ACTIVE: 4,
-  END: 5,
-};
-
-export type { PanGestureHandlerGestureEvent } from 'react-native-gesture-handler';

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

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 import { useTheme } from '@react-navigation/native';
 import MaskedView from '../MaskedView';
-import { TouchableItem } from '../TouchableItem';
+import TouchableItem from '../TouchableItem';
 import { StackHeaderLeftButtonProps } from '../../types';
 
 type Props = StackHeaderLeftButtonProps;

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

@@ -9,15 +9,14 @@ import {
   Platform,
   InteractionManager,
 } from 'react-native';
-import { EdgeInsets } from 'react-native-safe-area-context';
-import Color from 'color';
-
-import CardSheet from './CardSheet';
 import {
   PanGestureHandler,
-  GestureState,
+  State as GestureState,
   PanGestureHandlerGestureEvent,
-} from '../GestureHandler';
+} from 'react-native-gesture-handler';
+import { EdgeInsets } from 'react-native-safe-area-context';
+import Color from 'color';
+import StackGestureRefContext from '../../utils/GestureHandlerRefContext';
 import CardAnimationContext from '../../utils/CardAnimationContext';
 import getDistanceForDirection from '../../utils/getDistanceForDirection';
 import getInvertedMultiplier from '../../utils/getInvertedMultiplier';
@@ -37,7 +36,6 @@ type Props = ViewProps & {
   gesture: Animated.Value;
   layout: Layout;
   insets: EdgeInsets;
-  pageOverflowEnabled: boolean;
   gestureDirection: GestureDirection;
   onOpen: () => void;
   onClose: () => void;
@@ -414,6 +412,8 @@ export default class Card extends React.Component<Props> {
     }
   }
 
+  private gestureRef = React.createRef<PanGestureHandler>();
+
   private contentRef = React.createRef<View>();
 
   render() {
@@ -430,7 +430,6 @@ export default class Card extends React.Component<Props> {
       shadowEnabled,
       gestureEnabled,
       gestureDirection,
-      pageOverflowEnabled,
       children,
       containerStyle: customContainerStyle,
       contentStyle,
@@ -500,6 +499,7 @@ export default class Card extends React.Component<Props> {
             pointerEvents="box-none"
           >
             <PanGestureHandler
+              ref={this.gestureRef}
               enabled={layout.width !== 0 && gestureEnabled}
               onGestureEvent={handleGestureEvent}
               onHandlerStateChange={this.handleGestureStateChange}
@@ -523,14 +523,14 @@ export default class Card extends React.Component<Props> {
                     pointerEvents="none"
                   />
                 ) : null}
-                <CardSheet
+                <View
                   ref={this.contentRef}
-                  enabled={pageOverflowEnabled}
-                  layout={layout}
-                  style={contentStyle}
+                  style={[styles.content, contentStyle]}
                 >
-                  {children}
-                </CardSheet>
+                  <StackGestureRefContext.Provider value={this.gestureRef}>
+                    {children}
+                  </StackGestureRefContext.Provider>
+                </View>
               </Animated.View>
             </PanGestureHandler>
           </Animated.View>
@@ -544,6 +544,10 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  content: {
+    flex: 1,
+    overflow: 'hidden',
+  },
   overlay: {
     flex: 1,
     backgroundColor: '#000',

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

@@ -4,13 +4,7 @@ import { Route, useTheme } from '@react-navigation/native';
 import { Props as HeaderContainerProps } from '../Header/HeaderContainer';
 import Card from './Card';
 import HeaderHeightContext from '../../utils/HeaderHeightContext';
-import {
-  Scene,
-  Layout,
-  StackHeaderMode,
-  StackCardMode,
-  TransitionPreset,
-} from '../../types';
+import { Scene, Layout, StackHeaderMode, TransitionPreset } from '../../types';
 
 type Props = TransitionPreset & {
   index: number;
@@ -51,7 +45,6 @@ type Props = TransitionPreset & {
     horizontal?: number;
   };
   gestureVelocityImpact?: number;
-  mode: StackCardMode;
   headerMode: StackHeaderMode;
   headerShown?: boolean;
   headerTransparent?: boolean;
@@ -80,7 +73,6 @@ function CardContainer({
   gestureVelocityImpact,
   getPreviousRoute,
   getFocusedRoute,
-  mode,
   headerMode,
   headerShown,
   headerStyleInterpolator,
@@ -186,7 +178,6 @@ function CardContainer({
       accessibilityElementsHidden={!focused}
       importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
       pointerEvents={active ? 'box-none' : pointerEvents}
-      pageOverflowEnabled={headerMode === 'screen' && mode === 'card'}
       containerStyle={
         headerMode === 'float' && !headerTransparent && headerShown !== false
           ? { marginTop: headerHeight }

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

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { View, ViewProps, StyleSheet } from 'react-native';
-
-type Props = ViewProps & {
-  enabled: boolean;
-  layout: { width: number; height: number };
-  children: React.ReactNode;
-};
-
-// This component will render a page which overflows the screen
-// if the container fills the body by comparing the size
-// This lets the document.body handle scrolling of the content
-// It's necessary for mobile browsers to be able to hide address bar on scroll
-export default React.forwardRef<View, Props>(function CardSheet(
-  { enabled, layout, style, ...rest },
-  ref
-) {
-  const [fill, setFill] = React.useState(false);
-
-  React.useEffect(() => {
-    if (typeof document === 'undefined' || !document.body) {
-      // Only run when DOM is available
-      return;
-    }
-
-    const width = document.body.clientWidth;
-    const height = document.body.clientHeight;
-
-    setFill(width === layout.width && height === layout.height);
-  }, [layout.height, layout.width]);
-
-  return (
-    <View
-      {...rest}
-      ref={ref}
-      style={[enabled && fill ? styles.page : styles.card, style]}
-    />
-  );
-});
-
-const styles = StyleSheet.create({
-  page: {
-    minHeight: '100%',
-  },
-  card: {
-    flex: 1,
-    overflow: 'hidden',
-  },
-});

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

@@ -519,7 +519,6 @@ export default class CardStack extends React.Component<Props, State> {
                   onHeaderHeightChange={this.handleHeaderLayout}
                   getPreviousRoute={getPreviousRoute}
                   getFocusedRoute={this.getFocusedRoute}
-                  mode={mode}
                   headerMode={headerMode}
                   headerShown={headerShown}
                   headerTransparent={headerTransparent}
@@ -565,6 +564,7 @@ export default class CardStack extends React.Component<Props, State> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    overflow: 'hidden',
   },
   floating: {
     position: 'absolute',

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
 import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import {
   NavigationHelpersContext,
   StackActions,
@@ -8,7 +9,6 @@ import {
   Route,
 } from '@react-navigation/native';
 
-import { GestureHandlerRootView } from '../GestureHandler';
 import CardStack from './CardStack';
 import KeyboardManager from '../KeyboardManager';
 import HeaderContainer, {
@@ -420,7 +420,7 @@ export default class StackView extends React.Component<Props, State> {
     } = this.state;
 
     const headerMode =
-      mode === 'card' && Platform.OS === 'ios' ? 'float' : 'screen';
+      mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
       <NavigationHelpersContext.Provider value={navigation}>

packages/stack/src/views/TouchableItem.native.tsx

@@ -1,81 +0,0 @@
-/**
- * TouchableItem renders a touchable that looks native on both iOS and Android.
- *
- * It provides an abstraction on top of TouchableNativeFeedback and
- * TouchableOpacity.
- *
- * On iOS you can pass the props of TouchableOpacity, on Android pass the props
- * of TouchableNativeFeedback.
- */
-import * as React from 'react';
-import {
-  Platform,
-  TouchableNativeFeedback,
-  TouchableOpacity,
-  View,
-  ViewProps,
-} from 'react-native';
-
-import BorderlessButton from './BorderlessButton';
-
-export type Props = ViewProps & {
-  pressColor: string;
-  disabled?: boolean;
-  borderless?: boolean;
-  delayPressIn?: number;
-  onPress?: () => void;
-  children: React.ReactNode;
-};
-
-const ANDROID_VERSION_LOLLIPOP = 21;
-
-export class TouchableItem extends React.Component<Props> {
-  static defaultProps = {
-    borderless: false,
-    pressColor: 'rgba(0, 0, 0, .32)',
-  };
-
-  render() {
-    /*
-     * TouchableNativeFeedback.Ripple causes a crash on old Android versions,
-     * therefore only enable it on Android Lollipop and above.
-     *
-     * All touchables on Android should have the ripple effect according to
-     * platform design guidelines.
-     * We need to pass the background prop to specify a borderless ripple effect.
-     */
-    if (
-      Platform.OS === 'android' &&
-      Platform.Version >= ANDROID_VERSION_LOLLIPOP
-    ) {
-      const { style, pressColor, borderless, children, ...rest } = this.props;
-
-      return (
-        <TouchableNativeFeedback
-          {...rest}
-          useForeground={TouchableNativeFeedback.canUseNativeForeground()}
-          background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
-        >
-          <View style={style}>{React.Children.only(children)}</View>
-        </TouchableNativeFeedback>
-      );
-    } else if (Platform.OS === 'ios') {
-      return (
-        <BorderlessButton
-          hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
-          disallowInterruption
-          enabled={!this.props.disabled}
-          {...this.props}
-        >
-          {this.props.children}
-        </BorderlessButton>
-      );
-    } else {
-      return (
-        <TouchableOpacity {...this.props}>
-          {this.props.children}
-        </TouchableOpacity>
-      );
-    }
-  }
-}

packages/stack/src/views/TouchableItem.tsx

@@ -1,3 +1,80 @@
-import { TouchableOpacity } from 'react-native';
+/**
+ * TouchableItem renders a touchable that looks native on both iOS and Android.
+ *
+ * It provides an abstraction on top of TouchableNativeFeedback and
+ * TouchableOpacity.
+ *
+ * On iOS you can pass the props of TouchableOpacity, on Android pass the props
+ * of TouchableNativeFeedback.
+ */
+import * as React from 'react';
+import {
+  Platform,
+  TouchableNativeFeedback,
+  TouchableOpacity,
+  View,
+  ViewProps,
+} from 'react-native';
 
-export const TouchableItem = (TouchableOpacity as any) as typeof import('./TouchableItem.native').TouchableItem;
+import BorderlessButton from './BorderlessButton';
+
+type Props = ViewProps & {
+  pressColor: string;
+  disabled?: boolean;
+  borderless?: boolean;
+  delayPressIn?: number;
+  onPress?: () => void;
+};
+
+const ANDROID_VERSION_LOLLIPOP = 21;
+
+export default class TouchableItem extends React.Component<Props> {
+  static defaultProps = {
+    borderless: false,
+    pressColor: 'rgba(0, 0, 0, .32)',
+  };
+
+  render() {
+    /*
+     * TouchableNativeFeedback.Ripple causes a crash on old Android versions,
+     * therefore only enable it on Android Lollipop and above.
+     *
+     * All touchables on Android should have the ripple effect according to
+     * platform design guidelines.
+     * We need to pass the background prop to specify a borderless ripple effect.
+     */
+    if (
+      Platform.OS === 'android' &&
+      Platform.Version >= ANDROID_VERSION_LOLLIPOP
+    ) {
+      const { style, pressColor, borderless, children, ...rest } = this.props;
+
+      return (
+        <TouchableNativeFeedback
+          {...rest}
+          useForeground={TouchableNativeFeedback.canUseNativeForeground()}
+          background={TouchableNativeFeedback.Ripple(pressColor, borderless)}
+        >
+          <View style={style}>{React.Children.only(children)}</View>
+        </TouchableNativeFeedback>
+      );
+    } else if (Platform.OS === 'ios') {
+      return (
+        <BorderlessButton
+          hitSlop={{ top: 10, bottom: 10, right: 10, left: 10 }}
+          disallowInterruption
+          enabled={!this.props.disabled}
+          {...this.props}
+        >
+          {this.props.children}
+        </BorderlessButton>
+      );
+    } else {
+      return (
+        <TouchableOpacity {...this.props}>
+          {this.props.children}
+        </TouchableOpacity>
+      );
+    }
+  }
+}

packages/web-stack/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 React Navigation Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/web-stack/README.md

@@ -0,0 +1,5 @@
+# `@react-navigation/web-stack`
+
+Stack navigator for React Navigation on Web.
+
+Installation instructions and documentation can be found on the [React Navigation website](https://reactnavigation.org/docs/web-stack-navigator.html).

packages/web-stack/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@react-navigation/webstack",
+  "description": "Stack navigator component for Web",
+  "version": "5.0.0",
+  "keywords": [
+    "react",
+    "react-native",
+    "react-component",
+    "react-navigation",
+    "web",
+    "stack"
+  ],
+  "license": "MIT",
+  "repository": "https://github.com/react-navigation/react-navigation/tree/master/packages/web-stack",
+  "bugs": {
+    "url": "https://github.com/react-navigation/react-navigation/issues"
+  },
+  "homepage": "https://reactnavigation.org/docs/web-stack-navigator.html",
+  "main": "lib/commonjs/index.js",
+  "react-native": "src/index.tsx",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "bob build",
+    "clean": "del lib"
+  },
+  "devDependencies": {
+    "@react-native-community/bob": "^0.10.0",
+    "@react-navigation/native": "^5.1.6",
+    "@types/react": "^16.9.23",
+    "del-cli": "^3.0.0",
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "typescript": "^3.8.3"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^5.0.5",
+    "react": "*"
+  },
+  "@react-native-community/bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

packages/web-stack/src/index.tsx

@@ -0,0 +1,23 @@
+/**
+ * Navigators
+ */
+export { default as createWebStackNavigator } from './navigators/createWebStackNavigator';
+
+/**
+ * Views
+ */
+export { default as WebStackView } from './views/Stack/WebStackView';
+export { default as Header } from './views/Header/Header';
+export { default as HeaderTitle } from './views/Header/HeaderTitle';
+export { default as HeaderBackButton } from './views/Header/HeaderBackButton';
+
+/**
+ * Types
+ */
+export type {
+  WebStackNavigationOptions,
+  WebStackNavigationProp,
+  WebStackHeaderProps,
+  WebStackHeaderLeftButtonProps,
+  WebStackHeaderTitleProps,
+} from './types';

packages/web-stack/src/navigators/createWebStackNavigator.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {
+  useNavigationBuilder,
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  EventArg,
+  StackRouter,
+  StackRouterOptions,
+  StackNavigationState,
+  StackActions,
+} from '@react-navigation/native';
+import WebStackView from '../views/Stack/WebStackView';
+import {
+  WebStackNavigationConfig,
+  WebStackNavigationOptions,
+  WebStackNavigationEventMap,
+} from '../types';
+
+type Props = DefaultNavigatorOptions<WebStackNavigationOptions> &
+  StackRouterOptions &
+  WebStackNavigationConfig;
+
+function StackNavigator({
+  initialRouteName,
+  children,
+  screenOptions,
+  ...rest
+}: Props) {
+  const { state, descriptors, navigation } = useNavigationBuilder<
+    StackNavigationState,
+    StackRouterOptions,
+    WebStackNavigationOptions,
+    WebStackNavigationEventMap
+  >(StackRouter, {
+    initialRouteName,
+    children,
+    screenOptions,
+  });
+
+  React.useEffect(
+    () =>
+      navigation.addListener &&
+      navigation.addListener('tabPress', (e) => {
+        const isFocused = navigation.isFocused();
+
+        // Run the operation in the next frame so we're sure all listeners have been run
+        // This is necessary to know if preventDefault() has been called
+        requestAnimationFrame(() => {
+          if (
+            state.index > 0 &&
+            isFocused &&
+            !(e as EventArg<'tabPress', true>).defaultPrevented
+          ) {
+            // When user taps on already focused tab and we're inside the tab,
+            // reset the stack to replicate native behaviour
+            navigation.dispatch({
+              ...StackActions.popToTop(),
+              target: state.key,
+            });
+          }
+        });
+      }),
+    [navigation, state.index, state.key]
+  );
+
+  return (
+    <WebStackView
+      {...rest}
+      state={state}
+      descriptors={descriptors}
+      navigation={navigation}
+    />
+  );
+}
+
+export default createNavigatorFactory<
+  StackNavigationState,
+  WebStackNavigationOptions,
+  WebStackNavigationEventMap,
+  typeof StackNavigator
+>(StackNavigator);

packages/web-stack/src/types.tsx

@@ -0,0 +1,166 @@
+import * as React from 'react';
+import {
+  NavigationProp,
+  ParamListBase,
+  Descriptor,
+  RouteProp,
+  NavigationHelpers,
+  StackNavigationState,
+  StackActionHelpers,
+} from '@react-navigation/native';
+
+export type WebStackNavigationEventMap = {};
+
+export type WebStackNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  WebStackNavigationEventMap
+>;
+
+export type WebStackNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = string
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  StackNavigationState,
+  WebStackNavigationOptions,
+  WebStackNavigationEventMap
+> &
+  StackActionHelpers<ParamList>;
+
+export type WebStackHeaderOptions = {
+  /**
+   * String or a function that returns a React Element to be used by the header.
+   * Defaults to scene `title`.
+   * It receives `allowFontScaling`, `onLayout`, `style` and `children` in the options object as an argument.
+   * The title string is passed in `children`.
+   */
+  headerTitle?: string | ((props: WebStackHeaderTitleProps) => React.ReactNode);
+  /**
+   * How to align the the header title.
+   * Defaults to `center` on iOS and `left` on Android.
+   */
+  headerTitleAlign?: 'left' | 'center';
+  /**
+   * Style object for the title component.
+   */
+  headerTitleStyle?: React.CSSProperties;
+  /**
+   * Tint color for the header.
+   */
+  headerTintColor?: string;
+  /**
+   * Function which returns a React Element to display on the left side of the header.
+   * It receives a number of arguments when rendered (`onPress`, `label`, `labelStyle` and more.
+   */
+  headerLeft?: (props: WebStackHeaderLeftButtonProps) => React.ReactNode;
+  /**
+   * Function which returns a React Element to display on the right side of the header.
+   */
+  headerRight?: (props: { tintColor?: string }) => React.ReactNode;
+  /**
+   * Style object for the header. You can specify a custom background color here, for example.
+   */
+  headerStyle?: React.CSSProperties;
+};
+
+export type WebStackHeaderProps = {
+  /**
+   * Navigation prop for the header.
+   */
+  route: RouteProp<ParamListBase, string>;
+  /**
+   * Navigation prop for the header.
+   */
+  navigation: WebStackNavigationProp<ParamListBase>;
+  /**
+   * Descriptors for the header.
+   */
+  descriptor: WebStackDescriptor;
+  /**
+   * If header should display back button
+   */
+  canGoBack: boolean;
+};
+
+export type WebStackDescriptor = Descriptor<
+  ParamListBase,
+  string,
+  StackNavigationState,
+  WebStackNavigationOptions
+>;
+
+export type WebStackDescriptorMap = {
+  [key: string]: WebStackDescriptor;
+};
+
+export type WebStackNavigationOptions = WebStackHeaderOptions & {
+  /**
+   * String that can be displayed in the header as a fallback for `headerTitle`.
+   */
+  title?: string;
+  /**
+   * Function that given `HeaderProps` returns a React Element to display as a header.
+   */
+  header?: (props: WebStackHeaderProps) => React.ReactNode;
+  /**
+   * Whether to show the header. The header is shown by default unless `headerMode` was set to `none`.
+   * Setting this to `false` hides the header.
+   */
+  headerShown?: boolean;
+  /**
+   * Style object for the card in stack.
+   * You can provide a custom background color to use instead of the default background here.
+   *
+   * You can also specify `{ backgroundColor: 'transparent' }` to make the previous screen visible underneath.
+   * This is useful to implement things like modal dialogs..
+   */
+  cardStyle?: React.CSSProperties;
+  /**
+   * Whether transition animation should be enabled the screen.
+   * If you set it to `false`, the screen won't animate when pushing or popping. Defaults to `true`.
+   */
+  animationEnabled?: boolean;
+  /**
+   * The type of animation to use when this screen replaces another screen. Defaults to `push`.
+   * When `pop` is used, the `pop` animation is applied to the screen being replaced.
+   */
+  animationTypeForReplace?: 'push' | 'pop';
+};
+
+export type WebStackNavigationConfig = {};
+
+export type WebStackHeaderLeftButtonProps = {
+  /**
+   * Whether the button is disabled.
+   */
+  disabled?: boolean;
+  /**
+   * Callback to call when the button is clicked.
+   * By default, this triggers `goBack`.
+   */
+  onClick?: () => void;
+  /**
+   * Style object for the button
+   */
+  style?: React.CSSProperties;
+  /**
+   * Whether it's possible to navigate back in stack.
+   */
+  canGoBack?: boolean;
+};
+
+export type WebStackHeaderTitleProps = {
+  /**
+   * Tint color for the header.
+   */
+  tintColor?: string;
+  /**
+   * Content of the title element. Usually the title string.
+   */
+  children?: string;
+  /**
+   * Style object for the title element.
+   */
+  style?: React.CSSProperties;
+};

packages/web-stack/src/utils/debounce.tsx

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

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

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { StackActions } from '@react-navigation/native';
+
+import HeaderSegment from './HeaderSegment';
+import HeaderTitle from './HeaderTitle';
+import debounce from '../../utils/debounce';
+import { WebStackHeaderProps, WebStackHeaderTitleProps } from '../../types';
+
+export default React.memo(function Header({
+  navigation,
+  route,
+  descriptor,
+}: WebStackHeaderProps) {
+  const { options } = descriptor;
+  const title =
+    typeof options.headerTitle !== 'function' &&
+    options.headerTitle !== undefined
+      ? options.headerTitle
+      : options.title !== undefined
+      ? options.title
+      : route.name;
+
+  const goBack = React.useCallback(
+    debounce(() => {
+      if (navigation.isFocused() && navigation.canGoBack()) {
+        navigation.dispatch({
+          ...StackActions.pop(),
+          source: route.key,
+        });
+      }
+    }, 50),
+    [navigation, route.key]
+  );
+
+  return (
+    <HeaderSegment
+      {...options}
+      route={route}
+      descriptor={descriptor}
+      title={title}
+      headerTitle={
+        typeof options.headerTitle !== 'function'
+          ? (props: WebStackHeaderTitleProps) => <HeaderTitle {...props} />
+          : options.headerTitle
+      }
+      onGoBack={goBack}
+    />
+  );
+});

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useTheme } from '@react-navigation/native';
+import { WebStackHeaderLeftButtonProps } from '../../types';
+
+type Props = WebStackHeaderLeftButtonProps;
+
+export default function HeaderBackButton({ disabled, onClick, style }: Props) {
+  const { colors } = useTheme();
+
+  /* TODO: styling */
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      style={{
+        color: style?.color !== undefined ? style.color : colors.text,
+        ...styles.button,
+        ...style,
+      }}
+      onClick={onClick}
+    >
+      Back
+      {/* TODO: SVG image for back button */}
+    </button>
+  );
+}
+
+const styles = {
+  button: {},
+};

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

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  NavigationContext,
+  NavigationRouteContext,
+  Route,
+  ParamListBase,
+  RouteProp,
+} from '@react-navigation/native';
+
+import Header from './Header';
+import { WebStackNavigationProp, WebStackDescriptor } from '../../types';
+
+export type Props = {
+  scenes: {
+    route: RouteProp<ParamListBase, string>;
+    descriptor: WebStackDescriptor;
+  }[];
+  getPreviousRoute: (props: {
+    route: Route<string>;
+  }) => Route<string> | undefined;
+  getFocusedRoute: () => Route<string>;
+  style?: React.CSSProperties;
+};
+
+export default function HeaderContainer({
+  scenes,
+  getFocusedRoute,
+  getPreviousRoute,
+  style,
+}: Props) {
+  const focusedRoute = getFocusedRoute();
+
+  return (
+    <div style={style}>
+      {scenes.slice(-3).map((scene, i, self) => {
+        if (i !== self.length - 1 || !scene) {
+          return null;
+        }
+
+        const { options } = scene.descriptor;
+        const isFocused = focusedRoute.key === scene.route.key;
+        const previousRoute = getPreviousRoute({ route: scene.route });
+
+        const props = {
+          canGoBack: !previousRoute,
+          route: scene.route,
+          descriptor: scene.descriptor,
+          navigation: scene.descriptor.navigation as WebStackNavigationProp<
+            ParamListBase
+          >,
+        };
+
+        return (
+          <NavigationContext.Provider
+            key={scene.route.key}
+            value={scene.descriptor.navigation}
+          >
+            <NavigationRouteContext.Provider value={scene.route}>
+              <div aria-hidden={isFocused ? true : false}>
+                {options.headerShown !== false ? (
+                  options.header !== undefined ? (
+                    options.header(props)
+                  ) : (
+                    <Header {...props} />
+                  )
+                ) : null}
+              </div>
+            </NavigationRouteContext.Provider>
+          </NavigationContext.Provider>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { RouteProp, ParamListBase, useTheme } from '@react-navigation/native';
+import HeaderBackButton from './HeaderBackButton';
+import {
+  WebStackHeaderLeftButtonProps,
+  WebStackHeaderTitleProps,
+  WebStackHeaderOptions,
+  WebStackDescriptor,
+} from '../../types';
+
+type Props = WebStackHeaderOptions & {
+  headerTitle: (props: WebStackHeaderTitleProps) => React.ReactNode;
+  onGoBack?: () => void;
+  title?: string;
+  route: RouteProp<ParamListBase, string>;
+  descriptor: WebStackDescriptor;
+};
+
+export default function HeaderSegment(props: Props) {
+  const {
+    title: currentTitle,
+    onGoBack,
+    headerTitle,
+    headerLeft: left = onGoBack
+      ? (props: WebStackHeaderLeftButtonProps) => (
+          <HeaderBackButton {...props} />
+        )
+      : undefined,
+    headerTintColor,
+    headerRight: right,
+    headerTitleStyle,
+    headerStyle,
+  } = props;
+
+  const { colors } = useTheme();
+
+  const leftButton = left
+    ? left({
+        onClick: onGoBack,
+        canGoBack: Boolean(onGoBack),
+      })
+    : null;
+
+  return (
+    <div
+      style={{
+        backgroundColor: colors.card,
+        borderBottomColor: colors.border,
+        ...styles.header,
+        ...headerStyle,
+      }}
+    >
+      {leftButton}
+      {headerTitle({
+        children: currentTitle,
+        style: { marginLeft: 18, marginRight: 16, ...headerTitleStyle },
+      })}
+      {right ? right({ tintColor: headerTintColor }) : null}
+    </div>
+  );
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  header: {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderBottomWidth: 1,
+  },
+};

packages/web-stack/src/views/Header/HeaderTitle.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { useTheme } from '@react-navigation/native';
+
+type Props = JSX.IntrinsicElements['h1'];
+
+export default function HeaderTitle({ style, ...rest }: Props) {
+  const { colors } = useTheme();
+
+  return (
+    <h1
+      {...rest}
+      style={{
+        color: style?.color === undefined ? colors.text : style?.color,
+        ...styles.title,
+        ...style,
+      }}
+    />
+  );
+}
+
+const styles = {
+  title: {
+    fontSize: 18,
+    fontWeight: 500,
+  },
+};

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  NavigationContext,
+  NavigationRouteContext,
+  Route,
+  RouteProp,
+  ParamListBase,
+  useTheme,
+} from '@react-navigation/native';
+import Header from '../Header/Header';
+import { WebStackDescriptor, WebStackNavigationProp } from '../../types';
+
+type Props = {
+  active: boolean;
+  focused: boolean;
+  closing: boolean;
+  route: RouteProp<ParamListBase, string>;
+  descriptor: WebStackDescriptor;
+  canGoBack: boolean;
+  renderScene: (props: { route: Route<string> }) => React.ReactNode;
+  onOpenRoute: (props: { route: Route<string> }) => void;
+  onCloseRoute: (props: { route: Route<string> }) => void;
+};
+
+function Card({
+  active,
+  closing,
+  focused,
+  canGoBack,
+  onCloseRoute,
+  onOpenRoute,
+  renderScene,
+  route,
+  descriptor,
+}: Props) {
+  const { colors } = useTheme();
+  const { options, navigation } = descriptor;
+
+  const headerProps = {
+    canGoBack,
+    route,
+    descriptor,
+    navigation: navigation as WebStackNavigationProp<ParamListBase>,
+  };
+
+  return (
+    <NavigationContext.Provider key={route.key} value={descriptor.navigation}>
+      <NavigationRouteContext.Provider value={route}>
+        <div
+          aria-hidden={focused ? true : false}
+          style={{
+            opacity: active ? 1 : 0,
+            pointerEvents: focused ? 'auto' : 'none',
+            backgroundColor: colors.background,
+            ...styles.container,
+            ...options.cardStyle,
+          }}
+          onTransitionEnd={() => {
+            if (closing) {
+              onCloseRoute({ route });
+            } else {
+              onOpenRoute({ route });
+            }
+          }}
+        >
+          {options.headerShown !== false ? (
+            options.header !== undefined ? (
+              options.header(headerProps)
+            ) : (
+              <Header {...headerProps} />
+            )
+          ) : null}
+          {renderScene({ route })}
+        </div>
+      </NavigationRouteContext.Provider>
+    </NavigationContext.Provider>
+  );
+}
+
+export default React.memo(Card);
+
+const styles = {
+  container: {
+    position: 'absolute' as const,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    transitionDuration: '200ms',
+  },
+};

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

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { Route, StackNavigationState } from '@react-navigation/native';
+import Card from './Card';
+import { WebStackDescriptorMap, WebStackDescriptor } from '../../types';
+
+type Props = {
+  state: StackNavigationState;
+  descriptors: WebStackDescriptorMap;
+  routes: Route<string>[];
+  openingRouteKeys: string[];
+  closingRouteKeys: string[];
+  onOpenRoute: (props: { route: Route<string> }) => void;
+  onCloseRoute: (props: { route: Route<string> }) => void;
+  renderScene: (props: { route: Route<string> }) => React.ReactNode;
+};
+
+type State = {
+  routes: Route<string>[];
+  descriptors: WebStackDescriptorMap;
+  scenes: { route: Route<string>; descriptor: WebStackDescriptor }[];
+};
+
+const FALLBACK_DESCRIPTOR = Object.freeze({ options: {} });
+
+export default class CardStack extends React.Component<Props, State> {
+  static getDerivedStateFromProps(props: Props, state: State) {
+    if (
+      props.routes === state.routes &&
+      props.descriptors === state.descriptors
+    ) {
+      return null;
+    }
+
+    return {
+      routes: props.routes,
+      scenes: props.routes.map((route, index, self) => {
+        const previousRoute = self[index - 1];
+        const nextRoute = self[index + 1];
+
+        const oldScene = state.scenes[index];
+
+        const descriptor =
+          props.descriptors[route.key] ||
+          state.descriptors[route.key] ||
+          (oldScene ? oldScene.descriptor : FALLBACK_DESCRIPTOR);
+
+        const nextDescriptor =
+          props.descriptors[nextRoute?.key] ||
+          state.descriptors[nextRoute?.key];
+
+        const previousDescriptor =
+          props.descriptors[previousRoute?.key] ||
+          state.descriptors[previousRoute?.key];
+
+        const scene = {
+          route,
+          descriptor,
+          __memo: [route, descriptor, nextDescriptor, previousDescriptor],
+        };
+
+        if (
+          oldScene &&
+          scene.__memo.every((it, i) => {
+            // @ts-ignore
+            return oldScene.__memo[i] === it;
+          })
+        ) {
+          return oldScene;
+        }
+
+        return scene;
+      }),
+      descriptors: props.descriptors,
+    };
+  }
+
+  state: State = {
+    routes: [],
+    scenes: [],
+    descriptors: this.props.descriptors,
+  };
+
+  render() {
+    const {
+      state,
+      routes,
+      closingRouteKeys,
+      onOpenRoute,
+      onCloseRoute,
+      renderScene,
+    } = this.props;
+
+    const { scenes } = this.state;
+
+    const focusedRoute = state.routes[state.index];
+
+    return (
+      <React.Fragment>
+        {routes.map((route, index, self) => {
+          const focused = focusedRoute.key === route.key;
+          const scene = scenes[index];
+
+          return (
+            <Card
+              key={route.key}
+              active={index === self.length - 1}
+              focused={focused}
+              closing={closingRouteKeys.includes(route.key)}
+              route={route as any}
+              descriptor={scene.descriptor}
+              canGoBack={scenes.length > index}
+              renderScene={renderScene}
+              onOpenRoute={onOpenRoute}
+              onCloseRoute={onCloseRoute}
+            />
+          );
+        })}
+      </React.Fragment>
+    );
+  }
+}

packages/web-stack/src/views/Stack/WebStackView.tsx

@@ -0,0 +1,371 @@
+import * as React from 'react';
+import {
+  StackActions,
+  StackNavigationState,
+  Route,
+} from '@react-navigation/native';
+
+import CardStack from './CardStack';
+import {
+  WebStackNavigationHelpers,
+  WebStackNavigationConfig,
+  WebStackDescriptorMap,
+} from '../../types';
+
+type Props = WebStackNavigationConfig & {
+  state: StackNavigationState;
+  navigation: WebStackNavigationHelpers;
+  descriptors: WebStackDescriptorMap;
+};
+
+type State = {
+  // Local copy of the routes which are actually rendered
+  routes: Route<string>[];
+  // Previous routes, to compare whether routes have changed or not
+  previousRoutes: Route<string>[];
+  // Previous descriptors, to compare whether descriptors have changed or not
+  previousDescriptors: WebStackDescriptorMap;
+  // List of routes being opened, we need to animate pushing of these new routes
+  openingRouteKeys: string[];
+  // List of routes being closed, we need to animate popping of these routes
+  closingRouteKeys: string[];
+  // List of routes being replaced, we need to keep a copy until the new route animates in
+  replacingRouteKeys: string[];
+  // Since the local routes can vary from the routes from props, we need to keep the descriptors for old routes
+  // Otherwise we won't be able to access the options for routes that were removed
+  descriptors: WebStackDescriptorMap;
+};
+
+/**
+ * Compare two arrays with primitive values as the content.
+ * We need to make sure that both values and order match.
+ */
+const isArrayEqual = (a: any[], b: any[]) =>
+  a.length === b.length && a.every((it, index) => it === b[index]);
+
+export default class StackView extends React.Component<Props, State> {
+  static getDerivedStateFromProps(
+    props: Readonly<Props>,
+    state: Readonly<State>
+  ) {
+    // If there was no change in routes, we don't need to compute anything
+    if (
+      (props.state.routes === state.previousRoutes ||
+        isArrayEqual(
+          props.state.routes.map((r) => r.key),
+          state.previousRoutes.map((r) => r.key)
+        )) &&
+      state.routes.length
+    ) {
+      let routes = state.routes;
+      let previousRoutes = state.previousRoutes;
+      let descriptors = props.descriptors;
+      let previousDescriptors = state.previousDescriptors;
+
+      if (props.descriptors !== state.previousDescriptors) {
+        descriptors = state.routes.reduce<WebStackDescriptorMap>(
+          (acc, route) => {
+            acc[route.key] =
+              props.descriptors[route.key] || state.descriptors[route.key];
+
+            return acc;
+          },
+          {}
+        );
+
+        previousDescriptors = props.descriptors;
+      }
+
+      if (props.state.routes !== state.previousRoutes) {
+        // if any route objects have changed, we should update them
+        const map = props.state.routes.reduce<Record<string, Route<string>>>(
+          (acc, route) => {
+            acc[route.key] = route;
+            return acc;
+          },
+          {}
+        );
+
+        routes = state.routes.map((route) => map[route.key] || route);
+        previousRoutes = props.state.routes;
+      }
+
+      return {
+        routes,
+        previousRoutes,
+        descriptors,
+        previousDescriptors,
+      };
+    }
+
+    // Here we determine which routes were added or removed to animate them
+    // We keep a copy of the route being removed in local state to be able to animate it
+
+    let routes =
+      props.state.index < props.state.routes.length - 1
+        ? // Remove any extra routes from the state
+          // The last visible route should be the focused route, i.e. at current index
+          props.state.routes.slice(0, props.state.index + 1)
+        : props.state.routes;
+
+    // Now we need to determine which routes were added and removed
+    let {
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
+      previousRoutes,
+    } = state;
+
+    const previousFocusedRoute = previousRoutes[previousRoutes.length - 1] as
+      | Route<string>
+      | undefined;
+    const nextFocusedRoute = routes[routes.length - 1];
+
+    const isAnimationEnabled = (key: string) => {
+      const descriptor = props.descriptors[key] || state.descriptors[key];
+
+      return descriptor ? descriptor.options.animationEnabled !== false : true;
+    };
+
+    const getAnimationTypeForReplace = (key: string) => {
+      const descriptor = props.descriptors[key] || state.descriptors[key];
+
+      return descriptor.options.animationTypeForReplace ?? 'push';
+    };
+
+    if (
+      previousFocusedRoute &&
+      previousFocusedRoute.key !== nextFocusedRoute.key
+    ) {
+      // We only need to animate routes if the focused route changed
+      // Animating previous routes won't be visible coz the focused route is on top of everything
+
+      if (!previousRoutes.some((r) => r.key === nextFocusedRoute.key)) {
+        // A new route has come to the focus, we treat this as a push
+        // A replace can also trigger this, the animation should look like push
+
+        if (
+          isAnimationEnabled(nextFocusedRoute.key) &&
+          !openingRouteKeys.includes(nextFocusedRoute.key)
+        ) {
+          // In this case, we need to animate pushing the focused route
+          // We don't care about animating any other added routes because they won't be visible
+          openingRouteKeys = [...openingRouteKeys, nextFocusedRoute.key];
+
+          closingRouteKeys = closingRouteKeys.filter(
+            (key) => key !== nextFocusedRoute.key
+          );
+          replacingRouteKeys = replacingRouteKeys.filter(
+            (key) => key !== nextFocusedRoute.key
+          );
+
+          if (!routes.some((r) => r.key === previousFocusedRoute.key)) {
+            // The previous focused route isn't present in state, we treat this as a replace
+
+            openingRouteKeys = openingRouteKeys.filter(
+              (key) => key !== previousFocusedRoute.key
+            );
+
+            if (getAnimationTypeForReplace(nextFocusedRoute.key) === 'pop') {
+              closingRouteKeys = [
+                ...closingRouteKeys,
+                previousFocusedRoute.key,
+              ];
+
+              // By default, new routes have a push animation, so we add it to `openingRouteKeys` before
+              // But since user configured it to animate the old screen like a pop, we need to add this without animation
+              // So remove it from `openingRouteKeys` which will remove the animation
+              openingRouteKeys = openingRouteKeys.filter(
+                (key) => key !== nextFocusedRoute.key
+              );
+
+              // Keep the route being removed at the end to animate it out
+              routes = [...routes, previousFocusedRoute];
+            } else {
+              replacingRouteKeys = [
+                ...replacingRouteKeys,
+                previousFocusedRoute.key,
+              ];
+
+              closingRouteKeys = closingRouteKeys.filter(
+                (key) => key !== previousFocusedRoute.key
+              );
+
+              // Keep the old route in the state because it's visible under the new route, and removing it will feel abrupt
+              // We need to insert it just before the focused one (the route being pushed)
+              // After the push animation is completed, routes being replaced will be removed completely
+              routes = routes.slice();
+              routes.splice(routes.length - 1, 0, previousFocusedRoute);
+            }
+          }
+        }
+      } else if (!routes.some((r) => r.key === previousFocusedRoute.key)) {
+        // The previously focused route was removed, we treat this as a pop
+
+        if (
+          isAnimationEnabled(previousFocusedRoute.key) &&
+          !closingRouteKeys.includes(previousFocusedRoute.key)
+        ) {
+          closingRouteKeys = [...closingRouteKeys, previousFocusedRoute.key];
+
+          // Sometimes a route can be closed before the opening animation finishes
+          // So we also need to remove it from the opening list
+          openingRouteKeys = openingRouteKeys.filter(
+            (key) => key !== previousFocusedRoute.key
+          );
+          replacingRouteKeys = replacingRouteKeys.filter(
+            (key) => key !== previousFocusedRoute.key
+          );
+
+          // Keep a copy of route being removed in the state to be able to animate it
+          routes = [...routes, previousFocusedRoute];
+        }
+      } else {
+        // Looks like some routes were re-arranged and no focused routes were added/removed
+        // i.e. the currently focused route already existed and the previously focused route still exists
+        // We don't know how to animate this
+      }
+    } else if (replacingRouteKeys.length || closingRouteKeys.length) {
+      // Keep the routes we are closing or replacing if animation is enabled for them
+      routes = routes.slice();
+      routes.splice(
+        routes.length - 1,
+        0,
+        ...state.routes.filter(({ key }) =>
+          isAnimationEnabled(key)
+            ? replacingRouteKeys.includes(key) || closingRouteKeys.includes(key)
+            : false
+        )
+      );
+    }
+
+    if (!routes.length) {
+      throw new Error(
+        'There should always be at least one route in the navigation state.'
+      );
+    }
+
+    const descriptors = routes.reduce<WebStackDescriptorMap>((acc, route) => {
+      acc[route.key] =
+        props.descriptors[route.key] || state.descriptors[route.key];
+
+      return acc;
+    }, {});
+
+    return {
+      routes,
+      previousRoutes: props.state.routes,
+      previousDescriptors: props.descriptors,
+      openingRouteKeys,
+      closingRouteKeys,
+      replacingRouteKeys,
+      descriptors,
+    };
+  }
+
+  state: State = {
+    routes: [],
+    previousRoutes: [],
+    previousDescriptors: {},
+    openingRouteKeys: [],
+    closingRouteKeys: [],
+    replacingRouteKeys: [],
+    descriptors: {},
+  };
+
+  private renderScene = ({ route }: { route: Route<string> }) => {
+    const descriptor =
+      this.state.descriptors[route.key] || this.props.descriptors[route.key];
+
+    if (!descriptor) {
+      return null;
+    }
+
+    return descriptor.render();
+  };
+
+  private handleOpenRoute = ({ route }: { route: Route<string> }) => {
+    const { state, navigation } = this.props;
+
+    if (
+      this.state.replacingRouteKeys.every((key) => key !== route.key) &&
+      state.routeNames.includes(route.name) &&
+      !state.routes.some((r) => r.key === route.key)
+    ) {
+      // If route isn't present in current state, assume that a close animation was cancelled
+      // So we need to add this route back to the state
+      navigation.navigate(route);
+    } else {
+      this.setState((state) => ({
+        routes: state.replacingRouteKeys.length
+          ? state.routes.filter(
+              (r) => !state.replacingRouteKeys.includes(r.key)
+            )
+          : state.routes,
+        openingRouteKeys: state.openingRouteKeys.filter(
+          (key) => key !== route.key
+        ),
+        closingRouteKeys: state.closingRouteKeys.filter(
+          (key) => key !== route.key
+        ),
+        replacingRouteKeys: [],
+      }));
+    }
+  };
+
+  private handleCloseRoute = ({ route }: { route: Route<string> }) => {
+    const { state, navigation } = this.props;
+
+    if (state.routes.some((r) => r.key === route.key)) {
+      // If a route exists in state, trigger a pop
+      // This will happen in when the route was closed from the card component
+      // e.g. When the close animation triggered from a gesture ends
+      navigation.dispatch({
+        ...StackActions.pop(),
+        source: route.key,
+        target: state.key,
+      });
+    } else {
+      // We need to clean up any state tracking the route and pop it immediately
+      this.setState((state) => ({
+        routes: state.routes.filter((r) => r.key !== route.key),
+        openingRouteKeys: state.openingRouteKeys.filter(
+          (key) => key !== route.key
+        ),
+        closingRouteKeys: state.closingRouteKeys.filter(
+          (key) => key !== route.key
+        ),
+      }));
+    }
+  };
+
+  render() {
+    const {
+      state,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      navigation,
+      ...rest
+    } = this.props;
+
+    const {
+      routes,
+      descriptors,
+      openingRouteKeys,
+      closingRouteKeys,
+    } = this.state;
+
+    return (
+      <CardStack
+        routes={routes}
+        openingRouteKeys={openingRouteKeys}
+        closingRouteKeys={closingRouteKeys}
+        onOpenRoute={this.handleOpenRoute}
+        onCloseRoute={this.handleCloseRoute}
+        renderScene={this.renderScene}
+        state={state}
+        descriptors={descriptors}
+        {...rest}
+      />
+    );
+  }
+}

packages/web-stack/tsconfig.build.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "paths": {}
+  }
+}

packages/web-stack/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig",
+  "references": [
+    { "path": "../core" },
+    { "path": "../routers" },
+    { "path": "../native" }
+  ],
+  "compilerOptions": {
+    "outDir": "./lib/typescript"
+  }
+}