fix: wrap navigators in gesture handler root

kidroca · Feb 2, 2020 · 41a5e1a · 41a5e1a
1 parent 3d937d1
commit 41a5e1a
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 88 deletions.
diff --git a/example/package.json b/example/package.json
@@ -21,13 +21,13 @@
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "~1.5.3",
+    "react-native-gesture-handler": "~1.5.5",
     "react-native-paper": "^3.5.0",
     "react-native-reanimated": "^1.4.0",
     "react-native-restart": "^0.0.13",
     "react-native-safe-area-context": "^0.6.2",
     "react-native-screens": "^2.0.0-alpha.33",
-    "react-native-tab-view": "2.11.0",
+    "react-native-tab-view": "2.13.0",
     "react-native-unimodules": "^0.7.0",
     "react-native-web": "^0.11.7"
   },

diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -42,7 +42,7 @@
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.3",
+    "react-native-gesture-handler": "^1.5.5",
     "react-native-reanimated": "^1.4.0",
     "react-native-safe-area-context": "^0.6.2",
     "react-native-screens": "^2.0.0-alpha.33",

diff --git a/packages/drawer/src/views/DrawerView.tsx b/packages/drawer/src/views/DrawerView.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  View,
   Dimensions,
   StyleSheet,
   I18nManager,
@@ -10,7 +11,10 @@ import {
 } from 'react-native';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
