modal

Batorian · Mar 5, 2024 · 2a876cb · 2a876cb
1 parent ba4cade
commit 2a876cb
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -58,7 +58,7 @@
     "react-native-shimmer-placeholder": "^2.0.9",
     "react-native-tab-view": "^3.5.2",
     "react-native-vector-icons": "^9.0.0",
-    "react-native-webview": "^13.8.1",
+    "react-native-webview": "^13.2.2",
     "sanitize-html": "^2.12.1",
     "urlencode": "^2.0.0"
   },

diff --git a/src/screens/WebviewScreen/components/Appbar.tsx b/src/screens/WebviewScreen/components/Appbar.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Share, View, Text, TouchableOpacity } from 'react-native';
+import { Modal, Share, View, Text, TouchableOpacity } from 'react-native';
 import { IconButton } from 'react-native-paper';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { WebView } from 'react-native-webview';
@@ -54,7 +54,6 @@ const Appbar: React.FC<AppbarProps> = ({
       backgroundColor: theme.surface2,
       color: theme.onSurface,
       onPress: () => {
-        setMenuVisible(false);
         webView.current?.reload();
       },
     },
@@ -63,7 +62,6 @@ const Appbar: React.FC<AppbarProps> = ({
       backgroundColor: theme.surface2,
       color: theme.onSurface,
       onPress: () => {
-        setMenuVisible(false);
         Share.share({ message: currentUrl });
       },
     },
@@ -72,7 +70,6 @@ const Appbar: React.FC<AppbarProps> = ({
       backgroundColor: theme.surface2,
       color: theme.onSurface,
       onPress: () => {
-        setMenuVisible(false);
         Linking.openURL(currentUrl);
       },
     },
@@ -81,7 +78,6 @@ const Appbar: React.FC<AppbarProps> = ({
       backgroundColor: theme.surface2,
       color: theme.onSurface,
       onPress: () => {
-        setMenuVisible(false);
         webView.current?.clearCache?.(true);
         webView.current?.reload();
         showToast(getString('webview.dataDeleted'));
@@ -138,12 +134,32 @@ const Appbar: React.FC<AppbarProps> = ({
           onPress={() => setMenuVisible(true)}
           theme={{ colors: { ...theme } }}
         />
-        {menuVisible && (
-          <CustomMenu
-            options={menuOptions}
-            onSelect={index => menuOptions[index].onPress()}
-          />
-        )}
+        <Modal
+          animationType="fade"
+          transparent={true}
+          visible={menuVisible}
+          onRequestClose={() => {
+            setModalVisible(false);
+          }}
+        >
+          <Pressable
+            onPress={() => setMenuVisible(false)}
+            style={{
+              flex: 1,
+              width: '100%',
+              height: '100%',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              alignItems: 'center',
+              backgroundColor: 'rgba(0,0,0,0.62)',
+            }}
+          >
+            <CustomMenu
+              options={menuOptions}
+              onSelect={index => menuOptions[index].onPress()}
+            />
+          </Pressable>
+        </Modal>
       </View>
     </View>
   );