fix: webview services

2026-03-02 09:49:02 +05:00
parent a0e5582fc7
commit bdc205b538
2 changed files with 160 additions and 253 deletions
--- a/screens/e-services/ui/EServicesCategoryScreen.tsx
+++ b/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>
  );
 }
--- a/screens/e-services/ui/EServicesScreen.tsx
+++ b/screens/e-services/ui/EServicesScreen.tsx
@@ -1,28 +1,26 @@
-// EServicesScreen.tsx
-import { useTheme } from '@/components/ThemeContext';
-import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query';
-import { Image } from 'expo-image';
-import { router, useLocalSearchParams } from 'expo-router';
-import { ChevronLeft, XIcon } from 'lucide-react-native';
-import React, { useCallback, useRef, useState } from 'react';
+import { useTheme } from "@/components/ThemeContext";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { Image } from "expo-image";
+import { router, useLocalSearchParams } from "expo-router";
+import { ChevronLeft } from "lucide-react-native";
+import { useCallback, useState } from "react";
 import {
  ActivityIndicator,
  Dimensions,
  FlatList,
-  Modal,
  StyleSheet,
  Text,
+  ToastAndroid,
  TouchableOpacity,
  View,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { WebView } from 'react-native-webview';
+} from "react-native";
+import * as WebBrowser from "expo-web-browser";

-import { useTranslation } from 'react-i18next';
-import { RefreshControl } from 'react-native-gesture-handler';
-import { eservices_api } from '../lib/api';
+import { useTranslation } from "react-i18next";
+import { RefreshControl } from "react-native-gesture-handler";
+import { eservices_api } from "../lib/api";

