import React, { useRef } from 'react'; import { View, StyleSheet, SafeAreaView } from 'react-native'; import { WebView, WebViewMessageEvent } from 'react-native-webview'; import { useRouter } from 'expo-router'; import { AppColors } from '@/constants/theme'; // Test HTML page with buttons that send messages to React Native const TEST_HTML = `

WebView Bridge Test

Test communication between Web and React Native

Navigation Commands

Native Features

Send Custom Data

Ready to communicate...

`; export default function BugScreen() { const router = useRouter(); const webViewRef = useRef(null); // Handle messages from WebView const handleMessage = (event: WebViewMessageEvent) => { try { const data = JSON.parse(event.nativeEvent.data); console.log('[Bug WebView] Received message:', data); switch (data.action) { case 'NAVIGATE': handleNavigation(data.screen); break; case 'NATIVE_FEATURE': handleNativeFeature(data.feature); break; case 'CUSTOM': handleCustomMessage(data.payload); break; default: console.log('[Bug WebView] Unknown action:', data.action); } } catch (error) { console.error('[Bug WebView] Error parsing message:', error); } }; // Navigate to different screens const handleNavigation = (screen: string) => { console.log('[Bug WebView] Navigating to:', screen); switch (screen) { case 'beneficiaries': router.push('/(tabs)/'); break; case 'chat': router.push('/(tabs)/chat'); break; case 'profile': router.push('/(tabs)/profile'); break; default: console.log('[Bug WebView] Unknown screen:', screen); // Send error back to WebView sendToWebView({ error: `Unknown screen: ${screen}` }); } }; // Handle native feature requests const handleNativeFeature = (feature: string) => { console.log('[Bug WebView] Native feature requested:', feature); switch (feature) { case 'bluetooth': // TODO: Implement Bluetooth scanning screen sendToWebView({ status: 'not_implemented', message: 'Bluetooth scanning will be implemented here' }); break; case 'camera': // TODO: Implement camera sendToWebView({ status: 'not_implemented', message: 'Camera will be implemented here' }); break; default: sendToWebView({ error: `Unknown feature: ${feature}` }); } }; // Handle custom messages const handleCustomMessage = (payload: any) => { console.log('[Bug WebView] Custom message:', payload); // Echo back with confirmation sendToWebView({ status: 'received', echo: payload, processedAt: Date.now() }); }; // Send message TO WebView const sendToWebView = (data: object) => { const script = ` window.dispatchEvent(new MessageEvent('message', { data: '${JSON.stringify(data)}' })); true; `; webViewRef.current?.injectJavaScript(script); }; return ( ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: AppColors.background, }, webview: { flex: 1, }, });