README.md

WebView Documentation

This folder contains comprehensive documentation for WebView implementation in the React Native app, covering architecture, session management, and best practices.

📚 Documentation Index

🏗️ Core Implementation

• WebView Implementation Guide - Complete guide to WebView architecture, hooks, scripts, and data communication

🔐 Session Management

• Session Management - Authentication, cookies, and state synchronization between native and WebView

🔧 Troubleshooting

• Troubleshooting Guide - Common issues, debugging techniques, and solutions

🎯 Quick Start

Basic WebView Setup

import React, {useRef, useEffect} from 'react';
import {WebView} from 'react-native-webview';
import {useWebView} from '../shared/hooks/use-web-view';

const WebViewScreen = () => {
  const webViewRef = useRef<WebView>(null);
  const {registerWebViewRef, setCurrentWebViewRef} = useWebView();

  useEffect(() => {
    // Register WebView with unique key
    registerWebViewRef('main-webview', webViewRef);
    setCurrentWebViewRef('main-webview');
  }, []);

  return (
    <WebView
      ref={webViewRef}
      source={{uri: 'https://example.com'}}
      // ... other props
    />
  );
};

Session Management

// Inject user data into WebView
const {syncSessionState} = useWebView();
const userData = useSelector(fpi.getters.USER_DATA);

useEffect(() => {
  if (userData) {
    syncSessionState();
  }
}, [userData]);

🔧 Key Components

WebView Provider

• Manages multiple WebView instances
• Handles navigation state
• Provides centralized WebView context

WebView Hooks

• useWebView() - Access WebView context and methods
• useWebViewEventHandler() - Handle WebView events and communication

WebView Scripts

• User data injection
• Navigation interception
• Geolocation support
• Logout event handling

🔄 Data Communication

Native → WebView

• injectedJavaScriptObject - Pass configuration values
• injectJavaScript() - Inject dynamic scripts
• Cookie injection - Sync authentication state

WebView → Native

• postMessage() - Send events and data
• Navigation events - Automatic URL change detection

🛡️ Security Features

• Secure cookie management
• Token-based authentication
• Cross-origin request handling
• Session state validation

🚀 Best Practices

1. Always register WebViews with unique keys
2. Sync session state when WebView becomes focused
3. Handle authentication state changes properly
4. Implement proper cleanup on logout
5. Use secure cookie settings for production

🔍 Debugging

Session Debugging

// Check session state
logSessionState();

// Debug WebView session
debugWebViewSession();

WebView Debugging

<WebView
  onError={syntheticEvent => {
    console.warn('WebView error: ', syntheticEvent.nativeEvent);
  }}
  onMessage={event => {
    console.log('WebView message: ', event.nativeEvent.data);
  }}
/>

📖 Related Documentation

• Navigation Guide - Navigation patterns and routing
• Store Management - State management and data fetching
• Theme System - UI theming and customization

🤝 Contributing

When adding new WebView features:

1. Update the relevant documentation files
2. Add code examples and best practices
3. Include debugging and troubleshooting sections
4. Test thoroughly across different scenarios

📞 Support

For WebView-related issues:

1. Check the troubleshooting sections in each guide
2. Review the debugging tools and commands
3. Verify session state and authentication flow
4. Test with different network conditions

---

This documentation provides a complete reference for WebView implementation in the React Native app.