fix: webview services

screens/e-services/ui/EServicesCategoryScreen.tsx

@@ -1,42 +1,54 @@
-import Express_diagnistika from '@/assets/images/Express_diagnistika.png';
-import { useTheme } from '@/components/ThemeContext';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { Image } from 'expo-image';
-import { router } from 'expo-router';
-import { ChevronLeft, XIcon } from 'lucide-react-native';
-import React, { useRef, useState } from 'react';
-import { ActivityIndicator, FlatList, Modal, Text, TouchableOpacity, View } from 'react-native';
-import { RefreshControl } from 'react-native-gesture-handler';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { WebView } from 'react-native-webview';
-import { eservices_api } from '../lib/api';
+import Express_diagnistika from "@/assets/images/Express_diagnistika.png";
+import { useTheme } from "@/components/ThemeContext";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { router } from "expo-router";
+import { useState } from "react";
+import {
+  ActivityIndicator,
+  FlatList,
+  Text,
+  ToastAndroid,
+  TouchableOpacity,
+  View,
+} from "react-native";
+import { RefreshControl } from "react-native-gesture-handler";
+import * as WebBrowser from "expo-web-browser";
+import { eservices_api } from "../lib/api";
+import { useTranslation } from "react-i18next";
 
 const dark = {
-  bg: '#0f172a',
-  card: '#334155',
-  border: '#1e293b',
-  muted: '#334155',
-  text: '#E5B037',
-  subText: '#0B0F2C',
+  bg: "#0f172a",
+  card: "#334155",
+  border: "#1e293b",
+  muted: "#334155",
+  text: "#E5B037",
+  subText: "#0B0F2C",
 };
 
 export default function EServicesCategoryScreen() {
   const { isDark } = useTheme();
-  const [modalVisible, setModalVisible] = useState(false);
-  const webviewRef = useRef<WebView>(null);
-  const [webUrl, setWebUrl] = React.useState<string | null>(null);
   const [refreshing, setRefreshing] = useState(false);
   const queryClient = useQueryClient();
+  const { t } = useTranslation();
 
   const { data, isLoading } = useQuery({
-    queryKey: ['goverment_category'],
+    queryKey: ["goverment_category"],
     queryFn: () => eservices_api.category(),
   });
 
+  const handleOpenBrowser = async (fileUrl: string) => {
+    try {
+      await WebBrowser.openBrowserAsync(fileUrl);
+    } catch (error) {
+      ToastAndroid.show(t("Xatolik yuz berdi"), ToastAndroid.TOP);
+    }
+  };
+
   const onRefresh = async () => {
     setRefreshing(true);
     try {
-      await queryClient.refetchQueries({ queryKey: ['goverment_category'] });
+      await queryClient.refetchQueries({ queryKey: ["goverment_category"] });
     } finally {
       setRefreshing(false);
     }
@@ -52,22 +64,21 @@ export default function EServicesCategoryScreen() {
 
   const staticCategory = {
     id: 0,
-    name: 'Express Diagnostika',
+    name: "Express Diagnostika",
     image: Express_diagnistika,
-    url: 'https://myorg.uz/ru',
+    url: "https://myorg.uz/ru",
   };
 
   const categories = [staticCategory, ...(data?.data?.data?.results ?? [])];
 
   const handlePress = (item: any) => {
     if (item.id === 0 && item.url) {
-      setWebUrl(item.url);
-      setModalVisible(true);
+      handleOpenBrowser(item.url);
       return;
     }
 
     router.push({
-      pathname: '/(dashboard)/e-service/e-services-category',
+      pathname: "/(dashboard)/e-service/e-services-category",
       params: {
         categoryId: item.id,
         categoryName: item.name,
@@ -79,7 +90,7 @@ export default function EServicesCategoryScreen() {
     <View
       style={{
         flex: 1,
-        backgroundColor: isDark ? dark.bg : '#f8fafc',
+        backgroundColor: isDark ? dark.bg : "#f8fafc",
         padding: 16,
       }}
     >
@@ -91,8 +102,8 @@ export default function EServicesCategoryScreen() {
           <RefreshControl
             refreshing={refreshing}
             onRefresh={onRefresh}
-            tintColor={isDark ? '#f8fafc' : '#020617'}
-            colors={['#3b82f6']}
+            tintColor={isDark ? "#f8fafc" : "#020617"}
+            colors={["#3b82f6"]}
           />
         }
         renderItem={({ item }) => (
@@ -101,13 +112,13 @@ export default function EServicesCategoryScreen() {
             onPress={() => handlePress(item)}
             style={{
               marginHorizontal: 1,
-              backgroundColor: isDark ? '#FDFDFD' : '#ffffff',
+              backgroundColor: isDark ? "#FDFDFD" : "#ffffff",
               borderRadius: 16,
-              flexDirection: 'row',
-              alignItems: 'center',
+              flexDirection: "row",
+              alignItems: "center",
               borderWidth: isDark ? 1 : 0,
-              borderColor: isDark ? dark.border : 'transparent',
-              shadowColor: '#000',
+              borderColor: isDark ? dark.border : "transparent",
+              shadowColor: "#000",
               shadowOffset: { width: 0, height: 2 },
               shadowOpacity: 0.15,
               shadowRadius: 4,
@@ -116,98 +127,31 @@ export default function EServicesCategoryScreen() {
           >
             <View
               style={{
-                width: '100%',
+                width: "100%",
                 height: 100,
                 borderRadius: 12,
-                alignItems: 'center',
-                justifyContent: 'center',
+                alignItems: "center",
+                justifyContent: "center",
                 marginRight: 14,
                 padding: 2,
-                overflow: 'hidden',
+                overflow: "hidden",
               }}
             >
               {item.image ? (
                 <Image
                   source={item.image}
-                  style={{ width: '100%', height: '100%' }}
+                  style={{ width: "100%", height: "100%" }}
                   contentFit="contain"
                 />
               ) : (
-                <Text style={{ fontWeight: '700', color: dark.text }}>{item.name[0]}</Text>
+                <Text style={{ fontWeight: "700", color: dark.text }}>
+                  {item.name[0]}
+                </Text>
               )}
             </View>
           </TouchableOpacity>
         )}
       />
-      <Modal visible={modalVisible} animationType="slide">
-        <SafeAreaView
-          style={{
-            flex: 1,
-            backgroundColor: isDark ? '#0f172a' : '#f8fafc',
-          }}
-        >
-          {/* WebView Header */}
-          <View
-            style={{
-              flexDirection: 'row',
-              paddingHorizontal: 16,
-              paddingVertical: 12,
-              backgroundColor: isDark ? '#1e293b' : '#f8fafc',
-              alignItems: 'center',
-              justifyContent: 'space-between',
-              borderBottomWidth: 1,
-              borderBottomColor: isDark ? '#334155' : '#e2e8f0',
-            }}
-          >
-            <TouchableOpacity
-              onPress={() => webviewRef.current?.goBack()}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
-            </TouchableOpacity>
-
-            <Text
-              style={{
-                flex: 1,
-                textAlign: 'center',
-                fontSize: 16,
-                fontWeight: '600',
-                color: isDark ? '#f1f5f9' : '#0f172a',
-              }}
-              numberOfLines={1}
-            >
-              {webUrl}
-            </Text>
-
-            <TouchableOpacity
-              onPress={() => setModalVisible(false)}
-              hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-            >
-              <XIcon size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
-            </TouchableOpacity>
-          </View>
-
-          {/* WebView */}
-          {webUrl && (
-            <WebView
-              ref={webviewRef}
-              originWhitelist={['*']}
-              javaScriptEnabled
-              domStorageEnabled
-              onShouldStartLoadWithRequest={(request) => {
-                // iOS va Android uchun barcha URLlarni WebView ichida ochish
-                return true;
-              }}
-              source={{ uri: webUrl }}
-              style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}
-              startInLoadingState
-              renderLoading={() => (
-                <ActivityIndicator color="#3b82f6" size="large" style={{ flex: 1 }} />
-              )}
-            />
-          )}
-        </SafeAreaView>
-      </Modal>
     </View>
   );
 }