react-native-xenon 2.1.0 → 2.3.0

package/lib/typescript/src/ui/components/items/NetworkPanelItem.d.ts

@@ -7,6 +7,6 @@ interface NetworkPanelItemProps {
     status?: NetworkRequest['status'];
     onPress: () => void;
 }
-export default function NetworkPanelItem({ method, name, startTime, endTime, status, onPress, }: NetworkPanelItemProps): import("react/jsx-runtime").JSX.Element;
-export {};
+declare const NetworkPanelItem: import("react").NamedExoticComponent<NetworkPanelItemProps>;
+export default NetworkPanelItem;
 //# sourceMappingURL=NetworkPanelItem.d.ts.map

package/lib/typescript/src/ui/components/items/NetworkPanelItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAGlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,MAAM,EACN,IAAI,EACJ,SAAS,EACT,OAAO,EACP,MAAM,EACN,OAAO,GACR,EAAE,qBAAqB,2CAuDvB"}
+{"version":3,"file":"NetworkPanelItem.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/items/NetworkPanelItem.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAIlE,UAAU,qBAAqB;IAC7B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACxC,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAsBD,QAAA,MAAM,gBAAgB,6DAqErB,CAAC;AAwCF,eAAe,gBAAgB,CAAC"}

package/lib/typescript/src/ui/components/panels/ConsolePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EAIR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDAsDtE,CAAC;AAcH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ConsolePanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/ConsolePanel.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDA8DtE,CAAC;AAWH,eAAe,YAAY,CAAC"}

package/lib/typescript/src/ui/components/panels/NetworkPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAetB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDAyDtE,CAAC;AASH,eAAe,YAAY,CAAC"}
+{"version":3,"file":"NetworkPanel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/NetworkPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAatB,QAAA,MAAM,YAAY;YAAkC,SAAS,CAAC,SAAS,CAAC;iDAoEtE,CAAC;AASH,eAAe,YAAY,CAAC"}

package/lib/typescript/src/ui/components/panels/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAwB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAc1E,UAAU,UAAW,SAAQ,SAAS;CAAG;AAEzC,QAAA,MAAM,KAAK,6FA6BT,CAAC;AAgBH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/panels/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAgBpF,UAAU,UAAW,SAAQ,SAAS;CAAG;AAEzC,QAAA,MAAM,KAAK,6FA8CT,CAAC;AAgBH,eAAe,KAAK,CAAC"}

package/lib/typescript/src/ui/components/search-bar/SearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;CAAG;AAE7C,QAAA,MAAM,SAAS,iGA+Db,CAAC;AA2CH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/search-bar/SearchBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAKL,IAAI,EAGJ,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAUtB,UAAU,cAAe,SAAQ,SAAS;CAAG;AAI7C,QAAA,MAAM,SAAS,iGAiEb,CAAC;AAmCH,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-xenon",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "A powerful in-app debugging tool for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -47,6 +47,7 @@
     "xenon",
     "inspector",
     "debugger",
+    "devtools",
     "https",
     "network",
     "nsurlsession",

package/src/core/constants.ts

@@ -1 +1,3 @@
 export const NETWORK_REQUEST_HEADER = 'X-React-Native-Xenon';
+export const NETWORK_ITEM_HEIGHT = 36;
+export const CONSOLE_ITEM_HEIGHT = 36;

package/src/core/global.d.ts

@@ -1,29 +1,3 @@
 interface XMLHttpRequest {
   _interceptionId?: string;
 }
-
-declare module 'react-native/Libraries/WebSocket/NativeWebSocketModule' {
-  interface NativeWebSocketModule extends NativeModule {
-    connect(
-      url: string,
-      protocols?: string | string[],
-      options?: {
-        headers: { [headerName: string]: string };
-        [optionName: string]: any;
-      },
-      socketId: number,
-    ): void;
-
-    send(data: string, socketId: number): void;
-
-    sendBinary(base64String: string, socketId: number): void;
-
-    close(code: number, reason: string, socketId: number): void;
-
-    addListener: (eventType: string) => void;
-    removeListeners: (count: number) => void;
-  }
-
-  const NativeWebSocketModule: NativeWebSocketModule;
-  export default NativeWebSocketModule;
-}