-import { PanGestureHandler } from 'react-native-gesture-handler';
+import {
+  PanGestureHandler,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler';
 import {
   DrawerNavigationState,
   DrawerActions,
@@ -57,6 +61,8 @@ const getDefaultDrawerWidth = ({
   return Math.min(smallerAxisSize - appBarHeight, maxWidth);
 };
 
+const GestureHandlerWrapper = GestureHandlerRootView ?? View;
+
 /**
  * Component that renders the drawer.
  */
@@ -194,40 +200,42 @@ export default function DrawerView({
   const { gestureEnabled } = descriptors[activeKey].options;
 
   return (
-    <SafeAreaProviderCompat>
-      <DrawerGestureContext.Provider value={drawerGestureRef}>
-        <Drawer
-          open={isDrawerOpen}
-          gestureEnabled={gestureEnabled !== false}
-          onOpen={handleDrawerOpen}
-          onClose={handleDrawerClose}
-          onGestureRef={ref => {
-            // @ts-ignore
-            drawerGestureRef.current = ref;
-          }}
-          gestureHandlerProps={gestureHandlerProps}
-          drawerType={drawerType}
-          drawerPosition={drawerPosition}
-          sceneContainerStyle={[
-            { backgroundColor: colors.background },
-            sceneContainerStyle,
-          ]}
-          drawerStyle={[
-            { width: drawerWidth, backgroundColor: colors.card },
-            drawerStyle,
-          ]}
-          overlayStyle={{ backgroundColor: overlayColor }}
-          swipeEdgeWidth={edgeWidth}
-          swipeDistanceThreshold={minSwipeDistance}
-          hideStatusBar={hideStatusBar}
-          statusBarAnimation={statusBarAnimation}
-          renderDrawerContent={renderNavigationView}
-          renderSceneContent={renderContent}
-          keyboardDismissMode={keyboardDismissMode}
-          drawerPostion={drawerPosition}
-        />
-      </DrawerGestureContext.Provider>
-    </SafeAreaProviderCompat>
+    <GestureHandlerWrapper style={styles.content}>
+      <SafeAreaProviderCompat>
+        <DrawerGestureContext.Provider value={drawerGestureRef}>
+          <Drawer
+            open={isDrawerOpen}
+            gestureEnabled={gestureEnabled !== false}
+            onOpen={handleDrawerOpen}
+            onClose={handleDrawerClose}
+            onGestureRef={ref => {
+              // @ts-ignore
+              drawerGestureRef.current = ref;
+            }}
+            gestureHandlerProps={gestureHandlerProps}
+            drawerType={drawerType}
+            drawerPosition={drawerPosition}
+            sceneContainerStyle={[
+              { backgroundColor: colors.background },
+              sceneContainerStyle,
+            ]}
+            drawerStyle={[
+              { width: drawerWidth, backgroundColor: colors.card },
+              drawerStyle,
+            ]}
+            overlayStyle={{ backgroundColor: overlayColor }}
+            swipeEdgeWidth={edgeWidth}
+            swipeDistanceThreshold={minSwipeDistance}
+            hideStatusBar={hideStatusBar}
+            statusBarAnimation={statusBarAnimation}
+            renderDrawerContent={renderNavigationView}
+            renderSceneContent={renderContent}
+            keyboardDismissMode={keyboardDismissMode}
+            drawerPostion={drawerPosition}
+          />
+        </DrawerGestureContext.Provider>
+      </SafeAreaProviderCompat>
+    </GestureHandlerWrapper>
   );
 }
 

diff --git a/packages/material-top-tabs/package.json b/packages/material-top-tabs/package.json
@@ -41,9 +41,9 @@
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.3",
+    "react-native-gesture-handler": "^1.5.5",
     "react-native-reanimated": "^1.4.0",
-    "react-native-tab-view": "^2.11.0",
+    "react-native-tab-view": "^2.13.0",
     "typescript": "^3.7.4"
   },
   "peerDependencies": {
@@ -52,7 +52,7 @@
     "react-native": "*",
     "react-native-gesture-handler": "^1.0.0",
     "react-native-reanimated": "^1.0.0",
-    "react-native-tab-view": "^2.11.0"
+    "react-native-tab-view": "^2.13.0"
   },
   "@react-native-community/bob": {
     "source": "src",

diff --git a/packages/stack/package.json b/packages/stack/package.json
@@ -43,7 +43,7 @@
     "del-cli": "^3.0.0",
     "react": "~16.9.0",
     "react-native": "~0.61.5",
-    "react-native-gesture-handler": "^1.5.3",
+    "react-native-gesture-handler": "^1.5.5",
     "react-native-safe-area-context": "^0.6.2",
     "react-native-screens": "^2.0.0-alpha.33",
     "typescript": "^3.7.4"

diff --git a/packages/stack/src/views/Stack/StackView.tsx b/packages/stack/src/views/Stack/StackView.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Platform } from 'react-native';
+import { View, Platform, StyleSheet } from 'react-native';
 import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { Route } from '@react-navigation/native';
 import { StackActions, StackNavigationState } from '@react-navigation/routers';
 
@@ -40,7 +41,9 @@ type State = {
   descriptors: StackDescriptorMap;
 };
 
-class StackView extends React.Component<Props, State> {
+const GestureHandlerWrapper = GestureHandlerRootView ?? View;
+
+export default class StackView extends React.Component<Props, State> {
   static getDerivedStateFromProps(
     props: Readonly<Props>,
     state: Readonly<State>
@@ -369,38 +372,44 @@ class StackView extends React.Component<Props, State> {
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
-      <SafeAreaProviderCompat>
-        <SafeAreaConsumer>
-          {insets => (
-            <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
-              {props => (
-                <CardStack
-                  mode={mode}
-                  insets={insets as EdgeInsets}
-                  getPreviousRoute={this.getPreviousRoute}
-                  getGesturesEnabled={this.getGesturesEnabled}
-                  routes={routes}
-                  openingRouteKeys={openingRouteKeys}
-                  closingRouteKeys={closingRouteKeys}
-                  onOpenRoute={this.handleOpenRoute}
-                  onCloseRoute={this.handleCloseRoute}
-                  onTransitionStart={this.handleTransitionStart}
-                  onTransitionEnd={this.handleTransitionEnd}
-                  renderHeader={this.renderHeader}
-                  renderScene={this.renderScene}
-                  headerMode={headerMode}
-                  state={state}
-                  descriptors={descriptors}
-                  {...rest}
-                  {...props}
-                />
-              )}
-            </KeyboardManager>
-          )}
-        </SafeAreaConsumer>
-      </SafeAreaProviderCompat>
+      <GestureHandlerWrapper style={styles.container}>
+        <SafeAreaProviderCompat>
+          <SafeAreaConsumer>
+            {insets => (
+              <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
+                {props => (
+                  <CardStack
+                    mode={mode}
+                    insets={insets as EdgeInsets}
+                    getPreviousRoute={this.getPreviousRoute}
+                    getGesturesEnabled={this.getGesturesEnabled}
+                    routes={routes}
+                    openingRouteKeys={openingRouteKeys}
+                    closingRouteKeys={closingRouteKeys}
+                    onOpenRoute={this.handleOpenRoute}
+                    onCloseRoute={this.handleCloseRoute}
+                    onTransitionStart={this.handleTransitionStart}
+                    onTransitionEnd={this.handleTransitionEnd}
+                    renderHeader={this.renderHeader}
+                    renderScene={this.renderScene}
+                    headerMode={headerMode}
+                    state={state}
+                    descriptors={descriptors}
+                    {...rest}
+                    {...props}
+                  />
+                )}
+              </KeyboardManager>
+            )}
+          </SafeAreaConsumer>
+        </SafeAreaProviderCompat>
+      </GestureHandlerWrapper>
     );
   }
 }
 
-export default StackView;
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
diff --git a/yarn.lock b/yarn.lock
@@ -1025,6 +1025,13 @@
   dependencies:
     find-up "^4.0.0"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@evocateur/libnpmaccess@^3.1.2":
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz#ecf7f6ce6b004e9f942b098d92200be4a4b1c845"
@@ -2975,6 +2982,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.36"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.36.tgz#17ce0a235e9ffbcdcdf5095646b374c2bf615a4c"
+  integrity sha512-7TUK/k2/QGpEAv/BCwSHlYu3NXZhQ9ZwBYpzr9tjlPIL2C5BeGhH3DmVavRx3ZNyELX5TLC91JTz/cen6AAtIQ==
+
 "@types/hapi__joi@*":
   version "16.0.6"
   resolved "https://registry.yarnpkg.com/@types/hapi__joi/-/hapi__joi-16.0.6.tgz#aa8f7dff93fdd3db6506ca2433a8302d8819fad1"
@@ -8415,10 +8427,11 @@ gzip-size@5.1.1, gzip-size@^5.0.0:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
-hammerjs@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
-  integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
+"hammerjs@https://github.com/naver/hammer.js.git":
+  version "2.0.17-snapshot"
+  resolved "https://github.com/naver/hammer.js.git#54bc698b25edd6e1b76ca975ebaced5ce0467d51"
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
 
 handle-thing@^2.0.0:
   version "2.0.0"
@@ -13552,12 +13565,13 @@ react-is@^16.12.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-i
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.12.0.tgz#2cc0fe0fba742d97fd527c42a13bec4eeb06241c"
   integrity sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==
 
-react-native-gesture-handler@^1.5.3, react-native-gesture-handler@~1.5.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.3.tgz#191b44701fab7ba54c27a2438cb5eaa252666e66"
-  integrity sha512-y2/jw0uHAQtEPR02PHAah6tdMymrVtZFoHqjlEWdhK807w2sgU5CySYINK/nOTczd+zB4GMX+9euA3VfbGJ5aA==
+react-native-gesture-handler@^1.5.5, react-native-gesture-handler@~1.5.5:
+  version "1.5.5"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-1.5.5.tgz#513d6d65c4e24efd6d69be0006c7cd3bc9045358"
+  integrity sha512-viypCSRpo064BdpkVL2FnPLZiEK3piJ1WZxydFXgeZj+avJxd6VnTFoh9+IDFk2M0Eadoy6D1ZV1TqBMGHtqGg==
   dependencies:
-    hammerjs "^2.0.8"
+    "@egjs/hammerjs" "^2.0.17"
+    hammerjs "https://github.com/naver/hammer.js.git"
     hoist-non-react-statics "^2.3.1"
     invariant "^2.2.4"
     prop-types "^15.7.2"
@@ -13605,10 +13619,10 @@ react-native-screens@^2.0.0-alpha.33:
   dependencies:
     debounce "^1.2.0"
 
-react-native-tab-view@2.11.0, react-native-tab-view@^2.11.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.11.0.tgz#2e57d1f617ccc88c7f452708804f3409f880b700"
-  integrity sha512-vqetlxGO7A8bnqvXcB50MWpRZAImXFrDGz1WCQKdCqe03Ey3ZzENe7yLuWrtBJYlepGfOLAsmCXv+wW82Yfm1w==
+react-native-tab-view@2.13.0, react-native-tab-view@^2.13.0:
+  version "2.13.0"
+  resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.13.0.tgz#23037aa43b0f8f682ddc20415a4baaaf6f82ae8f"
+  integrity sha512-AeYbp/u91+D/C9+PmVEPBmFb3ixv8IkLMC3Sc5MajJ/fg0Zl3Of+BcEknBvTnKoe7Fj2y8+Qf9zorBbh5xzh4A==
 
 react-native-testing-library@^1.12.0:
   version "1.12.0"