fix: 🐛 handle close of ModalWebView for Android

packages/app/components/modalWebView.component.js

@@ -1,28 +1,39 @@
 import { useApi } from '@skolplattformen/api-hooks'
 import { Icon, Text } from '@ui-kitten/components'
 import URI from 'jsuri'
-import React from 'react'
+import React, { useState } from 'react'
 import { Modal, StyleSheet, View } from 'react-native'
-import { TouchableOpacity } from 'react-native-gesture-handler'
+import { TouchableOpacity } from 'react-native'
 import { SafeAreaView } from 'react-native-safe-area-context'
 import { WebView } from 'react-native-webview'
 
 export const ModalWebView = ({ url, onClose }) => {
+  const [modalVisible, setModalVisible] = useState(true);
   const { api } = useApi()
   const cookie = api.getSessionCookie()
   const uri = new URI(url)
 
+  const closeModal = () => {
+    setModalVisible(false)
+    onClose()
+  }
+
   return (
-    <Modal>
+    <Modal
+      animationType="slide"
+      statusBarTranslucent={true}
+      visible={modalVisible}
+      onRequestClose={closeModal}>
       <SafeAreaView style={styles.container}>
         <View style={styles.headerWrapper}>
           <View style={styles.header}>
             <Text category="s1">{uri.host()}</Text>
-            <TouchableOpacity onPress={onClose}>
+            <TouchableOpacity onPress={closeModal}>
               <Icon name="close-circle" style={styles.icon} fill="#333333" />
             </TouchableOpacity>
           </View>
         </View>
+
         <WebView
           style={styles.webview}
           source={{ uri: url, headers: { cookie } }}