react-native-vconsole 0.0.1 → 0.2.0

package/lib/module/VConsole.js

@@ -0,0 +1,769 @@
+"use strict";
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Animated, Clipboard, Dimensions, FlatList, NativeModules, PanResponder, Platform, Pressable, StatusBar, StyleSheet, Text, View } from 'react-native';
+import { clearLogEntries, getLogEntries, installConsoleProxy, subscribeLogEntries, uninstallConsoleProxy } from "./core/consoleProxy.js";
+import { clearNetworkEntries, getNetworkEntries, installXhrProxy, subscribeNetworkEntries, uninstallXhrProxy } from "./core/xhrProxy.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BUTTON_WIDTH = 88;
+const BUTTON_HEIGHT = 36;
+const PANEL_HEIGHT_RATIO = 7 / 9;
+const EMPTY_FILTER = [];
+const LOG_SUB_TABS = ['All', 'log', 'info', 'warn', 'error'];
+const ROOT_TABS = ['Log', 'Network', 'System', 'App'];
+const LOG_THEME = {
+  log: {
+    backgroundColor: '#FFFFFF',
+    color: '#111111'
+  },
+  info: {
+    backgroundColor: '#FFFFFF',
+    color: '#246BFD'
+  },
+  warn: {
+    backgroundColor: '#FFF8E6',
+    color: '#A65A00'
+  },
+  error: {
+    backgroundColor: '#FFECEC',
+    color: '#9C1C1C'
+  }
+};
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function getDisplayValue(value) {
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value);
+  } catch {
+    return String(value);
+  }
+}
+function copyToClipboard(value) {
+  Clipboard.setString(value);
+}
+function prettyText(value) {
+  if (value === undefined) {
+    return '';
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function buildNetworkCopyText(item) {
+  const status = item.status ?? '-';
+  const duration = typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-';
+  return [`${item.method} ${item.url}`, `status ${status} duration ${duration}`, `request headers\n${prettyText(item.requestHeaders)}`, `request body\n${prettyText(item.requestBody)}`, `response headers\n${prettyText(item.responseHeaders)}`, `response data\n${prettyText(item.responseData)}`].join('\n');
+}
+function ObjectTree({
+  value,
+  nodeKey,
+  expandedMap,
+  onToggle
+}) {
+  if (value === null || value === undefined) {
+    return /*#__PURE__*/_jsx(Text, {
+      style: styles.valuePrimitive,
+      children: String(value)
+    });
+  }
+  const valueType = typeof value;
+  if (valueType !== 'object') {
+    return /*#__PURE__*/_jsx(Text, {
+      style: styles.valuePrimitive,
+      children: getDisplayValue(value)
+    });
+  }
+  const isArray = Array.isArray(value);
+  const entries = Object.entries(value);
+  const opened = !!expandedMap[nodeKey];
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.treeNode,
+    children: [/*#__PURE__*/_jsxs(Pressable, {
+      onPress: () => onToggle(nodeKey),
+      style: styles.treeHeader,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.arrow,
+        children: opened ? '▼' : '▶'
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.treeLabel,
+        children: isArray ? `Array(${entries.length})` : `Object(${entries.length})`
+      })]
+    }), opened ? /*#__PURE__*/_jsx(View, {
+      style: styles.treeChildren,
+      children: entries.map(([key, item]) => /*#__PURE__*/_jsxs(View, {
+        style: styles.treeChildRow,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.treeKey,
+          children: [key, ": "]
+        }), /*#__PURE__*/_jsx(ObjectTree, {
+          value: item,
+          nodeKey: `${nodeKey}.${key}`,
+          expandedMap: expandedMap,
+          onToggle: onToggle
+        })]
+      }, `${nodeKey}.${key}`))
+    }) : null]
+  });
+}
+function ListSeparator() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.separator
+  });
+}
+function useFlatListRefs() {
+  const allRef = useRef(null);
+  const logRef = useRef(null);
+  const infoRef = useRef(null);
+  const warnRef = useRef(null);
+  const errorRef = useRef(null);
+  return useMemo(() => ({
+    All: allRef,
+    log: logRef,
+    info: infoRef,
+    warn: warnRef,
+    error: errorRef
+  }), [allRef, errorRef, infoRef, logRef, warnRef]);
+}
+export function VConsole({
+  enable = true,
+  filter = EMPTY_FILTER
+}) {
+  const nativeModule = NativeModules.Vconsole;
+  const {
+    width,
+    height
+  } = Dimensions.get('window');
+  const topInset = Platform.select({
+    ios: 44,
+    android: (StatusBar.currentHeight ?? 0) + 8,
+    default: 24
+  });
+  const bottomInset = Platform.select({
+    ios: 34,
+    android: 56,
+    default: 24
+  });
+  const minX = 0;
+  const maxX = width - BUTTON_WIDTH;
+  const minY = topInset;
+  const maxY = height - bottomInset - BUTTON_HEIGHT;
+  const initialY = clamp(height - bottomInset - BUTTON_HEIGHT - 12, minY, maxY);
+  const dragPosition = useRef(new Animated.ValueXY({
+    x: 12,
+    y: initialY
+  })).current;
+  const dragStartPoint = useRef({
+    x: 12,
+    y: initialY
+  });
+  const [panelVisible, setPanelVisible] = useState(false);
+  const [activeTab, setActiveTab] = useState('Log');
+  const [logSubTab, setLogSubTab] = useState('All');
+  const [logEntries, setLogEntries] = useState([]);
+  const [networkEntries, setNetworkEntries] = useState([]);
+  const [expandedMap, setExpandedMap] = useState({});
+  const [systemInfo, setSystemInfo] = useState(null);
+  const [appInfo, setAppInfo] = useState(null);
+  const panelHeight = Math.floor(height * PANEL_HEIGHT_RATIO);
+  const panelTranslateY = useRef(new Animated.Value(panelHeight)).current;
+  const logListRefs = useFlatListRefs();
+  const networkListRef = useRef(null);
+  const normalizedFilter = useMemo(() => filter.map(item => item.trim().toLowerCase()).filter(Boolean), [filter]);
+  useEffect(() => {
+    if (!enable) {
+      setPanelVisible(false);
+      return;
+    }
+    installConsoleProxy();
+    installXhrProxy({
+      filterHosts: normalizedFilter
+    });
+    const unsubscribeLog = subscribeLogEntries(setLogEntries);
+    const unsubscribeNetwork = subscribeNetworkEntries(setNetworkEntries);
+    setLogEntries(getLogEntries());
+    setNetworkEntries(getNetworkEntries());
+    return () => {
+      unsubscribeLog();
+      unsubscribeNetwork();
+      uninstallConsoleProxy();
+      uninstallXhrProxy();
+    };
+  }, [enable, normalizedFilter]);
+  useEffect(() => {
+    dragPosition.stopAnimation(value => {
+      const nextX = clamp(value.x, minX, maxX);
+      const nextY = clamp(value.y, minY, maxY);
+      dragPosition.setValue({
+        x: nextX,
+        y: nextY
+      });
+      dragStartPoint.current = {
+        x: nextX,
+        y: nextY
+      };
+    });
+  }, [dragPosition, maxX, maxY, minX, minY]);
+  useEffect(() => {
+    if (panelVisible && activeTab === 'System' && !systemInfo) {
+      nativeModule?.getSystemInfo?.().then(result => setSystemInfo(result)).catch(() => undefined);
+    }
+    if (panelVisible && activeTab === 'App' && !appInfo) {
+      nativeModule?.getAppInfo?.().then(result => setAppInfo(result)).catch(() => undefined);
+    }
+  }, [activeTab, appInfo, nativeModule, panelVisible, systemInfo]);
+  const panResponder = useMemo(() => PanResponder.create({
+    onMoveShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      dragPosition.stopAnimation(value => {
+        dragStartPoint.current = {
+          x: value.x,
+          y: value.y
+        };
+      });
+    },
+    onPanResponderMove: (_, gestureState) => {
+      const nextX = clamp(dragStartPoint.current.x + gestureState.dx, minX, maxX);
+      const nextY = clamp(dragStartPoint.current.y + gestureState.dy, minY, maxY);
+      dragPosition.setValue({
+        x: nextX,
+        y: nextY
+      });
+    },
+    onPanResponderRelease: () => {
+      dragPosition.stopAnimation(value => {
+        dragStartPoint.current = {
+          x: value.x,
+          y: value.y
+        };
+      });
+    }
+  }), [dragPosition, maxX, maxY, minX, minY]);
+  const openPanel = () => {
+    setPanelVisible(true);
+    panelTranslateY.setValue(panelHeight);
+    Animated.timing(panelTranslateY, {
+      toValue: 0,
+      duration: 220,
+      useNativeDriver: true
+    }).start();
+  };
+  const closePanel = () => {
+    Animated.timing(panelTranslateY, {
+      toValue: panelHeight,
+      duration: 220,
+      useNativeDriver: true
+    }).start(({
+      finished
+    }) => {
+      if (finished) {
+        setPanelVisible(false);
+      }
+    });
+  };
+  const logDataByTab = useMemo(() => ({
+    All: logEntries,
+    log: logEntries.filter(item => item.level === 'log'),
+    info: logEntries.filter(item => item.level === 'info'),
+    warn: logEntries.filter(item => item.level === 'warn'),
+    error: logEntries.filter(item => item.level === 'error')
+  }), [logEntries]);
+  const onToggleNode = key => {
+    setExpandedMap(prev => ({
+      ...prev,
+      [key]: !prev[key]
+    }));
+  };
+  const scrollLogTop = () => {
+    logListRefs[logSubTab].current?.scrollToOffset({
+      offset: 0,
+      animated: true
+    });
+  };
+  const scrollLogBottom = () => {
+    logListRefs[logSubTab].current?.scrollToEnd({
+      animated: true
+    });
+  };
+  const scrollNetworkTop = () => {
+    networkListRef.current?.scrollToOffset({
+      offset: 0,
+      animated: true
+    });
+  };
+  const scrollNetworkBottom = () => {
+    networkListRef.current?.scrollToEnd({
+      animated: true
+    });
+  };
+  const renderRootTab = tab => /*#__PURE__*/_jsx(Pressable, {
+    style: [styles.topTabButton, activeTab === tab && styles.topTabButtonActive],
+    onPress: () => setActiveTab(tab),
+    children: /*#__PURE__*/_jsx(Text, {
+      style: [styles.topTabText, activeTab === tab && styles.topTabTextActive],
+      children: tab
+    })
+  }, tab);
+  const renderActionButton = (label, onPress) => /*#__PURE__*/_jsx(Pressable, {
+    style: styles.actionButton,
+    onPress: onPress,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: styles.actionButtonText,
+      children: label
+    })
+  }, label);
+  const renderLogItem = ({
+    item
+  }) => {
+    const levelTheme = LOG_THEME[item.level];
+    return /*#__PURE__*/_jsxs(View, {
+      style: [styles.listItem, {
+        backgroundColor: levelTheme.backgroundColor
+      }],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.listItemMain,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: [styles.logLevelText, {
+            color: levelTheme.color
+          }],
+          children: ["[", item.level.toUpperCase(), "]"]
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.logPayload,
+          children: item.args.map((arg, index) => /*#__PURE__*/_jsx(ObjectTree, {
+            value: arg,
+            nodeKey: `${item.id}.arg.${index}`,
+            expandedMap: expandedMap,
+            onToggle: onToggleNode
+          }, `${item.id}.arg.${index}`))
+        })]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: styles.copyButton,
+        onPress: () => copyToClipboard(item.text),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.copyButtonText,
+          children: "\u590D\u5236"
+        })
+      })]
+    });
+  };
+  const renderNetworkItem = ({
+    item
+  }) => {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.listItem,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.listItemMain,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          style: styles.networkTitle,
+          children: [item.method, " ", item.url]
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.networkLabel,
+          children: ["status ", item.status ?? '-', " duration", ' ', typeof item.durationMs === 'number' ? `${item.durationMs}ms` : '-']
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.networkBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.networkLabel,
+            children: "request headers"
+          }), /*#__PURE__*/_jsx(ObjectTree, {
+            value: item.requestHeaders,
+            nodeKey: `${item.id}.requestHeaders`,
+            expandedMap: expandedMap,
+            onToggle: onToggleNode
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.networkBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.networkLabel,
+            children: "request body"
+          }), /*#__PURE__*/_jsx(ObjectTree, {
+            value: item.requestBody ?? '',
+            nodeKey: `${item.id}.requestBody`,
+            expandedMap: expandedMap,
+            onToggle: onToggleNode
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.networkBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.networkLabel,
+            children: "response headers"
+          }), /*#__PURE__*/_jsx(ObjectTree, {
+            value: item.responseHeaders,
+            nodeKey: `${item.id}.responseHeaders`,
+            expandedMap: expandedMap,
+            onToggle: onToggleNode
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.networkBlock,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.networkLabel,
+            children: "response data"
+          }), /*#__PURE__*/_jsx(ObjectTree, {
+            value: item.responseData ?? '',
+            nodeKey: `${item.id}.responseData`,
+            expandedMap: expandedMap,
+            onToggle: onToggleNode
+          })]
+        })]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        style: styles.copyButton,
+        onPress: () => copyToClipboard(buildNetworkCopyText(item)),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.copyButtonText,
+          children: "\u590D\u5236"
+        })
+      })]
+    });
+  };
+  const renderLogPanel = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.contentArea,
+    children: [/*#__PURE__*/_jsx(View, {
+      style: styles.subTabRow,
+      children: LOG_SUB_TABS.map(tab => /*#__PURE__*/_jsx(Pressable, {
+        style: [styles.subTabButton, logSubTab === tab && styles.subTabButtonActive],
+        onPress: () => setLogSubTab(tab),
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.subTabText, logSubTab === tab && styles.subTabTextActive],
+          children: tab
+        })
+      }, tab))
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.logListsWrap,
+      children: LOG_SUB_TABS.map(tab => /*#__PURE__*/_jsx(View, {
+        style: [styles.listHost, logSubTab !== tab && styles.hidden],
+        children: /*#__PURE__*/_jsx(FlatList, {
+          ref: logListRefs[tab],
+          data: logDataByTab[tab],
+          keyExtractor: item => `${tab}-${item.id}`,
+          renderItem: renderLogItem,
+          ItemSeparatorComponent: ListSeparator
+        })
+      }, tab))
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actionsRow,
+      children: [renderActionButton('Clear', () => {
+        clearLogEntries();
+        setExpandedMap({});
+      }), renderActionButton('Top', scrollLogTop), renderActionButton('Bottom', scrollLogBottom), renderActionButton('Hide', closePanel)]
+    })]
+  });
+  const renderNetworkPanel = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.contentArea,
+    children: [/*#__PURE__*/_jsx(FlatList, {
+      ref: networkListRef,
+      data: networkEntries,
+      keyExtractor: item => `network-${item.id}`,
+      renderItem: renderNetworkItem,
+      ItemSeparatorComponent: ListSeparator
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.actionsRow,
+      children: [renderActionButton('Clear', () => {
+        clearNetworkEntries();
+        setExpandedMap({});
+      }), renderActionButton('Top', scrollNetworkTop), renderActionButton('Bottom', scrollNetworkBottom), renderActionButton('Hide', closePanel)]
+    })]
+  });
+  const renderSystemPanel = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.contentArea,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.infoCard,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u5382\u5546/\u54C1\u724C: ", systemInfo?.manufacturer ?? '-']
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u673A\u578B: ", systemInfo?.model ?? '-']
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u7CFB\u7EDF\u7248\u672C: ", systemInfo?.osVersion ?? '-']
+      }), Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u7F51\u7EDC\u7C7B\u578B: ", systemInfo?.networkType ?? '-']
+      }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u7F51\u7EDC\u53EF\u8FBE: ", systemInfo?.isNetworkReachable ? 'true' : 'false']
+      }) : null, /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u603B\u5185\u5B58: ", systemInfo?.totalMemory ?? 0]
+      }), Platform.OS === 'android' ? /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["\u53EF\u7528\u5185\u5B58: ", systemInfo?.availableMemory ?? 0]
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.actionsRow,
+      children: renderActionButton('Hide', closePanel)
+    })]
+  });
+  const renderAppPanel = () => /*#__PURE__*/_jsxs(View, {
+    style: styles.contentArea,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.infoCard,
+      children: [/*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["App Version: ", appInfo?.appVersion ?? '-']
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.infoText,
+        children: ["Build Number: ", appInfo?.buildNumber ?? '-']
+      })]
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.actionsRow,
+      children: renderActionButton('Hide', closePanel)
+    })]
+  });
+  if (!enable) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    pointerEvents: "box-none",
+    style: StyleSheet.absoluteFill,
+    children: [!panelVisible ? /*#__PURE__*/_jsx(Animated.View, {
+      style: [styles.floatingButtonWrap, {
+        transform: dragPosition.getTranslateTransform()
+      }],
+      ...panResponder.panHandlers,
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.floatingButton,
+        onPress: openPanel,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.floatingButtonText,
+          children: "vConsole"
+        })
+      })
+    }) : null, panelVisible ? /*#__PURE__*/_jsxs(View, {
+      style: styles.overlayWrap,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        style: styles.mask,
+        onPress: closePanel
+      }), /*#__PURE__*/_jsxs(Animated.View, {
+        style: [styles.panel, {
+          height: panelHeight,
+          transform: [{
+            translateY: panelTranslateY
+          }]
+        }],
+        children: [/*#__PURE__*/_jsx(View, {
+          style: styles.topTabRow,
+          children: ROOT_TABS.map(renderRootTab)
+        }), activeTab === 'Log' ? renderLogPanel() : null, activeTab === 'Network' ? renderNetworkPanel() : null, activeTab === 'System' ? renderSystemPanel() : null, activeTab === 'App' ? renderAppPanel() : null]
+      })]
+    }) : null]
+  });
+}
+const styles = StyleSheet.create({
+  floatingButtonWrap: {
+    position: 'absolute',
+    zIndex: 9999
+  },
+  floatingButton: {
+    width: BUTTON_WIDTH,
+    height: BUTTON_HEIGHT,
+    borderRadius: 12,
+    backgroundColor: '#22A455',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  floatingButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  overlayWrap: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'flex-end'
+  },
+  mask: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.25)'
+  },
+  panel: {
+    width: '100%',
+    backgroundColor: '#FFFFFF',
+    borderTopLeftRadius: 14,
+    borderTopRightRadius: 14,
+    overflow: 'hidden'
+  },
+  topTabRow: {
+    flexDirection: 'row',
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#D9D9D9',
+    paddingHorizontal: 8,
+    paddingVertical: 8
+  },
+  topTabButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8
+  },
+  topTabButtonActive: {
+    backgroundColor: '#EEF5FF'
+  },
+  topTabText: {
+    color: '#444444',
+    fontSize: 13,
+    fontWeight: '500'
+  },
+  topTabTextActive: {
+    color: '#246BFD'
+  },
+  contentArea: {
+    flex: 1,
+    paddingBottom: 16
+  },
+  subTabRow: {
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#E0E0E0'
+  },
+  subTabButton: {
+    marginRight: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8
+  },
+  subTabButtonActive: {
+    backgroundColor: '#EEF5FF'
+  },
+  subTabText: {
+    color: '#666666',
+    fontSize: 12
+  },
+  subTabTextActive: {
+    color: '#246BFD'
+  },
+  logListsWrap: {
+    flex: 1
+  },
+  listHost: {
+    flex: 1
+  },
+  hidden: {
+    display: 'none'
+  },
+  listItem: {
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  listItemMain: {
+    flex: 1,
+    marginRight: 8
+  },
+  separator: {
+    height: StyleSheet.hairlineWidth,
+    backgroundColor: '#DFDFDF'
+  },
+  logLevelText: {
+    fontSize: 11,
+    fontWeight: '700',
+    marginBottom: 4
+  },
+  logPayload: {
+    flex: 1
+  },
+  copyButton: {
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    borderRadius: 6,
+    paddingVertical: 4,
+    paddingHorizontal: 8
+  },
+  copyButtonText: {
+    fontSize: 11,
+    color: '#333333'
+  },
+  valuePrimitive: {
+    color: '#222222',
+    fontSize: 12,
+    flexShrink: 1
+  },
+  treeNode: {
+    flexDirection: 'column',
+    marginBottom: 4
+  },
+  treeHeader: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  arrow: {
+    color: '#666666',
+    fontSize: 11,
+    marginRight: 4
+  },
+  treeLabel: {
+    color: '#444444',
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  treeChildren: {
+    marginLeft: 14,
+    marginTop: 4
+  },
+  treeChildRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    marginBottom: 2
+  },
+  treeKey: {
+    color: '#666666',
+    fontSize: 12
+  },
+  networkTitle: {
+    fontSize: 12,
+    color: '#111111',
+    fontWeight: '600',
+    marginBottom: 6
+  },
+  networkBlock: {
+    marginTop: 2,
+    marginBottom: 6
+  },
+  networkLabel: {
+    fontSize: 12,
+    color: '#444444',
+    marginBottom: 2
+  },
+  actionsRow: {
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: '#E1E1E1',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-around'
+  },
+  actionButton: {
+    minWidth: 62,
+    borderRadius: 8,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: '#D0D0D0',
+    paddingHorizontal: 10,
+    paddingVertical: 7,
+    alignItems: 'center'
+  },
+  actionButtonText: {
+    color: '#333333',
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  infoCard: {
+    flex: 1,
+    paddingHorizontal: 12,
+    paddingVertical: 12
+  },
+  infoText: {
+    fontSize: 13,
+    color: '#222222',
+    marginBottom: 8
+  }
+});
+//# sourceMappingURL=VConsole.js.map