react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,752 @@
+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;