package/src/core/refs.ts

@@ -1,6 +1,6 @@
 import { createRef } from 'react';
 import type { IndexedStackMethods } from '../ui/components/common/IndexedStack';
-import type { TextInput } from 'react-native';
+import { Animated, Dimensions, type TextInput } from 'react-native';
 
 export enum DebuggerVisibility {
   Hidden = -1,
@@ -27,6 +27,15 @@ const refs = {
   panel: createRef<IndexedStackMethods<PanelState>>(),
   header: createRef<IndexedStackMethods<HeaderState>>(),
   searchInput: createRef<TextInput>(),
+  panelSize: (() => {
+    const ref = createRef<Animated.ValueXY>();
+    const dimensions = Dimensions.get('window');
+    ref.current = new Animated.ValueXY({
+      x: dimensions.width,
+      y: Math.min(dimensions.width, dimensions.height) * 0.75,
+    });
+    return ref;
+  })(),
 };
 
 export default refs;

package/src/core/utils.ts

@@ -79,7 +79,7 @@ export const getConsoleTypeColor = (type: LogMessage['type']) => {
 //#region metrics
 export const getVerticalSafeMargin = (screenHeight: number) => screenHeight / 8;
 
-export const clamp = (value: number, min: number, max: number) =>
+export const clamp = (min: number, max: number, value: number) =>
   Math.max(min, Math.min(max, value));
 
 export const getHttpInterceptorId = () => {
@@ -152,6 +152,12 @@ export const convertToCurl = (
 
   return curlCommand;
 };
+
+export const formatCount = (count: number) => {
+  if (count < 1000) return count.toString();
+  if (count < 1000000) return `${(count / 1000).toFixed(1)}K`;
+  return `${(count / 1000000).toFixed(1)}M`;
+};
 //#endregion
 
 //#region decorators

package/src/hooks/useNetworkInterceptor.ts

@@ -43,14 +43,17 @@ export default function useNetworkInterceptor({
     setNetworkRequests(initRequests);
   };
 
+  const isMatchedDomain = (url: string) => {
+    if (!includeDomains?.length) return true;
+
+    return includeDomains.some(domain => url.includes(domain));
+  };
+
   const enableHttpInterceptions = useCallback(() => {
     const openCallback: HttpHandlers['open'] = (id, type, method, url) => {
       if (!id) return;
 
-      const isNotMatchedDomain =
-        !!joinedIncludeDomains.length && !includeDomains?.some(domain => url.includes(domain));
-
-      if (isNotMatchedDomain) return;
+      if (!isMatchedDomain(url)) return;
 
       setNetworkRequests((draft: NetworkRequests<HttpRequest>) => {
         draft.set(id, { type, method, url });
@@ -162,6 +165,8 @@ export default function useNetworkInterceptor({
     ) => {
       if (typeof socketId !== 'number') return;
 
+      if (!isMatchedDomain(url)) return;
+
       setNetworkRequests((draft: NetworkRequests<WebSocketRequest>) => {
         draft.set(`${socketId}`, {
           startTime,
@@ -245,7 +250,8 @@ export default function useNetworkInterceptor({
       .set('onError', onErrorCallback)
       .set('onClose', onCloseCallback)
       .enableInterception();
-  }, [setNetworkRequests]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [joinedIncludeDomains, setNetworkRequests]);
 
   const enableInterception = useCallback(() => {
     if (isEnabled()) return;

package/src/ui/components/bubble/Bubble.tsx

@@ -80,9 +80,9 @@ const Bubble = forwardRef<View, BubbleProps>(
           const verticalSafeMargin = getVerticalSafeMargin(screenHeight);
 
           const finalY = clamp(
-            gesture.moveY,
             verticalSafeMargin,
             screenHeight - verticalSafeMargin - bubbleSize,
+            gesture.moveY,
           );
 
           Animated.spring(pan.current, {

package/src/ui/components/common/Empty.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default function Empty({ children }: PropsWithChildren) {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>{children}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 16, alignItems: 'center', justifyContent: 'center' },
+  text: { textAlign: 'center' },
+});

package/src/ui/components/handle/Handle.tsx

@@ -0,0 +1,60 @@
+import { useContext, useMemo, useRef } from 'react';
+import { Animated, PanResponder, StyleSheet, View } from 'react-native';
+import { MainContext } from '../../../contexts';
+import refs from '../../../core/refs';
+import { clamp } from '../../../core/utils';
+import colors from '../../../theme/colors';
+
+export default function Handle() {
+  const pan = useRef(new Animated.Value(0));
+  const {
+    dimensions,
+    debuggerState: { position },
+  } = useContext(MainContext)!;
+
+  const panResponder = useMemo(() => {
+    const minPanelHeight = dimensions.height * 0.25;
+    const maxPanelHeight = dimensions.height * 0.9;
+
+    return PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderMove: (event, gestureState) => {
+        const value =
+          position === 'bottom' ? dimensions.height - gestureState.moveY : gestureState.moveY;
+
+        refs.panelSize.current?.setValue({
+          x: dimensions.width,
+          y: clamp(minPanelHeight, maxPanelHeight, value),
+        });
+
+        return Animated.event([null, { dy: pan.current }], {
+          useNativeDriver: false,
+        })(event, gestureState);
+      },
+    });
+  }, [dimensions.height, dimensions.width, position]);
+
+  return (
+    <View style={styles.handleContainer}>
+      <Animated.View {...panResponder.panHandlers} style={styles.handle} hitSlop={16} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  handleContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: colors.lightGray,
+    borderTopColor: colors.gray,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  handle: {
+    width: 48,
+    height: 4,
+    marginVertical: 8,
+    borderRadius: 2,
+    backgroundColor: colors.gray,
+  },
+});

package/src/ui/components/headers/DebuggerHeader.tsx

@@ -6,6 +6,7 @@ import icons from '../../../theme/icons';
 import Divider from '../common/Divider';
 import DebuggerHeaderItem from '../items/DebuggerHeaderItem';
 import HeaderComponents from './HeaderComponents';
+import { formatCount } from '../../../core/utils';
 
 interface DebuggerHeaderProps {
   selectedPanel: PanelState;
@@ -54,7 +55,7 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         <DebuggerHeaderItem
           isLabel
           isActive={selectedPanel === PanelState.Network}
-          content="Network Panel"
+          content={`Network (${formatCount(networkInterceptor.networkRequests.size)})`}
           onPress={() => switchTo(PanelState.Network)}
         />
 
@@ -74,7 +75,7 @@ const DebuggerHeader = forwardRef<ScrollView, DebuggerHeaderProps>(
         <DebuggerHeaderItem
           isLabel
           isActive={selectedPanel === PanelState.Console}
-          content="Console Panel"
+          content={`Console (${formatCount(consoleInterceptor.logMessages.length)})`}
           onPress={() => switchTo(PanelState.Console)}
         />
 

package/src/ui/components/items/ConsolePanelItem.tsx

@@ -1,4 +1,6 @@
-import { StyleSheet, Text } from 'react-native';
+import { memo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
 import { formatLogMessage, getConsoleTypeColor } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { LogMessage } from '../../../types';
@@ -8,23 +10,33 @@ interface ConsolePanelItemProps extends LogMessage {
   onPress: () => void;
 }
 
-export default function ConsolePanelItem({ type, values, onPress }: ConsolePanelItemProps) {
-  return (
-    <Touchable
-      onPress={onPress}
-      style={[styles.container, { backgroundColor: getConsoleTypeColor(type) }]}
-    >
-      <Text numberOfLines={1} style={styles.text}>
-        {formatLogMessage(values)}
-      </Text>
-    </Touchable>
-  );
-}
+const ConsolePanelItem = memo<ConsolePanelItemProps>(
+  ({ type, values, onPress }) => {
+    return (
+      <Touchable onPress={onPress} style={styles.container}>
+        <View style={[styles.wrapper, { backgroundColor: getConsoleTypeColor(type) }]}>
+          <Text numberOfLines={1} style={styles.text}>
+            {formatLogMessage(values)}
+          </Text>
+        </View>
+      </Touchable>
+    );
+  },
+  (prevProps, nextProps) => {
+    return prevProps.type === nextProps.type && prevProps.values === nextProps.values;
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 8,
+    paddingBottom: 4,
+    height: CONSOLE_ITEM_HEIGHT,
+  },
+  wrapper: {
+    flex: 1,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
     borderRadius: 8,
   },
   text: {
@@ -32,3 +44,5 @@ const styles = StyleSheet.create({
     fontSize: 14,
   },
 });
+
+export default ConsolePanelItem;

package/src/ui/components/items/NetworkPanelItem.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { URL } from 'react-native-url-polyfill';
+import { NETWORK_ITEM_HEIGHT } from '../../../core/constants';
 import {
   formatRequestDuration,
   formatRequestMethod,
@@ -8,6 +9,7 @@ import {
 } from '../../../core/utils';
 import colors from '../../../theme/colors';
 import type { HttpRequest, NetworkRequest } from '../../../types';
+import Divider from '../common/Divider';
 import Touchable from '../common/Touchable';
 
 interface NetworkPanelItemProps {
@@ -39,76 +41,85 @@ const getMethodColor = (method: string) => {
   }
 };
 
-export default function NetworkPanelItem({
-  method,
-  name,
-  startTime,
-  endTime,
-  status,
-  onPress,
-}: NetworkPanelItemProps) {
-  const duration = formatRequestDuration(startTime, endTime);
-  const requestMethod = formatRequestMethod(method);
-  const requestStatusCode = formatRequestStatusCode(status);
-  const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
-  const textStyle = [styles.text, isRequestFailed && styles.failedText];
+const NetworkPanelItem = memo<NetworkPanelItemProps>(
+  ({ method, name, startTime, endTime, status, onPress }) => {
+    const duration = formatRequestDuration(startTime, endTime);
+    const requestMethod = formatRequestMethod(method);
+    const requestStatusCode = formatRequestStatusCode(status);
+    const isRequestFailed = Number.isInteger(status) && status! >= 400 && status! < 600;
+    const textStyle = [styles.text, isRequestFailed && styles.failedText];
 
-  const requestPath = useMemo(() => {
-    if (!name) return '[failed]';
+    const requestPath = useMemo(() => {
+      if (!name) return '[failed]';
 
-    try {
-      const url = new URL(name);
-      const suffixUrl = url.pathname + url.search;
+      try {
+        const url = new URL(name);
+        const suffixUrl = url.pathname + url.search;
 
-      if (suffixUrl === '/') return url.host;
-      return suffixUrl;
-    } catch (error) {
-      return name;
-    }
-  }, [name]);
+        if (suffixUrl === '/') return url.host;
+        return suffixUrl;
+      } catch (error) {
+        return name;
+      }
+    }, [name]);
 
-  return (
-    <Touchable onPress={onPress} style={styles.container}>
-      <View style={styles.column}>
-        <Text
-          numberOfLines={1}
-          style={[
-            styles.text,
-            styles.methodText,
-            { backgroundColor: getMethodColor(requestMethod) },
-          ]}
-        >
-          {requestMethod}
-        </Text>
-      </View>
+    return (
+      <View style={styles.container}>
+        <Touchable onPress={onPress} style={styles.wrapper}>
+          <View style={styles.column}>
+            <Text
+              numberOfLines={1}
+              style={[
+                styles.text,
+                styles.methodText,
+                { backgroundColor: getMethodColor(requestMethod) },
+              ]}
+            >
+              {requestMethod}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.pathColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestPath}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.pathColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestPath}
+            </Text>
+          </View>
 
-      <View style={[styles.column, styles.durationColumn]}>
-        <Text numberOfLines={1} style={textStyle}>
-          {duration}
-        </Text>
-      </View>
+          <View style={[styles.column, styles.durationColumn]}>
+            <Text numberOfLines={1} style={textStyle}>
+              {duration}
+            </Text>
+          </View>
 
-      <View style={styles.column}>
-        <Text numberOfLines={1} style={textStyle}>
-          {requestStatusCode}
-        </Text>
+          <View style={styles.column}>
+            <Text numberOfLines={1} style={textStyle}>
+              {requestStatusCode}
+            </Text>
+          </View>
+        </Touchable>
+        <Divider type="horizontal" />
       </View>
-    </Touchable>
-  );
-}
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.method === nextProps.method &&
+      prevProps.name === nextProps.name &&
+      prevProps.startTime === nextProps.startTime &&
+      prevProps.endTime === nextProps.endTime &&
+      prevProps.status === nextProps.status
+    );
+  },
+);
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+  },
+  wrapper: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingVertical: 8,
+    height: NETWORK_ITEM_HEIGHT,
     columnGap: 8,
   },
   pathColumn: {
@@ -138,3 +149,5 @@ const styles = StyleSheet.create({
     fontWeight: '600',
   },
 });
+
+export default NetworkPanelItem;

package/src/ui/components/panels/ConsolePanel.tsx

@@ -2,18 +2,16 @@ import { forwardRef, useCallback, useContext, useMemo } from 'react';
 import {
   FlatList,
   StyleSheet,
-  View,
   type ListRenderItem,
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
 import { MainContext } from '../../../contexts';
+import { CONSOLE_ITEM_HEIGHT } from '../../../core/constants';
+import { formatLogMessage } from '../../../core/utils';
 import { DebuggerPanel, type LogMessage } from '../../../types';
+import Empty from '../common/Empty';
 import ConsolePanelItem from '../items/ConsolePanelItem';
-import refs, { HeaderState, PanelState } from '../../../core/refs';
-import { formatLogMessage } from '../../../core/utils';
-
-const Separator = () => <View style={styles.divider} />;
 
 const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ style }, ref) => {
   const {
@@ -41,8 +39,6 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
       <ConsolePanelItem
         {...item}
         onPress={() => {
-          refs.header.current?.setCurrentIndex(HeaderState.Console);
-          refs.panel.current?.setCurrentIndex(PanelState.ConsoleDetail);
           setDebuggerState(draft => {
             draft.detailsData = {
               type: DebuggerPanel.Console,
@@ -57,16 +53,26 @@ const ConsolePanel = forwardRef<FlatList, { style?: StyleProp<ViewStyle> }>(({ s
     [setDebuggerState],
   );
 
+  const getItemLayout = useCallback(
+    (_: ArrayLike<LogMessage> | null | undefined, index: number) => ({
+      length: CONSOLE_ITEM_HEIGHT,
+      offset: CONSOLE_ITEM_HEIGHT * index,
+      index,
+    }),
+    [],
+  );
+
   return (
     <FlatList
       ref={ref}
-      inverted
+      inverted={!!data.length}
       data={data}
       renderItem={renderItem}
       keyExtractor={(_, index) => index.toString()}
-      ItemSeparatorComponent={Separator}
       style={[styles.container, style]}
-      contentContainerStyle={styles.contentContainer}
+      contentContainerStyle={data.length ? styles.contentContainer : undefined}
+      ListEmptyComponent={<Empty>No logs yet</Empty>}
+      getItemLayout={getItemLayout}
     />
   );
 });
@@ -78,9 +84,6 @@ const styles = StyleSheet.create({
   contentContainer: {
     padding: 8,
   },
-  divider: {
-    height: 4,
-  },
 });
 
 export default ConsolePanel;