react-native-inapp-inspector 1.1.17 → 1.1.19

package/dist/esm/components/Inspector/WebViewTab.js

@@ -1,752 +0,0 @@
-import React from 'react';
-import { ActivityIndicator, FlatList, Linking, Pressable, ScrollView, Text, View, } from 'react-native';
-import { animateNextLayout, useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import AnimatedEntrance from '../AnimatedEntrance';
-import EmptyState from '../EmptyState';
-import HighlightText from '../HighlightText';
-import CodeSnippet from '../CodeSnippet';
-import CopyButton from '../CopyButton';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { clearWebViewData } from '../../customHooks/webViewLogger';
-import { GlobeIcon, EyeIcon, HtmlIcon, ClockIcon, TerminalIcon, CssIcon, JsIcon, TrashIcon, } from '../NetworkIcons';
-let OriginalWebView = null;
-try {
-    const RNWebView = require('react-native-webview');
-    OriginalWebView = RNWebView.WebView || RNWebView.default;
-}
-catch (e) {
-    // Silent fail
-}
-const previewInspectScript = `
-(function() {
-  var style = document.createElement('style');
-  style.innerHTML = '* { cursor: pointer !important; }';
-  document.head.appendChild(style);
-
-  document.addEventListener('click', function(e) {
-    var el = e.target;
-    if (!el) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-
-    var oldOutline = el.style.outline;
-    var oldTransition = el.style.transition;
-    el.style.transition = 'outline 0.15s ease';
-    el.style.outline = '3px solid #684B9B';
-    setTimeout(function() {
-      el.style.outline = oldOutline;
-      el.style.transition = oldTransition;
-    }, 600);
-
-    var tagName = el.tagName.toLowerCase();
-    var searchStr = '<' + tagName;
-    
-    if (el.id) {
-      searchStr += ' id="' + el.id + '"';
-    } else if (el.className && typeof el.className === 'string') {
-      var firstClass = el.className.trim().split(/\\s+/)[0];
-      if (firstClass) {
-        searchStr += ' class="' + firstClass;
-      }
-    } else {
-      var text = (el.textContent || '').trim().substring(0, 25);
-      if (text) {
-        searchStr = text;
-      }
-    }
-
-    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
-      window.ReactNativeWebView.postMessage(JSON.stringify({
-        type: 'preview-inspect',
-        tagName: tagName,
-        id: el.id || '',
-        className: typeof el.className === 'string' ? el.className : '',
-        searchStr: searchStr
-      }));
-    }
-  }, true);
-})();
-true;
-`;
-const WebViewTab = () => {
-    const { webViewNavHistory, webViewSearch, webViewSubTab, setWebViewSubTab, webViewLogs, webViewHtml, webViewCss, webViewJs, webViewHtmlUrl, htmlSubTab, setHtmlSubTab, isHtmlTabReady, inspectedElement, setInspectedElement, getSearchTermForTab, filteredNavHistory, isDark, } = useInspector();
-    if (webViewNavHistory.length === 0) {
-        return (<View style={styles.emptyContainer}>
-        <View style={styles.emptyIconWrap}>
-          <GlobeIcon color={AppColors.purple} size={32}/>
-        </View>
-        <Text style={styles.emptyTitle}>
-          No WebView Activity
-        </Text>
-        <Text style={styles.emptySub}>
-          Load a webpage within a connected WebView component to
-          inspect pages, page source, and console logs.
-        </Text>
-      </View>);
-    }
-    return (<View style={{ flex: 1 }}>
-      {/* ─── Current Page Address Bar (Now on top) ─── */}
-      {(() => {
-            const currentUrl = webViewNavHistory[0]?.url;
-            if (!currentUrl)
-                return null;
-            return (<View style={{
-                    paddingHorizontal: 12,
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    backgroundColor: AppColors.primaryLight,
-                    borderBottomWidth: 1,
-                    borderBottomColor: AppColors.dividerColor,
-                }}>
-            <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    borderWidth: 1.5,
-                    borderColor: AppColors.grayBorderSecondary,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    gap: 8,
-                }}>
-              {/* Left: Lock and HTTPS label */}
-              <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-                <Text style={{ fontSize: 11 }}>🔒</Text>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.greenColor,
-                    letterSpacing: 0.5,
-                }}>
-                  HTTPS
-                </Text>
-              </View>
-              <View style={{
-                    width: 1.5,
-                    height: 12,
-                    backgroundColor: AppColors.grayBorderSecondary,
-                }}/>
-
-              {/* Middle: URL text (Address style) */}
-              <View style={{ flex: 1 }}>
-                <HighlightText text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 11.5,
-                    color: AppColors.primaryBlack,
-                }} highlightStyle={styles.highlight} detectLinks={false}/>
-              </View>
-
-              {/* Right: Copy Button */}
-              <CopyButton value={currentUrl} label="URL"/>
-
-              {/* Right: Globe Icon button to open browser */}
-              <TouchableScale onPress={() => Linking.openURL(currentUrl)} hitSlop={8} style={{
-                    width: 26,
-                    height: 26,
-                    borderRadius: 13,
-                    backgroundColor: AppColors.grayBackground,
-                    borderWidth: 1,
-                    borderColor: AppColors.grayBorderSecondary,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                <GlobeIcon size={11} color={AppColors.purple}/>
-              </TouchableScale>
-            </View>
-          </View>);
-        })()}
-
-      {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
-      <View style={{
-            backgroundColor: AppColors.primaryLight,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors.dividerColor,
-            paddingVertical: 6,
-        }}>
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            paddingHorizontal: 12,
-            flexDirection: 'row',
-            gap: 8,
-        }}>
-          {/* Sub-tab 1: Preview */}
-          <Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'preview' && {
-                backgroundColor: AppColors.purple,
-                borderColor: AppColors.purple,
-            },
-        ]} onPress={() => {
-            animateNextLayout();
-            setWebViewSubTab('preview');
-        }}>
-            <EyeIcon color={webViewSubTab === 'preview'
-            ? '#FFFFFF'
-            : AppColors.grayTextWeak} size={13}/>
-            <Text style={{
-            fontFamily: webViewSubTab === 'preview'
-                ? AppFonts.interBold
-                : AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'preview'
-                ? '#FFFFFF'
-                : AppColors.grayTextStrong,
-        }}>
-              Preview
-            </Text>
-          </Pressable>
-
-          {/* Sub-tab 2: Page Source */}
-          <Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'html' && {
-                backgroundColor: AppColors.purple,
-                borderColor: AppColors.purple,
-            },
-        ]} onPress={() => {
-            animateNextLayout();
-            setWebViewSubTab('html');
-        }}>
-            <HtmlIcon color={webViewSubTab === 'html'
-            ? '#FFFFFF'
-            : AppColors.grayTextWeak} size={13}/>
-            <Text style={{
-            fontFamily: webViewSubTab === 'html'
-                ? AppFonts.interBold
-                : AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'html'
-                ? '#FFFFFF'
-                : AppColors.grayTextStrong,
-        }}>
-              Page Source
-            </Text>
-          </Pressable>
-
-          {/* Sub-tab 3: History */}
-          <Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'navigation' && {
-                backgroundColor: AppColors.purple,
-                borderColor: AppColors.purple,
-            },
-        ]} onPress={() => {
-            animateNextLayout();
-            setWebViewSubTab('navigation');
-        }}>
-            <ClockIcon color={webViewSubTab === 'navigation'
-            ? '#FFFFFF'
-            : AppColors.grayTextWeak} size={13}/>
-            <Text style={{
-            fontFamily: webViewSubTab === 'navigation'
-                ? AppFonts.interBold
-                : AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'navigation'
-                ? '#FFFFFF'
-                : AppColors.grayTextStrong,
-        }}>
-              History ({webViewNavHistory.length})
-            </Text>
-          </Pressable>
-
-          {/* Sub-tab 4: Console */}
-          <Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'console' && {
-                backgroundColor: AppColors.purple,
-                borderColor: AppColors.purple,
-            },
-        ]} onPress={() => {
-            animateNextLayout();
-            setWebViewSubTab('console');
-        }}>
-            <TerminalIcon color={webViewSubTab === 'console'
-            ? '#FFFFFF'
-            : AppColors.grayTextWeak} size={13}/>
-            <Text style={{
-            fontFamily: webViewSubTab === 'console'
-                ? AppFonts.interBold
-                : AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'console'
-                ? '#FFFFFF'
-                : AppColors.grayTextStrong,
-        }}>
-              Console ({webViewLogs.length})
-            </Text>
-          </Pressable>
-        </ScrollView>
-      </View>
-
-      {webViewSubTab === 'html' ? (<View style={{ flex: 1 }}>
-          {webViewHtml || webViewCss || webViewJs ? (<View style={{ flex: 1 }}>
-              {/* Clear Inspect Banner */}
-              {inspectedElement && (<View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        backgroundColor: AppColors.purpleShade50,
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderBottomWidth: 1,
-                        borderBottomColor: AppColors.dividerColor,
-                    }}>
-                  <Text style={{
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 11.5,
-                        color: AppColors.purple,
-                        flex: 1,
-                    }}>
-                    Inspecting element:{' '}
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                    }}>
-                      &lt;{inspectedElement.tagName}
-                      {inspectedElement.id
-                        ? ` id="${inspectedElement.id}"`
-                        : ''}
-                      {inspectedElement.className
-                        ? ` class="${inspectedElement.className
-                            .trim()
-                            .split(/\s+/)[0]}"`
-                        : ''}
-                      &gt;
-                    </Text>
-                  </Text>
-                  <Pressable onPress={() => setInspectedElement(null)} style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                    }}>
-                    <Text style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors.purple,
-                    }}>
-                      Clear Inspect
-                    </Text>
-                  </Pressable>
-                </View>)}
-
-              {/* Inner sub-tabs inside HTML source view */}
-              <View style={{
-                    flexDirection: 'row',
-                    borderBottomWidth: 1,
-                    borderBottomColor: AppColors.dividerColor,
-                    backgroundColor: AppColors.primaryLight,
-                    paddingHorizontal: 12,
-                    gap: 12,
-                }}>
-                {['html', 'css', 'javascript'].map(tab => {
-                    const active = htmlSubTab === tab;
-                    const label = tab === 'html'
-                        ? 'HTML'
-                        : tab === 'css'
-                            ? 'CSS'
-                            : 'JavaScript';
-                    const activeColor = tab === 'html'
-                        ? '#EA580C' // Orange
-                        : tab === 'css'
-                            ? '#2563EB' // Blue
-                            : '#D97706'; // Dark Yellow/Amber
-                    return (<Pressable key={tab} onPress={() => {
-                            animateNextLayout();
-                            setHtmlSubTab(tab);
-                        }} style={{
-                            paddingVertical: 8,
-                            paddingHorizontal: 4,
-                            borderBottomWidth: 2,
-                            borderBottomColor: active
-                                ? activeColor
-                                : 'transparent',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                        }}>
-                        {tab === 'html' && (<HtmlIcon color={active
-                                ? activeColor
-                                : AppColors.grayTextWeak} size={14}/>)}
-                        {tab === 'css' && (<CssIcon color={active
-                                ? activeColor
-                                : AppColors.grayTextWeak} size={14}/>)}
-                        {tab === 'javascript' && (<JsIcon color={active
-                                ? activeColor
-                                : AppColors.grayTextWeak} size={14}/>)}
-                        <Text style={{
-                            fontFamily: active
-                                ? AppFonts.interBold
-                                : AppFonts.interMedium,
-                            fontSize: 13,
-                            color: active
-                                ? activeColor
-                                : AppColors.grayTextWeak,
-                        }}>
-                          {label}
-                        </Text>
-                      </Pressable>);
-                })}
-              </View>
-              <View style={{ flex: 1, padding: 12 }}>
-                {!isHtmlTabReady ? (<View style={{
-                        flex: 1,
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        minHeight: 200,
-                    }}>
-                    <ActivityIndicator size="large" color={AppColors.purple}/>
-                  </View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                      No HTML content captured.
-                    </Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                      No CSS styles detected on this page.
-                    </Text>)) : webViewJs ? (<CodeSnippet code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                    No scripts detected on this page.
-                  </Text>)}
-              </View>
-            </View>) : (<View style={styles.emptyContainer}>
-              <View style={styles.emptyIconWrap}>
-                <GlobeIcon color={AppColors.purple} size={32}/>
-              </View>
-              <Text style={styles.emptyTitle}>
-                No Page Source Captured
-              </Text>
-              <Text style={styles.emptySub}>
-                Load a page in the WebView to inspect its
-                HTML, CSS, or Javascript source.
-              </Text>
-            </View>)}
-        </View>) : webViewSubTab === 'navigation' ? (<FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{
-                flex: 1,
-                backgroundColor: AppColors.grayBackground,
-            }} ListHeaderComponent={<View style={{
-                    paddingHorizontal: 16,
-                    paddingTop: 12,
-                    paddingBottom: 8,
-                }}>
-              <Text style={styles.resultCount}>
-                Navigation History ({webViewNavHistory.length}
-                )
-              </Text>
-            </View>} renderItem={({ item, index, }) => {
-                const isLatest = index === 0;
-                const formatNavTime = (ts) => {
-                    const d = new Date(ts);
-                    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                };
-                return (<AnimatedEntrance index={index} distance={8} style={{
-                        marginHorizontal: 16,
-                        marginVertical: 6,
-                        borderRadius: 12,
-                        borderWidth: 1,
-                        borderColor: AppColors.grayBorderSecondary,
-                        backgroundColor: isLatest
-                            ? AppColors.purpleShade50
-                            : AppColors.primaryLight,
-                        padding: 14,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 12,
-                        shadowColor: '#000000',
-                        shadowOffset: { width: 0, height: 2 },
-                        shadowOpacity: isDark ? 0.2 : 0.04,
-                        shadowRadius: 4,
-                        elevation: 2,
-                    }}>
-                <View style={{ flex: 1, gap: 8 }}>
-                  {/* Top row: Title and Badge */}
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 8,
-                        flexWrap: 'wrap',
-                    }}>
-                    <Text numberOfLines={1} ellipsizeMode="tail" style={{
-                        fontFamily: AppFonts.interBold,
-                        fontSize: 14,
-                        color: AppColors.primaryBlack,
-                        flexShrink: 1,
-                    }}>
-                      {item.title || 'Untitled Page'}
-                    </Text>
-                    {isLatest && (<View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            backgroundColor: AppColors.greenStatus,
-                            paddingHorizontal: 8,
-                            paddingVertical: 3,
-                            borderRadius: 12,
-                        }}>
-                        <View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: AppColors.greenBaggageText,
-                        }}/>
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: AppColors.greenBaggageText,
-                        }}>
-                          Active
-                        </Text>
-                      </View>)}
-                  </View>
-
-                  {/* Middle row: URL with Globe Icon */}
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                    <GlobeIcon size={12} color={AppColors.grayTextWeak}/>
-                    <HighlightText text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 12,
-                        color: AppColors.grayText,
-                        flex: 1,
-                    }} highlightStyle={styles.highlight} detectLinks={true}/>
-                  </View>
-
-                  {/* Bottom row: Time */}
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                    <ClockIcon size={11} color={AppColors.grayTextWeak}/>
-                    <Text style={{
-                        fontFamily: AppFonts.interRegular,
-                        fontSize: 11,
-                        color: AppColors.grayTextWeak,
-                    }}>
-                      {formatNavTime(item.timestamp)}
-                    </Text>
-                  </View>
-                </View>
-                <CopyButton value={item.url} label="URL"/>
-              </AnimatedEntrance>);
-            }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
-                styles.listContent,
-                filteredNavHistory.length === 0 && {
-                    flexGrow: 1,
-                },
-            ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<View style={{
-                flex: 1,
-                backgroundColor: AppColors.grayBackground,
-            }}>
-          {webViewLogs.length > 0 ? (<FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<View style={{
-                        paddingHorizontal: 16,
-                        paddingTop: 12,
-                        paddingBottom: 8,
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                    }}>
-                  <Text style={styles.resultCount}>
-                    Console Logs ({webViewLogs.length})
-                  </Text>
-                  <TouchableScale onPress={() => clearWebViewData()} style={{
-                        padding: 6,
-                        borderRadius: 6,
-                        backgroundColor: AppColors.primaryLight,
-                        borderWidth: 1,
-                        borderColor: AppColors.grayBorderSecondary,
-                    }}>
-                    <TrashIcon color={AppColors.errorColor} size={14}/>
-                  </TouchableScale>
-                </View>} renderItem={({ item }) => {
-                    const logColor = item.type === 'error'
-                        ? AppColors.errorColor
-                        : item.type === 'warn'
-                            ? AppColors.warningIconGold
-                            : item.type === 'info'
-                                ? AppColors.skyBlue
-                                : AppColors.grayTextWeak;
-                    const bgColor = item.type === 'error'
-                        ? 'rgba(255, 46, 87, 0.06)'
-                        : item.type === 'warn'
-                            ? 'rgba(191, 162, 82, 0.08)'
-                            : AppColors.primaryLight;
-                    const d = new Date(item.timestamp);
-                    const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                    return (<AnimatedEntrance index={item.id} distance={8} style={{
-                            marginHorizontal: 12,
-                            marginVertical: 3,
-                            borderRadius: 8,
-                            borderWidth: 1,
-                            borderColor: AppColors.grayBorderSecondary,
-                            borderLeftWidth: 3,
-                            borderLeftColor: logColor,
-                            backgroundColor: bgColor,
-                            padding: 10,
-                            flexDirection: 'row',
-                            gap: 8,
-                            alignItems: 'flex-start',
-                        }}>
-                    <View style={{ paddingTop: 1 }}>
-                      <TerminalIcon color={logColor} size={11}/>
-                    </View>
-                    <View style={{ flex: 1, gap: 3 }}>
-                      <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                        }}>
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: logColor,
-                            textTransform: 'uppercase',
-                            letterSpacing: 0.5,
-                        }}>
-                          {item.type}
-                        </Text>
-                        <Text style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 10,
-                            color: AppColors.grayTextWeak,
-                        }}>
-                          {timeStr}
-                        </Text>
-                      </View>
-                      <Text style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 12,
-                            color: AppColors.primaryBlack,
-                            lineHeight: 16,
-                        }}>
-                        {item.message}
-                      </Text>
-                    </View>
-                  </AnimatedEntrance>);
-                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
-                    styles.listContent,
-                    webViewLogs.length === 0 && { flexGrow: 1 },
-                ]}/>) : (<View style={styles.emptyContainer}>
-              <View style={styles.emptyIconWrap}>
-                <TerminalIcon color={AppColors.purple} size={32}/>
-              </View>
-              <Text style={styles.emptyTitle}>
-                No Console Logs
-              </Text>
-              <Text style={styles.emptySub}>
-                Console logs from the WebView will appear
-                here.
-              </Text>
-            </View>)}
-        </View>) : (<View style={{
-                flex: 1,
-                backgroundColor: AppColors.grayBackground,
-            }}>
-          {webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{
-                    html: webViewHtml,
-                    baseUrl: webViewHtmlUrl,
-                }} injectedJavaScript={previewInspectScript} onMessage={(event) => {
-                    try {
-                        const data = JSON.parse(event.nativeEvent.data);
-                        if (data.type === 'preview-inspect') {
-                            setInspectedElement({
-                                tagName: data.tagName,
-                                id: data.id,
-                                className: data.className,
-                                searchStr: data.searchStr,
-                            });
-                            setWebViewSubTab('html');
-                            setHtmlSubTab('html');
-                        }
-                    }
-                    catch (err) { }
-                }} style={{ flex: 1 }}/>) : (<View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    padding: 20,
-                }}>
-                <Text style={{
-                    color: AppColors.grayText,
-                    textAlign: 'center',
-                    fontFamily: AppFonts.interMedium,
-                }}>
-                  react-native-webview is not installed in the
-                  target project. Install it to enable Preview
-                  mode.
-                </Text>
-              </View>)) : (<View style={styles.emptyContainer}>
-              <View style={styles.emptyIconWrap}>
-                <GlobeIcon color={AppColors.purple} size={32}/>
-              </View>
-              <Text style={styles.emptyTitle}>
-                No Preview Available
-              </Text>
-              <Text style={styles.emptySub}>
-                Load a page in the WebView to see its visual
-                preview.
-              </Text>
-            </View>)}
-        </View>)}
-    </View>);
-};
-export default WebViewTab;