-const { width: SCREEN_WIDTH } = Dimensions.get('window');
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
 const PAGE_SIZE = 10;

 export interface GovermentServiceDataRes {
@@ -34,78 +32,100 @@ export interface GovermentServiceDataRes {

 export default function EServicesScreen() {
  const { isDark } = useTheme();
-  const [webUrl, setWebUrl] = useState<string | null>(null);
-  const [modalVisible, setModalVisible] = useState(false);
-  const webviewRef = useRef<WebView>(null);
  const params = useLocalSearchParams();
  const { t } = useTranslation();
  const [refreshing, setRefreshing] = useState(false);
  const queryClient = useQueryClient();

-  const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
-    useInfiniteQuery({
-      queryKey: ['goverment_service', params.categoryId],
-      queryFn: async ({ pageParam = 1 }) => {
-        const response = await eservices_api.list({
-          page: pageParam,
-          page_size: PAGE_SIZE,
-          category: Number(params.categoryId),
-        });
-        return response.data.data;
-      },
-      getNextPageParam: (lastPage) =>
-        lastPage.current_page < lastPage.total_pages ? lastPage.current_page + 1 : undefined,
-      initialPageParam: 1,
-    });
+  const {
+    data,
+    isLoading,
+    isError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ["goverment_service", params.categoryId],
+    queryFn: async ({ pageParam = 1 }) => {
+      const response = await eservices_api.list({
+        page: pageParam,
+        page_size: PAGE_SIZE,
+        category: Number(params.categoryId),
+      });
+      return response.data.data;
+    },
+    getNextPageParam: (lastPage) =>
+      lastPage.current_page < lastPage.total_pages
+        ? lastPage.current_page + 1
+        : undefined,
+    initialPageParam: 1,
+  });

-  const services: GovermentServiceDataRes[] = data?.pages.flatMap((p) => p.results) ?? [];
+  const services: GovermentServiceDataRes[] =
+    data?.pages.flatMap((p) => p.results) ?? [];

  const onRefresh = async () => {
    setRefreshing(true);
    try {
-      await queryClient.refetchQueries({ queryKey: ['goverment_service'] });
+      await queryClient.refetchQueries({ queryKey: ["goverment_service"] });
    } finally {
      setRefreshing(false);
    }
  };

-  const openWebView = (url: string) => {
-    setWebUrl(url);
-    setModalVisible(true);
+  const handleOpenBrowser = async (fileUrl: string) => {
+    ToastAndroid.show(t("Xatolik yuz berdi"), ToastAndroid.TOP);
+    try {
+      await WebBrowser.openBrowserAsync(fileUrl);
+    } catch (error) {
+      ToastAndroid.show(t("Xatolik yuz berdi"), ToastAndroid.TOP);
+    }
  };

  const renderItem = useCallback(
    ({ item }: { item: GovermentServiceDataRes }) => (
-      <View style={{ alignItems: 'center', marginTop: 12, width: CARD_WIDTH }}>
-        {/* Logo (bosilganda WebView ochiladi) */}
+      <View style={{ alignItems: "center", marginTop: 12, width: CARD_WIDTH }}>
        <TouchableOpacity
          style={[
            styles.card,
-            { backgroundColor: isDark ? '#1e293b' : '#f8fafc' },
+            { backgroundColor: isDark ? "#1e293b" : "#f8fafc" },
            isDark ? styles.darkShadow : styles.lightShadow,
          ]}
-          onPress={() => openWebView(item.url)}
+          onPress={() => handleOpenBrowser(item.url)}
        >
-          <Image source={{ uri: item.logo }} style={styles.logo} resizeMode="contain" />
+          <Image
+            source={{ uri: item.logo }}
+            style={styles.logo}
+            resizeMode="contain"
+          />
        </TouchableOpacity>

        {/* Name (alog‘ifa, faqat ko‘rsatish) */}
        <Text
          style={[
            styles.name,
-            { color: isDark ? '#f1f5f9' : '#0f172a', marginTop: 4, paddingHorizontal: 5 },
+            {
+              color: isDark ? "#f1f5f9" : "#0f172a",
+              marginTop: 4,
+              paddingHorizontal: 5,
+            },
          ]}
        >
          {item.name}
        </Text>
      </View>
    ),
-    [isDark]
+    [isDark],
  );

  if (isLoading) {
    return (
-      <View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
+      <View
+        style={[
+          styles.center,
+          { backgroundColor: isDark ? "#0f172a" : "#f8fafc" },
+        ]}
+      >
        <ActivityIndicator size="large" color="#3b82f6" />
      </View>
    );
@@ -113,40 +133,45 @@ export default function EServicesScreen() {

  if (isError) {
    return (
-      <View style={[styles.center, { backgroundColor: isDark ? '#0f172a' : '#f8fafc' }]}>
-        <Text style={{ color: 'red' }}>Xatolik yuz berdi</Text>
+      <View
+        style={[
+          styles.center,
+          { backgroundColor: isDark ? "#0f172a" : "#f8fafc" },
+        ]}
+      >
+        <Text style={{ color: "red" }}>Xatolik yuz berdi</Text>
      </View>
    );
  }

  return (
-    <View style={{ flex: 1, backgroundColor: isDark ? '#0f172a' : '#f8fafc' }}>
+    <View style={{ flex: 1, backgroundColor: isDark ? "#0f172a" : "#f8fafc" }}>
      {/* Header */}
      <View
        style={{
-          flexDirection: 'row',
-          alignItems: 'center',
+          flexDirection: "row",
+          alignItems: "center",
          paddingHorizontal: 16,
          gap: 10,
          paddingVertical: 12,
-          backgroundColor: isDark ? '#1e293b' : '#f8fafc',
+          backgroundColor: isDark ? "#1e293b" : "#f8fafc",
          borderBottomWidth: 1,
-          borderBottomColor: isDark ? '#334155' : '#e2e8f0',
+          borderBottomColor: isDark ? "#334155" : "#e2e8f0",
        }}
      >
        <TouchableOpacity
          onPress={() => router.back()}
          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        >
-          <ChevronLeft size={28} color={isDark ? '#f1f5f9' : '#0f172a'} />
+          <ChevronLeft size={28} color={isDark ? "#f1f5f9" : "#0f172a"} />
        </TouchableOpacity>

        <Text
          style={{
            flex: 1,
            fontSize: 18,
-            fontWeight: '600',
-            color: isDark ? '#f1f5f9' : '#0f172a',
+            fontWeight: "600",
+            color: isDark ? "#f1f5f9" : "#0f172a",
          }}
        >
          {params.categoryName}
@@ -158,18 +183,18 @@ export default function EServicesScreen() {
        <View style={[styles.center, { flex: 1, padding: 16, gap: 5 }]}>
          <Text
            style={{
-              color: isDark ? '#f1f5f9' : '#0f172a',
+              color: isDark ? "#f1f5f9" : "#0f172a",
              fontSize: 18,
-              textAlign: 'center',
+              textAlign: "center",
            }}
          >
            {t("Bu kategoriya bo'yicha xizmat topilmadi")}
          </Text>
          <Text
            style={{
-              color: isDark ? '#f1f5f9' : '#0f172a',
+              color: isDark ? "#f1f5f9" : "#0f172a",
              fontSize: 16,
-              textAlign: 'center',
+              textAlign: "center",
            }}
          >
            {t("Tez orada xizmat qo'shiladi")}
@@ -182,96 +207,34 @@ export default function EServicesScreen() {
            <RefreshControl
              refreshing={refreshing}
              onRefresh={onRefresh}
-              tintColor={isDark ? '#f8fafc' : '#020617'}
-              colors={['#3b82f6']}
+              tintColor={isDark ? "#f8fafc" : "#020617"}
+              colors={["#3b82f6"]}
            />
          }
          keyExtractor={(item) => item.id.toString()}
          renderItem={renderItem}
          numColumns={3}
-          columnWrapperStyle={{ justifyContent: 'space-between', marginBottom: 12 }}
+          columnWrapperStyle={{
+            justifyContent: "space-between",
+            marginBottom: 12,
+          }}
          contentContainerStyle={{ padding: 16, paddingBottom: 80 }}
-          onEndReached={() => hasNextPage && !isFetchingNextPage && fetchNextPage()}
+          onEndReached={() =>
+            hasNextPage && !isFetchingNextPage && fetchNextPage()
+          }
          onEndReachedThreshold={0.4}
          ListFooterComponent={
            isFetchingNextPage ? (
-              <ActivityIndicator color="#3b82f6" size="large" style={{ marginVertical: 20 }} />
+              <ActivityIndicator
+                color="#3b82f6"
+                size="large"
+                style={{ marginVertical: 20 }}
+              />
            ) : null
          }
          showsVerticalScrollIndicator={false}
        />
      )}
-
-      {/* WebView Modal */}
-      <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>
  );
 }
@@ -279,12 +242,12 @@ export default function EServicesScreen() {
 const CARD_WIDTH = (SCREEN_WIDTH - 50) / 3;

 const styles = StyleSheet.create({
-  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  center: { flex: 1, justifyContent: "center", alignItems: "center" },
  card: {
    width: CARD_WIDTH,
    borderRadius: 12,
    padding: 12,
-    alignItems: 'center',
+    alignItems: "center",
  },
  logo: {
    width: 80,
@@ -293,18 +256,18 @@ const styles = StyleSheet.create({
  },
  name: {
    fontSize: 14,
-    fontWeight: '600',
-    textAlign: 'center',
+    fontWeight: "600",
+    textAlign: "center",
  },
  darkShadow: {
-    shadowColor: '#000',
+    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.4,
    shadowRadius: 6,
    elevation: 3,
  },
  lightShadow: {
-    shadowColor: '#000',
+    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,