fix: No interaction on Android webview (#59)

src/components/Modal.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import styled, { css } from 'styled-components/native';
-import { Pressable } from 'react-native';
 import { useNavigation, StackActions } from '@react-navigation/native';
 import useDefaultStyles from './Colors';
 
@@ -8,12 +7,12 @@ interface Props {
     fullSize?: boolean;
 }
 
-const Background = styled(Pressable)`
+const Background = styled.View`
     flex: 1;
     justify-content: center;
 `;
 
-const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
+const Container = styled.View<Pick<Props, 'fullSize'>>`
     margin: auto 20px;
     padding: 4px;
     border-radius: 12px;
@@ -27,6 +26,10 @@ const Container = styled(Pressable)<Pick<Props, 'fullSize'>>`
     `}
 `;
 
+const Spacer = styled.Pressable`
+    flex: 1;
+`;  
+
 const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
     const defaultStyles = useDefaultStyles();
     const navigation = useNavigation();
@@ -35,10 +38,12 @@ const Modal: React.FC<Props> = ({ children, fullSize = true }) => {
     }, [navigation]);
 
     return (
-        <Background style={defaultStyles.modal} onPress={closeModal}>
+        <Background style={defaultStyles.modal}>
+            {!fullSize && <Spacer onPress={closeModal} />}
             <Container style={defaultStyles.modalInner} fullSize={fullSize}>
                 {children}
             </Container>
+            {!fullSize && <Spacer onPress={closeModal} />}
         </Background>
     );
 };