react-native-inapp-inspector 2.2.1 → 2.2.3

package/src/components/Toast.tsx

@@ -0,0 +1,131 @@
+import React, {useState, useEffect, useRef} from 'react';
+import {Animated, StyleSheet, Text, View, Platform} from 'react-native';
+import {subscribeToast} from '../helpers/toast';
+import {CheckIcon} from './NetworkIcons';
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+
+const Toast = React.memo(() => {
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+  const opacityAnim = useRef(new Animated.Value(0)).current;
+  const translateYAnim = useRef(new Animated.Value(20)).current;
+  const hideTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    const unsubscribe = subscribeToast((message: string) => {
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+
+      setToastMessage(message);
+
+      Animated.parallel([
+        Animated.timing(opacityAnim, {
+          toValue: 1,
+          duration: 180,
+          useNativeDriver: true,
+        }),
+        Animated.spring(translateYAnim, {
+          toValue: 0,
+          tension: 80,
+          friction: 8,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      hideTimerRef.current = setTimeout(() => {
+        Animated.parallel([
+          Animated.timing(opacityAnim, {
+            toValue: 0,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+          Animated.timing(translateYAnim, {
+            toValue: 20,
+            duration: 200,
+            useNativeDriver: true,
+          }),
+        ]).start(() => {
+          setToastMessage(null);
+        });
+      }, 2000);
+    });
+
+    return () => {
+      unsubscribe();
+      if (hideTimerRef.current) {
+        clearTimeout(hideTimerRef.current);
+      }
+    };
+  }, [opacityAnim, translateYAnim]);
+
+  if (!toastMessage) {
+    return null;
+  }
+
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={[
+        styles.toastContainer,
+        {
+          opacity: opacityAnim,
+          transform: [{translateY: translateYAnim}],
+        },
+      ]}>
+      <View style={styles.toastCard}>
+        <View style={styles.iconCircle}>
+          <CheckIcon color={AppColors.white} size={11} />
+        </View>
+        <Text style={styles.toastText} numberOfLines={2}>
+          {toastMessage}
+        </Text>
+      </View>
+    </Animated.View>
+  );
+});
+
+const styles = StyleSheet.create({
+  toastContainer: {
+    position: 'absolute',
+    bottom: Platform.OS === 'ios' ? 44 : 28,
+    left: 20,
+    right: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 999999,
+  },
+  toastCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: AppColors.toastBg,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+    borderRadius: 24,
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 6},
+    shadowOpacity: 0.28,
+    shadowRadius: 10,
+    elevation: 8,
+    borderWidth: 1,
+    borderColor: AppColors.toastBorder,
+    maxWidth: '90%',
+    gap: 9,
+  },
+  iconCircle: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: AppColors.greenColor,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  toastText: {
+    color: AppColors.white,
+    fontFamily: AppFonts.interBold,
+    fontSize: 12.5,
+    letterSpacing: -0.1,
+  },
+});
+
+export default Toast;

package/src/components/TouchableScale.tsx

@@ -0,0 +1,91 @@
+import React, {useRef} from 'react';
+import {Animated, Pressable, PressableProps} from 'react-native';
+import {triggerNativeHaptic} from '../native/NativeInspector';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface TouchableScaleProps extends PressableProps {
+  onPress?: () => void;
+  onLongPress?: () => void;
+  style?: any;
+  children?: React.ReactNode;
+  hitSlop?: any;
+  disabled?: boolean;
+  enableHaptics?: boolean;
+}
+
+const TouchableScale = React.memo(function TouchableScale({
+  onPress,
+  onLongPress,
+  style,
+  children,
+  hitSlop,
+  disabled,
+  enableHaptics = true,
+  accessible,
+  accessibilityRole,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  accessibilityValue,
+  ...rest
+}: TouchableScaleProps) {
+  const scale = useRef(new Animated.Value(1)).current;
+  const opacity = useRef(new Animated.Value(1)).current;
+
+  const handlePressIn = () => {
+    if (disabled) return;
+    if (enableHaptics) {
+      triggerNativeHaptic('light');
+    }
+    Animated.parallel([
+      Animated.timing(scale, {
+        toValue: 0.94,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0.85,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  const handlePressOut = () => {
+    Animated.parallel([
+      Animated.timing(scale, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+    ]).start();
+  };
+
+  return (
+    <AnimatedPressable
+      accessible={accessible}
+      accessibilityRole={accessibilityRole}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityState={accessibilityState}
+      accessibilityValue={accessibilityValue}
+      disabled={disabled}
+      style={[style, {opacity, transform: [{scale}]}]}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      hitSlop={hitSlop}
+      {...rest}>
+      {children}
+    </AnimatedPressable>
+  );
+});
+
+export default TouchableScale;

package/src/components/TreeNode.tsx

@@ -0,0 +1,186 @@
+import React, {useState, useRef, useEffect} from 'react';
+import {Text, View, Image, Animated, Pressable} from 'react-native';
+
+// Helpers
+import {escapeRegex} from '../helpers';
+
+// Assets
+import {ChevronIcon, DocIcon} from './NetworkIcons';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import styles from '../styles';
+
+// Type Definition
+import {TreeNodeProps} from '../types';
+
+const TreeNode = React.memo(function TreeNode({
+  data,
+  name,
+  level = 0,
+  search,
+  forceOpen,
+  defaultExpandDepth = 1,
+}: TreeNodeProps) {
+  const [localOpen, setLocalOpen] = useState<boolean>(() => {
+    if (forceOpen !== undefined) {
+      return forceOpen;
+    }
+    return defaultExpandDepth !== undefined ? level < defaultExpandDepth : level < 1;
+  });
+  const open = localOpen;
+
+  useEffect(() => {
+    if (forceOpen !== undefined) {
+      setLocalOpen(forceOpen);
+    }
+  }, [forceOpen]);
+
+  const isObject = typeof data === 'object' && data !== null;
+  const isArray = Array.isArray(data);
+
+  // Declare all hooks at the top unconditionally (prevents "Rendered fewer hooks than expected" error)
+  const treeChevronAnim = useRef(new Animated.Value(open ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(treeChevronAnim, {
+      toValue: open ? 1 : 0,
+      duration: 160,
+      useNativeDriver: true,
+    }).start();
+  }, [open]);
+
+  const treeChevronRotate = treeChevronAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+
+  function renderHighlighted(text: string): React.ReactNode[] {
+    if (text === 'null' || text === 'undefined') {
+      return [
+        <Text key="nil" style={styles.codeTextNil}>
+          {text}
+        </Text>,
+      ];
+    }
+    if (!search) {
+      return [
+        <Text key="plain" style={styles.codeText}>
+          {text}
+        </Text>,
+      ];
+    }
+    const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+    const parts = text.split(regex);
+    return parts.map((part, i) =>
+      part.toLowerCase() === search.toLowerCase() ? (
+        <Text key={i} style={styles.highlight}>
+          {part}
+        </Text>
+      ) : (
+        <Text key={i} style={styles.codeText}>
+          {part}
+        </Text>
+      ),
+    );
+  }
+
+  const indentStyle = {paddingLeft: level * 12};
+
+  if (isObject && (data as any)._isFile) {
+    const file = data as any;
+    const isImage = file.type?.includes('image');
+
+    return (
+      <View style={[indentStyle, styles.filePreviewNode]}>
+        {name !== undefined && (
+          <Text style={[styles.codeKey, {marginBottom: 4}]}>{`"${String(
+            name,
+          )}": `}</Text>
+        )}
+        <View style={styles.filePreviewCard}>
+          {isImage ? (
+            <Image
+              source={{uri: file.uri}}
+              style={styles.filePreviewThumb}
+              resizeMode="cover"
+            />
+          ) : (
+            <View style={styles.filePreviewDoc}>
+              <DocIcon color={AppColors.grayTextWeak} size={20} />
+            </View>
+          )}
+          <View style={{flex: 1}}>
+            <Text style={styles.filePreviewName} numberOfLines={1}>
+              {file.name}
+            </Text>
+            <Text style={styles.filePreviewType}>{file.type}</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  if (!isObject) {
+    const serialized = JSON.stringify(data) ?? String(data);
+    const prefix = name !== undefined ? `"${String(name)}": ` : null;
+    return (
+      <View style={indentStyle}>
+        <Text selectable={true} style={styles.codeText}>
+          <Text style={styles.codeKey}>{prefix}</Text>
+          {renderHighlighted(serialized)}
+        </Text>
+      </View>
+    );
+  }
+
+  const entries: [string | number, unknown][] = isArray
+    ? (data as unknown[]).map((v, i) => [i, v])
+    : Object.entries(data as Record<string, unknown>);
+
+  const countLabel = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+
+  return (
+    <View style={indentStyle}>
+      <Pressable
+        style={styles.treeRow}
+        onPress={() => setLocalOpen(v => !v)}
+        hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}>
+        <Animated.View
+          style={{transform: [{rotate: treeChevronRotate}], marginRight: 6}}>
+          <ChevronIcon color={AppColors.grayTextWeak} size={12} />
+        </Animated.View>
+        {name !== undefined && (
+          <Text style={[styles.codeKey, styles.treeKeyMargin]}>{`"${String(
+            name,
+          )}"`}</Text>
+        )}
+        {isArray ? (
+          <View style={styles.arrayBadge}>
+            <Text style={styles.arrayBadgeText}>{countLabel}</Text>
+          </View>
+        ) : (
+          <View style={styles.objectBadge}>
+            <Text style={styles.objectBadgeText}>{countLabel}</Text>
+          </View>
+        )}
+      </Pressable>
+
+      {open &&
+        entries.map(([k, v]) => (
+          <TreeNode
+            key={String(k)}
+            name={k}
+            data={v}
+            level={level + 1}
+            search={search}
+            forceOpen={forceOpen}
+            defaultExpandDepth={defaultExpandDepth}
+          />
+        ))}
+
+      {open && <Text style={styles.codeSyntax}>{isArray ? ']' : '}'}</Text>}
+    </View>
+  );
+});
+
+export default TreeNode;

package/src/console.ts

@@ -0,0 +1,24 @@
+/**
+ * Sub-module entry point: react-native-inapp-inspector/console
+ * Clean tree-shaking & isolated console logger.
+ */
+export {
+  setupConsoleLogger,
+  clearConsoleLogs,
+  subscribeConsoleLogs,
+  getConsoleLogs,
+  setConsoleModuleEnabled,
+  getConsoleModuleEnabled,
+  setMaxConsoleLogsLimit,
+  getMaxConsoleLogsLimit,
+  pruneConsoleLogs,
+} from './customHooks/consoleLogger';
+
+export type {
+  ConsoleLog,
+} from './types';
+
+export {
+  ConsoleLogType,
+  LogFilter,
+} from './types';

package/src/constants/index.ts

@@ -0,0 +1,38 @@
+import {Method} from '../types';
+
+// Styles
+import {AppColors} from '../styles/AppColors';
+
+// Type Definition
+import {StatusFilter} from '../types';
+
+export const STATUS_FILTERS: string[] = [
+  'ALL',
+  '2xx',
+  '200',
+  '3xx',
+  '4xx',
+  '400',
+  '404',
+  '5xx',
+  '500',
+  'Failed',
+];
+
+export const METHOD_COLORS: Record<Method, string> = {
+  ALL: '#64748B',     // Slate
+  GET: '#059669',     // Emerald
+  POST: '#2563EB',    // Royal Blue
+  PUT: '#D97706',     // Amber Gold
+  PATCH: '#7C3AED',   // Rich Violet
+  DELETE: '#DC2626',  // Crimson Red
+};
+
+export const DOMAIN_COLORS: string[] = AppColors.domainColors;
+
+export const DURATION_FAST_MS = 200;
+export const DURATION_SLOW_MS = 800;
+
+// Package version — auto-generated from package.json at build time.
+// See scripts/gen-version.js (wired to the "prebuild" npm script).
+export {LIB_VERSION} from './version';

package/src/constants/version.ts

@@ -0,0 +1,3 @@
+// AUTO-GENERATED FILE — do not edit by hand.
+// Regenerated from package.json on every build by scripts/gen-version.js.
+export const LIB_VERSION = '2.2.3';

package/src/crash.ts

@@ -0,0 +1,32 @@
+/**
+ * Sub-module entry point: react-native-inapp-inspector/crash
+ * Clean tree-shaking & isolated global crash handler and reporting.
+ */
+export {
+  setupGlobalCrashHandler,
+  subscribeCrashEvents,
+  emitCrashEvent,
+  getCrashRecords,
+  clearCrashRecords,
+  simulateTestCrash,
+  exportCrashReport,
+  parseCrashStackTrace,
+  setMaxCrashLogsLimit,
+  getMaxCrashLogsLimit,
+  pruneCrashRecords,
+  setCrashModuleEnabled,
+  getCrashModuleEnabled,
+} from './customHooks/crashHandler';
+
+export type {
+  CrashRecord,
+  CrashBreadcrumb,
+} from './types';
+
+export {
+  CrashType,
+  CrashExportFormat,
+  CrashDetailSubTab,
+  CrashFilterType,
+  BreadcrumbType,
+} from './types';