1

package.json

@@ -6,7 +6,7 @@
     "android": "react-native run-android --active-arch-only",
     "ios": "react-native run-ios",
     "start": "react-native start",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint \"./src/**/*.{js,jsx,ts,tsx}\" --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx}\"",
     "buildRelease": "cd android && ./gradlew clean && ./gradlew assembleRelease",
     "open": "open ./android/app/build/outputs/apk/release/",

src/screens/WebviewScreen/WebviewScreen.tsx

@@ -9,7 +9,6 @@ import { getUserAgent } from '@hooks/persisted/useUserAgent';
 import { resolveUrl } from '@services/plugin/fetch';
 import { storage } from '@plugins/helpers/storage';
 import Appbar from './components/Appbar';
-import Menu from './components/Menu';
 
 type StorageData = {
   localStorage?: Record<string, any>;
@@ -29,7 +28,6 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
   const [canGoBack, setCanGoBack] = useState(false);
   const [canGoForward, setCanGoForward] = useState(false);
   const [tempData, setTempData] = useState<StorageData>();
-  const [menuVisible, setMenuVisible] = useState(false);
 
   const handleNavigation = (e: WebViewNavigation) => {
     if (!e.loading) {
@@ -67,25 +65,14 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
 
   return (
     <>
-      <Menu
-        theme={theme}
-        currentUrl={currentUrl}
-        webView={webViewRef}
-        visible={menuVisible}
-        setMenuVisible={setMenuVisible}
-      />
       <Appbar
         title={title}
         theme={theme}
         currentUrl={currentUrl}
         canGoBack={canGoBack}
         canGoForward={canGoForward}
         webView={webViewRef}
-        setMenuVisible={setMenuVisible}
-        goBack={() => {
-          saveData();
-          navigation.goBack();
-        }}
+        navigation={navigation}
       />
       <ProgressBar
         color={theme.primary}
@@ -101,10 +88,6 @@ const WebviewScreen = ({ route, navigation }: WebviewScreenProps) => {
         injectedJavaScript={injectJavaScriptCode}
         setDisplayZoomControls={true}
         setSupportMultipleWindows={false}
-        onShouldStartLoadWithRequest={request => {
-          console.log(request);
-          return true;
-        }}
         onMessage={({ nativeEvent }) =>
           setTempData(JSON.parse(nativeEvent.data))
         }

src/screens/WebviewScreen/components/Appbar.tsx

@@ -1,11 +1,14 @@
-import React from 'react';
-import { View, Text } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import MarqueeText from 'react-native-marquee';
+import React, { useState } from 'react';
+import { Share, View, Text, TouchableOpacity } from 'react-native';
 import { IconButton } from 'react-native-paper';
-import WebView from 'react-native-webview';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { WebView } from 'react-native-webview';
+import * as Linking from 'expo-linking';
 
+import { WebviewScreenProps } from '@navigators/types';
+import { getString } from '@strings/translations';
 import { ThemeColors } from '@theme/types';
+import { showToast } from '@utils/showToast';
 
 interface AppbarProps {
   title: string;
@@ -14,21 +17,77 @@ interface AppbarProps {
   canGoBack: boolean;
   canGoForward: boolean;
   webView: RefObject<WebView>;
-  goBack: () => void;
-  setMenuVisible: () => void;
+  navigation: WebviewScreenProps['navigation'];
 }
 
+const CustomMenu = ({ options, onSelect }) => {
+  return (
+    <View style={{ position: 'absolute', right: 16, top: 16 }}>
+      {options.map((option, index) => (
+        <TouchableOpacity
+          key={index}
+          style={{ padding: 8, backgroundColor: option.backgroundColor }}
+          onPress={() => onSelect(index)}
+        >
+          <Text style={{ color: option.color }}>{option.title}</Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};
+
 const Appbar: React.FC<AppbarProps> = ({
   title,
   theme,
   currentUrl,
   canGoBack,
   canGoForward,
   webView,
-  goBack,
-  setMenuVisible,
+  navigation,
 }) => {
   const { top } = useSafeAreaInsets();
+  const [menuVisible, setMenuVisible] = useState(false);
+
+  const menuOptions = [
+    {
+      title: getString('webview.refresh'),
+      backgroundColor: theme.surface2,
+      color: theme.onSurface,
+      onPress: () => {
+        setMenuVisible(false);
+        webView.current?.reload();
+      },
+    },
+    {
+      title: getString('webview.share'),
+      backgroundColor: theme.surface2,
+      color: theme.onSurface,
+      onPress: () => {
+        setMenuVisible(false);
+        Share.share({ message: currentUrl });
+      },
+    },
+    {
+      title: getString('webview.openInBrowser'),
+      backgroundColor: theme.surface2,
+      color: theme.onSurface,
+      onPress: () => {
+        setMenuVisible(false);
+        Linking.openURL(currentUrl);
+      },
+    },
+    {
+      title: getString('webview.clearData'),
+      backgroundColor: theme.surface2,
+      color: theme.onSurface,
+      onPress: () => {
+        setMenuVisible(false);
+        webView.current?.clearCache?.(true);
+        webView.current?.reload();
+        showToast(getString('webview.dataDeleted'));
+      },
+    },
+  ];
 
   return (
     <View
@@ -41,30 +100,21 @@ const Appbar: React.FC<AppbarProps> = ({
       <IconButton
         icon="close"
         iconColor={theme.onSurface}
-        onPress={goBack}
+        onPress={() => navigation.goBack()}
         theme={{ colors: { ...theme } }}
       />
 
-      <View style={{ flex: 1, justifyContent: 'center' }}>
+      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text
           style={{
             color: theme.onSurface,
-            textAlign: 'left',
+            textAlign: 'center',
           }}
           numberOfLines={1}
+          ellipsizeMode="tail"
         >
           {title}
         </Text>
-        <MarqueeText
-          style={{ color: theme.onSurface, textAlign: 'left' }}
-          speed={0.5}
-          marqueeOnStart={true}
-          loop={true}
-          consecutive={true}
-          delay={2000}
-        >
-          {currentUrl}
-        </MarqueeText>
       </View>
       <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
         <IconButton
@@ -88,6 +138,12 @@ const Appbar: React.FC<AppbarProps> = ({
           onPress={() => setMenuVisible(true)}
           theme={{ colors: { ...theme } }}
         />
+        {menuVisible && (
+          <CustomMenu
+            options={menuOptions}
+            onSelect={index => menuOptions[index].onPress()}
+          />
+        )}
       </View>
     </View>
   );