Add useGestureHandler to Modal (#1483)

Author: M-i-k-e-l

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -68,40 +68,37 @@ class PanViewScreen extends Component {
   };
 
   renderDialog = () => {
-    const Container = Constants.isAndroid ? GestureHandlerRootView : React.Fragment;
-    const containerProps = Constants.isAndroid ? {style: styles.gestureHandler} : {};
     return (
       <View flex>
         <Modal
           transparent
           onBackgroundPress={this.onDialogDismissed}
           overlayBackgroundColor={overlayBackgroundColor}
+          useGestureHandlerRootView
           visible
         >
-          <Container {...containerProps}>
-            <PanView
-              directions={[PanView.directions.DOWN]}
-              dismissible
-              springBack
-              // threshold={{y: 10}}
-              containerStyle={styles.panView}
-              onDismiss={this.onDialogDismissed}
-            >
-              <View style={styles.dialog}>
-                <Text text60 margin-s2>
-                  Title (swipe here)
-                </Text>
-                <View height={1} bg-grey40/>
-                <FlatList
-                  showsVerticalScrollIndicator={false}
-                  style={styles.verticalScroll}
-                  data={colors}
-                  renderItem={this.renderVerticalItem}
-                  keyExtractor={this.keyExtractor}
-                />
-              </View>
-            </PanView>
-          </Container>
+          <PanView
+            directions={[PanView.directions.DOWN]}
+            dismissible
+            springBack
+            // threshold={{y: 10}}
+            containerStyle={styles.panView}
+            onDismiss={this.onDialogDismissed}
+          >
+            <View style={styles.dialog}>
+              <Text text60 margin-s2>
+                Title (swipe here)
+              </Text>
+              <View height={1} bg-grey40/>
+              <FlatList
+                showsVerticalScrollIndicator={false}
+                style={styles.verticalScroll}
+                data={colors}
+                renderItem={this.renderVerticalItem}
+                keyExtractor={this.keyExtractor}
+              />
+            </View>
+          </PanView>
         </Modal>
       </View>
     );

generatedTypes/components/modal/index.d.ts

@@ -28,6 +28,10 @@ export interface ModalProps extends RNModalProps {
      * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
      */
     accessibilityLabel?: string;
+    /**
+     * Should add a GestureHandlerRootView (Android only)
+     */
+    useGestureHandlerRootView?: boolean;
 }
 /**
  * @description: Component that present content on top of the invoking screen

src/components/modal/index.tsx

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {
   StyleSheet,
   Modal as RNModal,
@@ -42,6 +43,10 @@ export interface ModalProps extends RNModalProps {
    * label is constructed by traversing all the children and accumulating all the Text nodes separated by space.
    */
   accessibilityLabel?: string;
+  /**
+   * Should add a GestureHandlerRootView (Android only)
+   */
+  useGestureHandlerRootView?: boolean;
 }
 
 /**
@@ -81,24 +86,29 @@ class Modal extends Component<ModalProps> {
           {/*
             // @ts-ignore */}
           <TouchableWithoutFeedback {...accessibilityProps} onPress={onBackgroundPress}>
-            <View style={isScreenReaderEnabled ? styles.accessibleOverlayView : styles.overlayView}/>
+            <View style={isScreenReaderEnabled ? styles.accessibleOverlayView : styles.fill}/>
           </TouchableWithoutFeedback>
         </View>
       );
     }
   }
 
   render() {
-    const {blurView, enableModalBlur, visible, ...others} = this.props;
+    const {blurView, enableModalBlur, visible, useGestureHandlerRootView, ...others} = this.props;
     const defaultContainer = enableModalBlur && Constants.isIOS && BlurView ? BlurView : View;
+    const useGestureHandler = useGestureHandlerRootView && Constants.isAndroid;
+    const GestureContainer = useGestureHandler ? GestureHandlerRootView : React.Fragment;
+    const gestureContainerProps = useGestureHandler ? {style: styles.fill} : {};
     const Container: any = blurView ? blurView : defaultContainer;
 
     return (
       <RNModal visible={Boolean(visible)} {...others}>
-        <Container style={{flex: 1}} blurType="light">
-          {this.renderTouchableOverlay()}
-          {this.props.children}
-        </Container>
+        <GestureContainer {...gestureContainerProps}>
+          <Container style={styles.fill} blurType="light">
+            {this.renderTouchableOverlay()}
+            {this.props.children}
+          </Container>
+        </GestureContainer>
       </RNModal>
     );
   }
@@ -108,7 +118,7 @@ const styles = StyleSheet.create({
   touchableOverlay: {
     ...StyleSheet.absoluteFillObject
   },
-  overlayView: {
+  fill: {
     flex: 1
   },
   accessibleOverlayView: {