import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { useQuery } from '@tanstack/react-query'; import { Branch, branchApi } from 'api/branch'; import BottomModal from 'components/BottomModal'; import LayoutTwo from 'components/LayoutTwo'; import LoadingScreen from 'components/LoadingScreen'; import React, { useEffect, useRef, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import WebView from 'react-native-webview'; import Minus from 'svg/Minus'; import Plus from 'svg/Plus'; const ListBranches = () => { const route = useRoute>(); const webviewRef = useRef(null); const [webViewReady, setWebViewReady] = useState(false); const [selectedBranch, setSelectedBranch] = useState(null); const [isModalVisible, setModalVisible] = useState(false); const navigation = useNavigation>(); const { t } = useTranslation(); const { data } = useQuery({ queryKey: ['branchList'], queryFn: branchApi.branchList, }); useEffect(() => { if (webViewReady && route.params?.branchId) { const branch = data && data.find(b => b.id === route?.params?.branchId); if (branch) { setSelectedBranch(branch); setModalVisible(true); const jsCode = ` map.setCenter([${branch.latitude}, ${branch.longitude}], 14); placemark${branch.id}?.balloon.open(); true; `; webviewRef.current?.injectJavaScript(jsCode); } } }, [webViewReady, route.params]); const generatePlacemarks = () => { if (!data || !data.length) return ''; return data .map( branch => ` var placemark${branch.id} = new ymaps.Placemark([${branch.latitude}, ${branch.longitude}], { balloonContent: '${branch.name}' }, { iconLayout: 'default#image', iconImageSize: [30, 30], iconImageOffset: [-15, -30] }); placemark${branch.id}.events.add('click', function () { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'branch_click', id: ${branch.id} })); }); map.geoObjects.add(placemark${branch.id}); `, ) .join('\n'); }; const html = `

`; const handleZoom = (type: 'in' | 'out') => { const command = type === 'in' ? 'zoomIn(); true;' : 'zoomOut(); true;'; webviewRef.current?.injectJavaScript(command); }; if (!data) return ; return ( {!webViewReady && ( )} { try { const message = event.nativeEvent.data; if (message === 'map_ready') { setWebViewReady(true); return; } const parsed = JSON.parse(message); if (parsed.type === 'branch_click') { const branchItem = data && data.find((b: Branch) => b.id === parsed.id); if (branchItem) { setSelectedBranch(branchItem); setModalVisible(true); } } } catch (e) { console.warn('WebView message parse error:', e); } }} style={{ flex: 1 }} /> {webViewReady && ( handleZoom('in')} > handleZoom('out')} > navigation.navigate('Branches')} > {t('Manzilni tekshirish')} )} setModalVisible(false)} branch={selectedBranch} /> ); }; export default ListBranches; const styles = StyleSheet.create({ container: { flex: 1 }, zoomControls: { justifyContent: 'center', alignItems: 'center', backgroundColor: '#373737', borderRadius: 20, width: '10%', padding: 4, marginLeft: '85%', bottom: 20, }, zoomButton: { borderRadius: 8, width: 40, height: 40, marginVertical: 4, justifyContent: 'center', alignItems: 'center', }, divider: { height: 1, width: '100%', backgroundColor: '#DEDEDE' }, button: { bottom: 10, width: '95%', margin: 'auto', alignSelf: 'center', backgroundColor: '#009CFF', paddingVertical: 14, paddingHorizontal: 28, borderRadius: 10, elevation: 4, }, buttonText: { color: '#fff', fontWeight: '600', fontSize: 16, textAlign: 'center', }, });