fix(modal): Fix event handlers inside modal

Emurgo · Oct 12, 2023 · 84e2653 · 84e2653
1 parent 339ee7e
commit 84e2653
Showing 1 changed file with 41 additions and 31 deletions.
diff --git a/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx b/apps/wallet-mobile/src/components/Modal/ModalScreen.tsx
@@ -2,6 +2,7 @@ import {useCardAnimation} from '@react-navigation/stack'
 import React from 'react'
 import {
   Animated,
+  GestureResponderEvent,
   KeyboardAvoidingView,
   NativeTouchEvent,
   Platform,
@@ -36,44 +37,50 @@ export const ModalScreen = () => {
   }
 
   return (
-    <Pressable style={styles.backdrop} onPress={closeModal}>
-      <KeyboardAvoidingView
-        style={styles.root}
-        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-        enabled={Platform.OS === 'ios'}
-      >
-        <Animated.View
-          style={[
-            {
-              height: height,
-              transform: [
-                {
-                  translateY: current.progress.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [height, 0],
-                    extrapolate: 'clamp',
-                  }),
-                },
-              ],
-            },
-            styles.animatedView,
-          ]}
+    <>
+      <View style={styles.backdrop}>
+        <Pressable style={styles.cancellableArea} onPress={closeModal} />
+        <KeyboardAvoidingView
+          style={styles.root}
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          enabled={Platform.OS === 'ios'}
         >
-          <View style={styles.sheet} onResponderMove={onResponderMove} onStartShouldSetResponder={() => true}>
-            <Header />
+          <Animated.View
+            style={[
+              {
+                height: height,
+                transform: [
+                  {
+                    translateY: current.progress.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [height, 0],
+                      extrapolate: 'clamp',
+                    }),
+                  },
+                ],
+              },
+              styles.animatedView,
+            ]}
+          >
+            <View style={styles.sheet}>
+              <Header onResponderMove={onResponderMove} onStartShouldSetResponder={() => true} />
 
-            {content}
-          </View>
-        </Animated.View>
-      </KeyboardAvoidingView>
-    </Pressable>
+              {content}
+            </View>
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </View>
+    </>
   )
 }
 
-const Header = () => {
+const Header = (props: {
+  onResponderMove?: ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => void
+  onStartShouldSetResponder?: () => boolean
+}) => {
   const {title} = useModal()
   return (
-    <View style={styles.header}>
+    <View style={styles.header} {...props}>
       <Spacer height={8} />
 
       <SliderIndicator />
@@ -94,6 +101,9 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
     alignSelf: 'stretch',
   },
+  cancellableArea: {
+    flexGrow: 1,
+  },
   backdrop: {
     ...StyleSheet.absoluteFillObject,
     backgroundColor: 'rgba(0, 0, 0, 0.5)',