react-native-inapp-inspector 1.1.35 → 2.0.1

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Animated, ScrollView, Text, View } from 'react-native';
 import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
 import styles from '../../styles';
 import { AppColors } from '../../styles/AppColors';
+import TouchableScale from '../TouchableScale';
 import { SignalIcon, TerminalIcon, AnalyticsIcon, PackageIcon, ReduxIcon, PerformanceIcon, CrashIcon, } from '../NetworkIcons';
 import { isReduxConnected } from '../../customHooks/reduxLogger';
 import { isAnalyticsConnected } from '../../customHooks/analyticsLogger';
@@ -80,7 +80,9 @@ const TabBar = React.memo(() => {
                 consoleLogs.length > lastReadLogsCount;
             const hasUnreadCrashes = activeTab !== 'crash' &&
                 (crashRecords?.length || 0) > (lastReadCrashesCount || 0);
-            return (<TouchableScale key={tab.key} onPress={() => switchActiveTab(tab.key)} style={[
+            return (<TouchableScale key={tab.key} onPress={() => {
+                    switchActiveTab(tab.key);
+                }} style={[
                     styles.contentTabButton,
                     isActive && styles.contentTabButtonActive,
                 ]}>

package/dist/esm/components/JsonViewer.js

@@ -68,20 +68,25 @@ const JsonViewer = React.memo(({ data, search, forceOpen, defaultExpandDepth = 1
         }
     };
     const rawText = React.useMemo(() => {
+        if (data === undefined || data === null) {
+            return '';
+        }
         if (typeof data === 'string') {
             return data;
         }
         try {
-            return JSON.stringify(data);
+            const stringified = JSON.stringify(data);
+            return stringified ?? '';
         }
         catch {
-            return String(data);
+            return String(data) || '';
         }
     }, [data]);
     const [showFullRaw, setShowFullRaw] = useState(false);
     const RAW_LIMIT = 50000;
-    const isTruncated = rawText.length > RAW_LIMIT && !showFullRaw;
-    const displayRawText = isTruncated ? rawText.slice(0, RAW_LIMIT) : rawText;
+    const safeRawText = typeof rawText === 'string' ? rawText : '';
+    const isTruncated = safeRawText.length > RAW_LIMIT && !showFullRaw;
+    const displayRawText = isTruncated ? safeRawText.slice(0, RAW_LIMIT) : safeRawText;
     useEffect(() => {
         if (externalMode) {
             setInternalMode(externalMode);

package/dist/esm/components/LogCard.js

@@ -4,7 +4,7 @@ import Svg, { Path } from 'react-native-svg';
 import { AppColors } from '../styles/AppColors';
 import { METHOD_COLORS } from '../constants';
 import { getStatusColor, getDurationColor, formatDateTime, getSize, } from '../helpers';
-import { CalendarIcon, ClockIcon, SizeIcon } from './NetworkIcons';
+import { CalendarIcon, ClockIcon, SizeIcon, GlobeIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, RepeatIcon, } from './NetworkIcons';
 import { AppFonts } from '../styles/AppFonts';
 import styles from '../styles';
 import HighlightText from './HighlightText';
@@ -59,6 +59,22 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
             }).start();
         }
     }, [isNew]);
+    const renderStatusIcon = () => {
+        if (isLoading) {
+            return <ClockIcon color={AppColors.darkOrange} size={9}/>;
+        }
+        const num = typeof item.status === 'number' ? item.status : parseInt(String(item.status || 0), 10);
+        if (num >= 200 && num < 300) {
+            return <CircleCheckIcon color={AppColors.greenColor} size={9}/>;
+        }
+        if (num >= 300 && num < 400) {
+            return <RepeatIcon color={AppColors.amber700} size={9}/>;
+        }
+        if (num >= 400 && num < 500) {
+            return <CircleAlertIcon color={AppColors.darkOrange} size={9}/>;
+        }
+        return <CircleXIcon color={AppColors.errorColor} size={9}/>;
+    };
     const triggeredAt = formatDateTime(item.startTime);
     const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
     return (<TouchableScale onPress={onPress} style={[
@@ -210,6 +226,9 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
           <View style={[
             styles.statusPill,
             {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 3.5,
                 backgroundColor: isFailed
                     ? `${AppColors.errorColor}15`
                     : isLoading
@@ -222,6 +241,7 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
                         : `${statusColor}30`,
             },
         ]}>
+            {renderStatusIcon()}
             <Text style={[
             styles.statusPillText,
             {
@@ -244,7 +264,17 @@ const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, t
         {/* Row 2: Full URL Capsule Container (Clickable with link prompt) */}
         <View style={styles.cardSlugBox}>
           <Pressable onPress={handleOpenUrl} style={styles.slugLeft} hitSlop={6}>
-            <Text style={styles.slugTag}>URL ↗</Text>
+            <View style={{
+            width: 17,
+            height: 17,
+            borderRadius: 4,
+            backgroundColor: `${AppColors.skyBlue}1A`,
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginRight: 4,
+        }}>
+              <GlobeIcon color={AppColors.skyBlue} size={11}/>
+            </View>
             <HighlightText text={item.url} search={searchStr} style={[styles.slugText, { color: AppColors.skyBlue, textDecorationLine: 'underline' }]} highlightStyle={styles.highlight} numberOfLines={2} ellipsizeMode="middle"/>
           </Pressable>
 

package/dist/esm/components/LogSyntaxHighlighter.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TextStyle } from 'react-native';
+export interface LogSyntaxHighlighterProps {
+    text: string;
+    search?: string;
+    numberOfLines?: number;
+    style?: TextStyle | TextStyle[];
+    detectLinks?: boolean;
+}
+interface Token {
+    type: 'key' | 'string' | 'number' | 'boolean' | 'null' | 'url' | 'bracket' | 'tag' | 'plain';
+    value: string;
+}
+export declare const tokenizeText: (input: string) => Token[];
+export declare const LogSyntaxHighlighter: React.FC<LogSyntaxHighlighterProps>;
+export default LogSyntaxHighlighter;

package/dist/esm/components/LogSyntaxHighlighter.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import { escapeRegex, handleOpenExternalLink } from '../helpers';
+const TOKEN_REGEX = /("(?:\\.|[^"\\])*"(?=\s*:))|("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*')|(\b-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|(\b(?:true|false)\b)|(\b(?:null|undefined|NaN)\b)|(https?:\/\/[^\s"',]+)|(\[[\w\s_-]+\])|([{}[\],:])|([^"'\d\s{}[\],:]+|[ \t\r\n]+)/g;
+export const tokenizeText = (input) => {
+    if (!input)
+        return [];
+    const tokens = [];
+    let match;
+    TOKEN_REGEX.lastIndex = 0;
+    while ((match = TOKEN_REGEX.exec(input)) !== null) {
+        if (match[1]) {
+            tokens.push({ type: 'key', value: match[1] });
+        }
+        else if (match[2]) {
+            tokens.push({ type: 'string', value: match[2] });
+        }
+        else if (match[3]) {
+            tokens.push({ type: 'number', value: match[3] });
+        }
+        else if (match[4]) {
+            tokens.push({ type: 'boolean', value: match[4] });
+        }
+        else if (match[5]) {
+            tokens.push({ type: 'null', value: match[5] });
+        }
+        else if (match[6]) {
+            tokens.push({ type: 'url', value: match[6] });
+        }
+        else if (match[7]) {
+            tokens.push({ type: 'tag', value: match[7] });
+        }
+        else if (match[8]) {
+            tokens.push({ type: 'bracket', value: match[8] });
+        }
+        else if (match[9]) {
+            tokens.push({ type: 'plain', value: match[9] });
+        }
+    }
+    return tokens;
+};
+const getTokenColor = (type) => {
+    switch (type) {
+        case 'key':
+            return AppColors.sky600 || '#0369a1';
+        case 'string':
+            return AppColors.emerald600 || '#059669';
+        case 'number':
+            return AppColors.amber600 || '#d97706';
+        case 'boolean':
+            return AppColors.purple || '#7c3aed';
+        case 'null':
+            return AppColors.red600 || '#dc2626';
+        case 'url':
+            return '#0284c7';
+        case 'tag':
+            return AppColors.violet600 || '#7c3aed';
+        case 'bracket':
+            return AppColors.slate500 || '#64748b';
+        case 'plain':
+        default:
+            return AppColors.primaryBlack || '#1e293b';
+    }
+};
+export const LogSyntaxHighlighter = React.memo(({ text, search, numberOfLines, style, detectLinks = true }) => {
+    if (!text)
+        return null;
+    const tokens = React.useMemo(() => tokenizeText(text), [text]);
+    const renderToken = (token, tokenIdx) => {
+        const baseColor = getTokenColor(token.type);
+        const isUrl = token.type === 'url';
+        const isKey = token.type === 'key';
+        const tokenStyle = {
+            color: baseColor,
+            fontFamily: isKey ? AppFonts.interBold : AppFonts.interRegular,
+            textDecorationLine: isUrl ? 'underline' : 'none',
+        };
+        if (!search || search.trim().length === 0) {
+            return (<Text key={tokenIdx} style={tokenStyle} onPress={isUrl && detectLinks
+                    ? () => handleOpenExternalLink(token.value)
+                    : undefined}>
+            {token.value}
+          </Text>);
+        }
+        const regex = new RegExp(`(${escapeRegex(search.trim())})`, 'gi');
+        const parts = token.value.split(regex);
+        return (<Text key={tokenIdx} style={tokenStyle}>
+          {parts.map((part, partIdx) => {
+                const isMatch = part.toLowerCase() === search.trim().toLowerCase();
+                return isMatch ? (<Text key={partIdx} style={[
+                        tokenStyle,
+                        styles.searchHighlight,
+                    ]}>
+                {part}
+              </Text>) : (<Text key={partIdx} style={tokenStyle} onPress={isUrl && detectLinks
+                        ? () => handleOpenExternalLink(token.value)
+                        : undefined}>
+                {part}
+              </Text>);
+            })}
+        </Text>);
+    };
+    return (<Text style={[styles.containerText, style]} numberOfLines={numberOfLines}>
+        {tokens.map(renderToken)}
+      </Text>);
+});
+const styles = StyleSheet.create({
+    containerText: {
+        fontFamily: AppFonts.interRegular,
+        fontSize: 12,
+        lineHeight: 18,
+        color: AppColors.primaryBlack,
+    },
+    searchHighlight: {
+        backgroundColor: '#fef08a',
+        color: '#854d0e',
+        fontFamily: AppFonts.interBold,
+        borderRadius: 2,
+    },
+});
+export default LogSyntaxHighlighter;

package/dist/esm/components/NetworkIcons.d.ts

@@ -124,3 +124,6 @@ export declare const SmartphoneIcon: ({ color, size }: IconProps) => React.JSX.E
 export declare const AlertTriangleIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const BugIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const TagIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const NpmIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ResetIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ChevronDownIcon: ({ color, size }: IconProps) => React.JSX.Element;

package/dist/esm/components/NetworkIcons.js

@@ -700,3 +700,14 @@ export const TagIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg
     <Path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8 8a2 2 0 0 0 2.828 0l7.172-7.172a2 2 0 0 0 0-2.828l-8-8z" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
     <Circle cx="7.5" cy="7.5" r="1.5" fill={color}/>
   </Svg>);
+export const NpmIcon = ({ color = '#CB3837', size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 256 256" fill="none">
+    <Rect width="256" height="256" rx="32" fill={color}/>
+    <Path d="M48 48h160v160h-32V96h-32v112H48V48z" fill="#FFFFFF"/>
+  </Svg>);
+export const ResetIcon = ({ color = AppColors.white, size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <Path d="M3 3v5h5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);
+export const ChevronDownIcon = ({ color = AppColors.grayTextWeak, size = 14 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </Svg>);

package/dist/esm/components/Slider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface SliderProps {
+    value: number;
+    onValueChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    formatLabel?: (value: number) => string;
+    quickPresets?: number[];
+    disabled?: boolean;
+}
+export declare const Slider: React.FC<SliderProps>;
+export default Slider;

package/dist/esm/components/Slider.js

@@ -0,0 +1,222 @@
+import React, { useRef, useState, useCallback, useMemo } from 'react';
+import { View, Text, StyleSheet, PanResponder, } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import TouchableScale from './TouchableScale';
+export const Slider = React.memo(({ value, onValueChange, min = 50, max = 90, step = 5, formatLabel = val => `${Math.round(val)}%`, quickPresets = [50, 60, 70, 80, 90], disabled = false, }) => {
+    const trackWidthRef = useRef(0);
+    const [trackWidth, setTrackWidth] = useState(0);
+    const [isDragging, setIsDragging] = useState(false);
+    const clampedValue = Math.max(min, Math.min(max, value));
+    const percentage = (clampedValue - min) / (max - min || 1);
+    const updateValueFromPosition = useCallback((pageX, trackPageX) => {
+        if (trackWidthRef.current <= 0)
+            return;
+        const relativeX = Math.max(0, Math.min(trackWidthRef.current, pageX - trackPageX));
+        const rawRatio = relativeX / trackWidthRef.current;
+        let newValue = min + rawRatio * (max - min);
+        if (step > 0) {
+            newValue = Math.round(newValue / step) * step;
+        }
+        newValue = Math.max(min, Math.min(max, newValue));
+        onValueChange(newValue);
+    }, [min, max, step, onValueChange]);
+    const trackContainerRef = useRef(null);
+    const trackPageXRef = useRef(0);
+    const measureTrack = useCallback(() => {
+        if (trackContainerRef.current) {
+            trackContainerRef.current.measure((_x, _y, _width, _height, pageX) => {
+                trackPageXRef.current = pageX;
+            });
+        }
+    }, []);
+    const panResponder = useMemo(() => PanResponder.create({
+        onStartShouldSetPanResponder: () => !disabled,
+        onMoveShouldSetPanResponder: () => !disabled,
+        onPanResponderGrant: (evt) => {
+            setIsDragging(true);
+            measureTrack();
+            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
+        },
+        onPanResponderMove: (evt, _gestureState) => {
+            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
+        },
+        onPanResponderRelease: () => {
+            setIsDragging(false);
+        },
+        onPanResponderTerminate: () => {
+            setIsDragging(false);
+        },
+    }), [disabled, measureTrack, updateValueFromPosition]);
+    const handleLayout = (e) => {
+        const w = e.nativeEvent.layout.width;
+        trackWidthRef.current = w;
+        setTrackWidth(w);
+        measureTrack();
+    };
+    const thumbPosition = percentage * (trackWidth || 0);
+    return (<View style={styles.container}>
+        {/* Value Display Row */}
+        <View style={styles.valueRow}>
+          <Text style={styles.rangeText}>{min}%</Text>
+          <View style={[
+            styles.currentValueBadge,
+            isDragging && styles.currentValueBadgeActive,
+        ]}>
+            <Text style={styles.currentValueText}>{formatLabel(clampedValue)}</Text>
+          </View>
+          <Text style={styles.rangeText}>{max}%</Text>
+        </View>
+
+        {/* Interactive Track Area */}
+        <View ref={trackContainerRef} onLayout={handleLayout} {...panResponder.panHandlers} style={styles.touchArea}>
+          {/* Background Rail */}
+          <View style={styles.rail}>
+            {/* Active Filled Bar */}
+            <View style={[
+            styles.fillBar,
+            { width: `${Math.round(percentage * 100)}%` },
+        ]}/>
+          </View>
+
+          {/* Draggable Thumb */}
+          <View style={[
+            styles.thumb,
+            {
+                left: Math.max(0, Math.min((trackWidth || 0) - 24, thumbPosition - 12)),
+            },
+            isDragging && styles.thumbActive,
+        ]}>
+            <View style={styles.thumbCenterDot}/>
+          </View>
+        </View>
+
+        {/* Quick Presets */}
+        {quickPresets && quickPresets.length > 0 && (<View style={styles.presetRow}>
+            {quickPresets.map(preset => {
+                const isSelected = Math.round(clampedValue) === preset;
+                return (<TouchableScale key={preset} onPress={() => onValueChange(preset)} style={[
+                        styles.presetButton,
+                        isSelected && styles.presetButtonActive,
+                    ]}>
+                  <Text style={[
+                        styles.presetText,
+                        isSelected && styles.presetTextActive,
+                    ]}>
+                    {preset}%
+                  </Text>
+                </TouchableScale>);
+            })}
+          </View>)}
+      </View>);
+});
+const styles = StyleSheet.create({
+    container: {
+        paddingVertical: 4,
+        gap: 8,
+    },
+    valueRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 2,
+    },
+    rangeText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayText,
+    },
+    currentValueBadge: {
+        backgroundColor: `${AppColors.purple}1A`,
+        borderColor: `${AppColors.purple}33`,
+        borderWidth: 1,
+        borderRadius: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 2.5,
+    },
+    currentValueBadgeActive: {
+        backgroundColor: AppColors.purple,
+        borderColor: AppColors.purple,
+        transform: [{ scale: 1.05 }],
+    },
+    currentValueText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors.purple,
+    },
+    touchArea: {
+        height: 36,
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    rail: {
+        height: 8,
+        backgroundColor: `${AppColors.grayTextWeak}2B`,
+        borderRadius: 4,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    fillBar: {
+        height: '100%',
+        backgroundColor: AppColors.purple,
+        borderRadius: 4,
+    },
+    thumb: {
+        position: 'absolute',
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        backgroundColor: AppColors.white,
+        borderWidth: 2.5,
+        borderColor: AppColors.purple,
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: AppColors.black,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.18,
+        shadowRadius: 3.5,
+        elevation: 4,
+    },
+    thumbActive: {
+        transform: [{ scale: 1.15 }],
+        shadowOpacity: 0.28,
+        shadowRadius: 5,
+        elevation: 6,
+        borderColor: AppColors.purple,
+    },
+    thumbCenterDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: AppColors.purple,
+    },
+    presetRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 8,
+        marginTop: 2,
+    },
+    presetButton: {
+        flex: 1,
+        paddingVertical: 5,
+        borderRadius: 7,
+        alignItems: 'center',
+        backgroundColor: AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+    },
+    presetButtonActive: {
+        backgroundColor: `${AppColors.purple}20`,
+        borderColor: AppColors.purple,
+    },
+    presetText: {
+        fontFamily: AppFonts.interBold,
+        fontSize: 10.5,
+        color: AppColors.grayText,
+    },
+    presetTextActive: {
+        color: AppColors.purple,
+    },
+});
+export default Slider;

package/dist/esm/components/TouchableScale.d.ts

@@ -7,6 +7,7 @@ export interface TouchableScaleProps extends PressableProps {
     children?: React.ReactNode;
     hitSlop?: any;
     disabled?: boolean;
+    enableHaptics?: boolean;
 }
 declare const TouchableScale: React.NamedExoticComponent<TouchableScaleProps>;
 export default TouchableScale;

package/dist/esm/components/TouchableScale.js

@@ -1,47 +1,45 @@
 import React, { useRef } from 'react';
-import { Animated, Pressable, StyleSheet, Platform } from 'react-native';
-const TouchableScale = React.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, accessibilityState, accessibilityValue, ...rest }) {
-    if (Platform.OS === 'android') {
-        return (<Pressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} style={({ pressed }) => [
-                style,
-                { opacity: pressed ? 0.75 : 1 },
-            ]} {...rest}>
-        {children}
-      </Pressable>);
-    }
+import { Animated, Pressable } from 'react-native';
+import { triggerNativeHaptic } from '../native/NativeInspector';
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const TouchableScale = React.memo(function TouchableScale({ onPress, onLongPress, style, children, hitSlop, disabled, enableHaptics = true, accessible, accessibilityRole, accessibilityLabel, accessibilityHint, accessibilityState, accessibilityValue, ...rest }) {
     const scale = useRef(new Animated.Value(1)).current;
     const opacity = useRef(new Animated.Value(1)).current;
-    const animatePress = (pressed) => {
+    const handlePressIn = () => {
+        if (disabled)
+            return;
+        if (enableHaptics) {
+            triggerNativeHaptic('light');
+        }
         Animated.parallel([
-            Animated.spring(scale, {
-                toValue: pressed ? 0.94 : 1,
-                friction: 6,
-                tension: 120,
+            Animated.timing(scale, {
+                toValue: 0.94,
+                duration: 50,
                 useNativeDriver: true,
             }),
             Animated.timing(opacity, {
-                toValue: pressed ? 0.86 : 1,
-                duration: pressed ? 90 : 140,
+                toValue: 0.85,
+                duration: 50,
                 useNativeDriver: true,
             }),
         ]).start();
     };
-    const flattenedStyle = StyleSheet.flatten(style) || {};
-    const layoutStyle = {
-        flex: flattenedStyle.flex,
-        flexDirection: flattenedStyle.flexDirection,
-        alignItems: flattenedStyle.alignItems,
-        justifyContent: flattenedStyle.justifyContent,
-        flexWrap: flattenedStyle.flexWrap,
-        alignSelf: flattenedStyle.alignSelf,
-        flexGrow: flattenedStyle.flexGrow,
-        flexShrink: flattenedStyle.flexShrink,
-        gap: flattenedStyle.gap,
+    const handlePressOut = () => {
+        Animated.parallel([
+            Animated.timing(scale, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            Animated.timing(opacity, {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start();
     };
-    return (<Pressable accessible={accessible} accessibilityRole={accessibilityRole} accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint} accessibilityState={accessibilityState} accessibilityValue={accessibilityValue} disabled={disabled} style={style} onPressIn={() => animatePress(true)} onPressOut={() => animatePress(false)} onPress={onPress} onLongPress={onLongPress} hitSlop={hitSlop} {...rest}>
-      <Animated.View style={[{ opacity, transform: [{ scale }] }, layoutStyle]}>
-        {children}
-      </Animated.View>
-    </Pressable>);
+    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/dist/esm/constants/index.d.ts

@@ -1,6 +1,5 @@
 import { Method } from '../types';
-import { StatusFilter } from '../types';
-export declare const STATUS_FILTERS: StatusFilter[];
+export declare const STATUS_FILTERS: string[];
 export declare const METHOD_COLORS: Record<Method, string>;
 export declare const DOMAIN_COLORS: string[];
 export declare const DURATION_FAST_MS = 200;

package/dist/esm/constants/index.js

@@ -3,9 +3,13 @@ import { AppColors } from '../styles/AppColors';
 export const STATUS_FILTERS = [
     'ALL',
     '2xx',
+    '200',
     '3xx',
     '4xx',
+    '400',
+    '404',
     '5xx',
+    '500',
     'Failed',
 ];
 export const METHOD_COLORS = {

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.35";
+export declare const LIB_VERSION = "2.0.1";

package/dist/esm/constants/version.js

@@ -1,3 +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 = '1.1.35';
+export const LIB_VERSION = '2.0.1';

package/dist/esm/customHooks/analyticsLogger.d.ts

@@ -17,6 +17,10 @@ export declare const getCollectionEnabled: () => boolean;
  * Useful for custom analytics wrappers or testing.
  */
 export declare const logAnalyticsEvent: (name: string, params?: Record<string, any>, userProperties?: Record<string, any>) => void;
+/**
+ * Returns true if analytics logging is active (always ready for custom and Firebase events).
+ */
 export declare const isAnalyticsConnected: () => boolean;
+export declare const isFirebaseAnalyticsPatched: () => boolean;
 export declare const setupAnalyticsLogger: (analyticsInstance: any) => void;
 export declare const autoSetupAnalyticsLogger: () => boolean;