react-native-debug-toolkit 0.6.4 → 2.0.0

package/src/components/FloatPanelView.tsx

@@ -0,0 +1,714 @@
+import React, { Component } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Pressable,
+  ScrollView,
+  TouchableOpacity,
+  Easing,
+} from 'react-native';
+import { Layout, Colors } from '../utils/constants';
+import type { DebugFeature } from '../types';
+
+interface FloatPanelViewProps {
+  features: DebugFeature[];
+  onClose: () => void;
+  onClearAll: () => void;
+}
+
+interface FloatPanelViewState {
+  isOpen: boolean;
+  toFloat: boolean;
+  pan: Animated.ValueXY;
+  scale: Animated.Value;
+  lastPosition: { x: number; y: number };
+  activeTab: number;
+  panelTranslateY: Animated.Value;
+  backdropOpacity: Animated.Value;
+  contentOpacity: Animated.Value;
+  contentTranslateX: Animated.Value;
+  underlineTranslateX: Animated.Value;
+  underlineWidth: number;
+}
+
+export class FloatPanelView extends Component<
+  FloatPanelViewProps,
+  FloatPanelViewState
+> {
+  private tabScrollViewRef = React.createRef<ScrollView>();
+  private gestureResponder: ReturnType<typeof PanResponder.create>;
+  private panelResponder: ReturnType<typeof PanResponder.create>;
+  private swipeResponder: ReturnType<typeof PanResponder.create>;
+  private unsubscribeFns: Array<() => void> = [];
+  private refreshTimeout: ReturnType<typeof setTimeout> | null = null;
+  private isDisposed = false;
+  private isSwitchingTab = false;
+  private underlineInitialized = false;
+  private tabScrollOffset = 0;
+  private tabViewportWidth = 0;
+  private tabContentWidth = 0;
+  private tabLayouts: Array<{ x: number; width: number }> = [];
+
+  constructor(props: FloatPanelViewProps) {
+    super(props);
+    const initialPosition = {
+      x: Layout.screenWidth - Layout.iconSize - 16,
+      y: Layout.screenHeight / 2 - Layout.iconSize / 2,
+    };
+
+    this.state = {
+      isOpen: false,
+      toFloat: true,
+      pan: new Animated.ValueXY(initialPosition),
+      scale: new Animated.Value(1),
+      lastPosition: initialPosition,
+      activeTab: 0,
+      panelTranslateY: new Animated.Value(Layout.screenHeight),
+      backdropOpacity: new Animated.Value(0),
+      contentOpacity: new Animated.Value(1),
+      contentTranslateX: new Animated.Value(0),
+      underlineTranslateX: new Animated.Value(0),
+      underlineWidth: 0,
+    };
+
+    this.gestureResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        this.setState({ toFloat: true });
+        Animated.spring(this.state.scale, {
+          toValue: 0.9,
+          friction: 5,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderMove: (_: unknown, gs: { dx: number; dy: number }) => {
+        const { lastPosition } = this.state;
+        const x = Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize));
+        const y = Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize));
+        this.state.pan.setValue({ x, y });
+      },
+      onPanResponderRelease: (_: unknown, gs: { dx: number; dy: number }) => {
+        if (Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
+          Animated.spring(this.state.scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
+          this.togglePanel();
+          return;
+        }
+        Animated.spring(this.state.scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
+        const { lastPosition } = this.state;
+        const newPosition = {
+          x: Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize)),
+          y: Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize)),
+        };
+        this.setState({ lastPosition: newPosition, toFloat: true });
+      },
+      onPanResponderTerminate: (_: unknown, gs: { dx: number; dy: number }) => {
+        const { lastPosition } = this.state;
+        const newPosition = {
+          x: Math.max(0, Math.min(lastPosition.x + gs.dx, Layout.screenWidth - Layout.iconSize)),
+          y: Math.max(0, Math.min(lastPosition.y + gs.dy, Layout.screenHeight - Layout.iconSize)),
+        };
+        this.setState({ lastPosition: newPosition });
+      },
+    });
+
+    this.panelResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gs) => gs.dy > 5,
+      onPanResponderMove: (_, gs) => {
+        if (gs.dy > 0) {
+          this.state.panelTranslateY.setValue(gs.dy);
+          this.state.backdropOpacity.setValue(Math.max(0, 1 - gs.dy / 200));
+        }
+      },
+      onPanResponderRelease: (_, gs) => {
+        if (gs.dy > 100) {
+          this.closePanel();
+        } else {
+          Animated.spring(this.state.panelTranslateY, {
+            toValue: 0, friction: 8, tension: 50, useNativeDriver: true,
+          }).start();
+          Animated.timing(this.state.backdropOpacity, {
+            toValue: 1, duration: 200, useNativeDriver: true,
+          }).start();
+        }
+      },
+    });
+
+    // Horizontal swipe for tab switching
+    this.swipeResponder = PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gs) => {
+        if (this.isSwitchingTab) return false;
+        return Math.abs(gs.dx) > 25 && Math.abs(gs.dx) > Math.abs(gs.dy) * 2.5;
+      },
+      onPanResponderRelease: (_, gs) => {
+        const tabs = this.getTabs();
+        if (gs.dx < -40 && this.state.activeTab < tabs.length - 1) {
+          this.switchTab(this.state.activeTab + 1);
+        } else if (gs.dx > 40 && this.state.activeTab > 0) {
+          this.switchTab(this.state.activeTab - 1);
+        }
+      },
+      onPanResponderTerminationRequest: () => true,
+    });
+  }
+
+  componentDidMount(): void {
+    this.isDisposed = false;
+    this.subscribeToFeatures(this.props.features);
+  }
+
+  componentDidUpdate(prevProps: FloatPanelViewProps): void {
+    if (prevProps.features !== this.props.features) {
+      this.unsubscribeFromFeatures();
+      this.subscribeToFeatures(this.props.features);
+      if (this.state.activeTab >= this.props.features.length) {
+        this.setState({ activeTab: 0 });
+      }
+    }
+  }
+
+  componentWillUnmount(): void {
+    this.isDisposed = true;
+    if (this.refreshTimeout) {
+      clearTimeout(this.refreshTimeout);
+      this.refreshTimeout = null;
+    }
+    this.unsubscribeFromFeatures();
+  }
+
+  private scheduleRefresh() {
+    if (this.isDisposed || this.refreshTimeout) return;
+    this.refreshTimeout = setTimeout(() => {
+      this.refreshTimeout = null;
+      if (!this.isDisposed) this.forceUpdate();
+    }, 0);
+  }
+
+  private subscribeToFeatures(features: DebugFeature[]) {
+    this.unsubscribeFns = features
+      .map((feature) => feature.subscribe?.(() => this.scheduleRefresh()))
+      .filter((unsubscribe): unsubscribe is () => void => typeof unsubscribe === 'function');
+  }
+
+  private unsubscribeFromFeatures() {
+    this.unsubscribeFns.forEach((unsubscribe) => unsubscribe());
+    this.unsubscribeFns = [];
+  }
+
+  private togglePanel = () => {
+    if (this.state.isOpen) this.closePanel();
+    else this.openPanel();
+  };
+
+  private openPanel = () => {
+    this.resetTabMeasurements();
+    this.setState({ isOpen: true, toFloat: false, underlineWidth: 0 }, () => {
+      Animated.parallel([
+        Animated.spring(this.state.panelTranslateY, {
+          toValue: 0, friction: 8, tension: 65, useNativeDriver: true,
+        }),
+        Animated.timing(this.state.backdropOpacity, {
+          toValue: 1, duration: 250, useNativeDriver: true,
+        }),
+      ]).start();
+    });
+  };
+
+  private closePanel = () => {
+    Animated.parallel([
+      Animated.spring(this.state.panelTranslateY, {
+        toValue: Layout.screenHeight, friction: 8, tension: 65, useNativeDriver: true,
+      }),
+      Animated.timing(this.state.backdropOpacity, {
+        toValue: 0, duration: 200, useNativeDriver: true,
+      }),
+    ]).start(() => {
+      this.setState({ isOpen: false, toFloat: true });
+    });
+  };
+
+  private resetTabMeasurements() {
+    this.underlineInitialized = false;
+    this.tabScrollOffset = 0;
+    this.tabViewportWidth = 0;
+    this.tabContentWidth = 0;
+    this.tabLayouts = [];
+    this.state.underlineTranslateX.setValue(0);
+  }
+
+  private switchTab = (index: number) => {
+    if (this.isSwitchingTab || index === this.state.activeTab) return;
+    this.isSwitchingTab = true;
+
+    const direction = index > this.state.activeTab ? 1 : -1;
+
+    // Auto-scroll tab bar first, then animate underline
+    const layout = this.tabLayouts[index];
+    if (layout) {
+      const targetScrollX = this.getTabScrollTarget(index);
+      this.tabScrollOffset = targetScrollX;
+      if (this.tabScrollViewRef.current) {
+        this.tabScrollViewRef.current.scrollTo({ x: targetScrollX, animated: true });
+      }
+      this.animateUnderline(index, targetScrollX);
+    }
+
+    // Animate content: slide out + fade out
+    Animated.parallel([
+      Animated.timing(this.state.contentOpacity, {
+        toValue: 0, duration: 80, useNativeDriver: true,
+      }),
+      Animated.timing(this.state.contentTranslateX, {
+        toValue: -direction * 40, duration: 80, useNativeDriver: true,
+      }),
+    ]).start(() => {
+      this.setState({ activeTab: index }, () => {
+        // Reset translateX to opposite side instantly, then slide in + fade in
+        this.state.contentTranslateX.setValue(direction * 40);
+        Animated.parallel([
+          Animated.timing(this.state.contentOpacity, {
+            toValue: 1, duration: 150, useNativeDriver: true,
+          }),
+          Animated.timing(this.state.contentTranslateX, {
+            toValue: 0, duration: 200, easing: Easing.out(Easing.cubic), useNativeDriver: true,
+          }),
+        ]).start(() => {
+          this.isSwitchingTab = false;
+        });
+      });
+    });
+  };
+
+  private animateUnderline(index: number, scrollOffset?: number) {
+    const layout = this.tabLayouts[index];
+    if (!layout) {
+      return;
+    }
+    const offsetX = this.getClampedTabScrollOffset(scrollOffset ?? this.tabScrollOffset);
+    this.setState({ underlineWidth: layout.width });
+    Animated.spring(this.state.underlineTranslateX, {
+      toValue: layout.x - offsetX, friction: 7, tension: 50, useNativeDriver: true,
+    }).start();
+  }
+
+  private getMaxTabScrollOffset() {
+    return Math.max(0, this.tabContentWidth - this.tabViewportWidth);
+  }
+
+  private getClampedTabScrollOffset(offset: number) {
+    return Math.min(Math.max(0, offset), this.getMaxTabScrollOffset());
+  }
+
+  private getTabScrollTarget(index: number) {
+    const layout = this.tabLayouts[index];
+    if (!layout) {
+      return this.getClampedTabScrollOffset(this.tabScrollOffset);
+    }
+    return this.getClampedTabScrollOffset(layout.x - 60);
+  }
+
+  private tryInitializeTabBar() {
+    if (this.underlineInitialized || this.tabViewportWidth <= 0 || this.tabContentWidth <= 0) {
+      return;
+    }
+
+    const layout = this.tabLayouts[this.state.activeTab];
+    if (!layout) {
+      return;
+    }
+
+    const targetScrollX = this.getTabScrollTarget(this.state.activeTab);
+    this.tabScrollOffset = targetScrollX;
+    if (this.tabScrollViewRef.current) {
+      this.tabScrollViewRef.current.scrollTo({ x: targetScrollX, animated: false });
+    }
+    this.state.underlineTranslateX.setValue(layout.x - targetScrollX);
+    this.setState({ underlineWidth: layout.width });
+    this.underlineInitialized = true;
+  }
+
+  private syncUnderlineToActiveTab() {
+    const layout = this.tabLayouts[this.state.activeTab];
+    if (!layout) {
+      return;
+    }
+
+    const clampedOffset = this.getClampedTabScrollOffset(this.tabScrollOffset);
+    if (clampedOffset !== this.tabScrollOffset) {
+      this.tabScrollOffset = clampedOffset;
+    }
+
+    this.state.underlineTranslateX.setValue(layout.x - clampedOffset);
+    if (this.state.underlineWidth !== layout.width) {
+      this.setState({ underlineWidth: layout.width });
+    }
+  }
+
+  private handleTabLayout = (index: number, event: { nativeEvent: { layout: { x: number; width: number } } }) => {
+    const { x, width } = event.nativeEvent.layout;
+    this.tabLayouts[index] = { x, width };
+    if (index === this.state.activeTab) {
+      this.tryInitializeTabBar();
+    }
+  };
+
+  private getTabs() {
+    return this.props.features.map((f) => ({ label: f.label, id: f.name }));
+  }
+
+  private renderFeatureContent() {
+    const tabs = this.getTabs();
+    if (tabs.length === 0) {
+      return <Text style={styles.emptyText}>No debug features enabled</Text>;
+    }
+
+    const featureId = tabs[this.state.activeTab]?.id;
+    const feature = this.props.features.find((f) => f.name === featureId);
+    if (!feature) {
+      return <Text style={styles.emptyText}>Feature not found</Text>;
+    }
+
+    const data = feature.getData();
+    const TabComponent = feature.renderContent;
+
+    if (TabComponent) {
+      return <TabComponent data={data} feature={feature} />;
+    }
+
+    return (
+      <View style={styles.genericContent}>
+        <Text style={styles.jsonContent}>{JSON.stringify(data, null, 2)}</Text>
+      </View>
+    );
+  }
+
+  render() {
+    const { isOpen, toFloat, pan, scale, panelTranslateY, backdropOpacity, activeTab, contentOpacity } = this.state;
+    const tabs = this.getTabs();
+
+    return (
+      <View style={styles.container} pointerEvents="box-none">
+        {/* Float button */}
+        {!isOpen && toFloat && (
+          <Animated.View
+            {...this.gestureResponder.panHandlers}
+            style={[
+              styles.floatBtn,
+              { transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }] },
+            ]}
+          >
+            <Pressable onPress={this.togglePanel} style={styles.floatBtnInner}>
+              <View style={styles.iconGrid}>
+                <View style={styles.iconRow}>
+                  <View style={[styles.iconCell, { backgroundColor: Colors.primary }]} />
+                  <View style={[styles.iconCell, { backgroundColor: Colors.success }]} />
+                </View>
+                <View style={styles.iconRow}>
+                  <View style={[styles.iconCell, { backgroundColor: Colors.warning }]} />
+                  <View style={[styles.iconCell, { backgroundColor: Colors.purple }]} />
+                </View>
+              </View>
+              {(() => {
+                const envBadge = this.props.features
+                  .map((f) => f.badge?.())
+                  .find((b) => b != null);
+                if (!envBadge) return null;
+                return (
+                  <View style={[styles.envBadge, { backgroundColor: envBadge.color }]}>
+                    <Text style={styles.envBadgeText}>{envBadge.label}</Text>
+                  </View>
+                );
+              })()}
+            </Pressable>
+          </Animated.View>
+        )}
+
+        {/* Panel */}
+        {isOpen && (
+          <View style={styles.panelContainer}>
+            <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+              <Pressable style={styles.backdropPressable} onPress={this.closePanel} />
+            </Animated.View>
+            <Animated.View
+              style={[styles.panel, { transform: [{ translateY: panelTranslateY }] }]}
+            >
+              {/* Drag zone: only handle + header responds to vertical drag to close */}
+              <View {...this.panelResponder.panHandlers}>
+                <View style={styles.dragHandle}>
+                  <View style={styles.dragIndicator} />
+                </View>
+                <View style={styles.header}>
+                  <Text style={styles.headerTitle}>Debug Toolkit</Text>
+                  <View style={styles.headerButtons}>
+                    <TouchableOpacity
+                      onPress={() => { this.props.onClearAll(); this.closePanel(); }}
+                      style={styles.clearAllButton}
+                      activeOpacity={0.6}
+                    >
+                      <Text style={styles.clearButtonText}>Clear</Text>
+                    </TouchableOpacity>
+                    <Pressable onPress={this.closePanel} style={styles.closeButton}>
+                      <Text style={styles.closeButtonText}>✕</Text>
+                    </Pressable>
+                  </View>
+                </View>
+              </View>
+
+              <View style={styles.panelContent}>
+                {/* Tab bar - iOS 17 sliding underline style */}
+                <View style={styles.tabBarContainer}>
+                  <ScrollView
+                    ref={this.tabScrollViewRef}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    contentContainerStyle={styles.tabsScrollContainer}
+                    onLayout={(e) => {
+                      this.tabViewportWidth = e.nativeEvent.layout.width;
+                      this.tryInitializeTabBar();
+                    }}
+                    onContentSizeChange={(width) => {
+                      this.tabContentWidth = width;
+                      this.tryInitializeTabBar();
+                    }}
+                    onScroll={(e) => {
+                      this.tabScrollOffset = this.getClampedTabScrollOffset(
+                        e.nativeEvent.contentOffset.x
+                      );
+                      // Keep underline aligned with active tab during manual scroll
+                      if (!this.isSwitchingTab) {
+                        this.syncUnderlineToActiveTab();
+                      }
+                    }}
+                    scrollEventThrottle={16}
+                  >
+                    {tabs.map((tab, index) => (
+                      <TouchableOpacity
+                        key={tab.id}
+                        style={styles.tab}
+                        onPress={() => this.switchTab(index)}
+                        activeOpacity={0.7}
+                        onLayout={(e) => this.handleTabLayout(index, e)}
+                      >
+                        <Text
+                          style={[styles.tabText, activeTab === index && styles.activeTabText]}
+                          numberOfLines={1}
+                        >
+                          {tab.label}
+                        </Text>
+                      </TouchableOpacity>
+                    ))}
+                  </ScrollView>
+                  {/* Sliding underline */}
+                  <Animated.View
+                    style={[
+                      styles.slidingUnderline,
+                      {
+                        width: this.state.underlineWidth,
+                        transform: [{ translateX: this.state.underlineTranslateX }],
+                      },
+                    ]}
+                  />
+                </View>
+
+                {/* Content with swipe gesture + slide + fade animation */}
+                <Animated.View
+                  style={[
+                    styles.contentContainer,
+                    {
+                      opacity: contentOpacity,
+                      transform: [{ translateX: this.state.contentTranslateX }],
+                    },
+                  ]}
+                  {...this.swipeResponder.panHandlers}
+                >
+                  {this.renderFeatureContent()}
+                </Animated.View>
+              </View>
+            </Animated.View>
+          </View>
+        )}
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0, left: 0, right: 0, bottom: 0,
+    zIndex: 999,
+  },
+
+  // Float button
+  floatBtn: {
+    position: 'absolute',
+    width: Layout.iconSize,
+    height: Layout.iconSize,
+    borderRadius: Layout.iconSize / 2,
+    backgroundColor: '#FFFFFF',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+  },
+  floatBtnInner: {
+    width: '100%', height: '100%',
+    alignItems: 'center', justifyContent: 'center',
+  },
+  iconGrid: {
+    width: 22, height: 22,
+    justifyContent: 'space-between',
+  },
+  iconRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  iconCell: {
+    width: 8, height: 8,
+    borderRadius: 2.5,
+  },
+  envBadge: {
+    position: 'absolute',
+    top: -4, right: -4,
+    minWidth: 20, height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 5,
+    alignItems: 'center', justifyContent: 'center',
+    borderWidth: 2, borderColor: '#FFF',
+    elevation: 4,
+  },
+  envBadgeText: {
+    color: '#FFF', fontSize: 9, fontWeight: '700',
+  },
+
+  // Panel
+  panelContainer: {
+    position: 'absolute',
+    top: 0, left: 0, right: 0, bottom: 0,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0, left: 0, right: 0, bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  backdropPressable: { flex: 1 },
+  panel: {
+    width: '100%',
+    height: '90%',
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    overflow: 'hidden',
+    elevation: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+  },
+  dragHandle: {
+    width: '100%', height: 20,
+    alignItems: 'center', justifyContent: 'center',
+    backgroundColor: Colors.surface,
+  },
+  dragIndicator: {
+    width: 40, height: 4,
+    borderRadius: 2,
+    backgroundColor: '#D1D1D6',
+  },
+  panelContent: { flex: 1 },
+  contentContainer: { flex: 1 },
+
+  // Header
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 6,
+    paddingBottom: 10,
+    backgroundColor: Colors.surface,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  clearAllButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,59,48,0.06)',
+  },
+  clearButtonText: {
+    color: Colors.error,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  closeButton: {
+    width: 30, height: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.background,
+    alignItems: 'center', justifyContent: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: Colors.textSecondary,
+    lineHeight: 16,
+  },
+
+  // Tab bar - iOS 17 sliding underline style
+  tabBarContainer: {
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  tabsScrollContainer: {
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+  },
+  tab: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginRight: 8,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.textLight,
+  },
+  activeTabText: {
+    color: Colors.primary,
+    fontWeight: '600',
+  },
+  slidingUnderline: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: 2.5,
+    borderRadius: 1.25,
+    backgroundColor: Colors.primary,
+  },
+
+  // Misc
+  emptyText: {
+    padding: 20,
+    textAlign: 'center',
+    color: Colors.textLight,
+    fontSize: 13,
+  },
+  genericContent: { padding: 16, flex: 1 },
+  jsonContent: { fontFamily: 'monospace', fontSize: 12, color: Colors.text },
+});