react-native-inapp-inspector 2.3.18 → 2.3.20

package/src/components/Slider.tsx

@@ -1,300 +0,0 @@
-import React, {useRef, useState, useCallback, useMemo} from 'react';
-import {
-  View,
-  Text,
-  StyleSheet,
-  PanResponder,
-  LayoutChangeEvent,
-  GestureResponderEvent,
-  PanResponderGestureState,
-} from 'react-native';
-import {AppColors} from '../styles/AppColors';
-import {AppFonts} from '../styles/AppFonts';
-import TouchableScale from './TouchableScale';
-
-export interface SliderProps {
-  value: number;
-  onValueChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  formatLabel?: (value: number) => string;
-  quickPresets?: number[];
-  disabled?: boolean;
-}
-
-export const Slider: React.FC<SliderProps> = 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<number>(0);
-    const [trackWidth, setTrackWidth] = useState<number>(0);
-    const [isDragging, setIsDragging] = useState<boolean>(false);
-
-    const clampedValue = Math.max(min, Math.min(max, value));
-    const percentage = (clampedValue - min) / (max - min || 1);
-
-    const updateValueFromPosition = useCallback(
-      (pageX: number, trackPageX: number) => {
-        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<View>(null);
-    const trackPageXRef = useRef<number>(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: GestureResponderEvent) => {
-            setIsDragging(true);
-            measureTrack();
-            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
-          },
-          onPanResponderMove: (
-            evt: GestureResponderEvent,
-            _gestureState: PanResponderGestureState,
-          ) => {
-            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
-          },
-          onPanResponderRelease: () => {
-            setIsDragging(false);
-          },
-          onPanResponderTerminate: () => {
-            setIsDragging(false);
-          },
-        }),
-      [disabled, measureTrack, updateValueFromPosition],
-    );
-
-    const handleLayout = (e: LayoutChangeEvent) => {
-      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/src/components/SourcePageCard.tsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import {View, Pressable, Text} from 'react-native';
-import Svg, {Rect, Path} from 'react-native-svg';
-
-// Components
-import CopyButton from './CopyButton';
-
-// Custom Hooks
-import useAccordion from '../customHooks/useAccordion';
-
-// Assets
-import {ChevronIcon} from './NetworkIcons';
-
-// Type Definition
-import {SourcePageCardProps} from '../types';
-
-// Stylesheet
-import {AppColors} from '../styles/AppColors';
-import styles from '../styles';
-
-const SourcePageCard = ({routeInfo}: SourcePageCardProps) => {
-  const main = useAccordion(true);
-  const params = useAccordion(false);
-
-  const hasParams =
-    routeInfo.params && Object.keys(routeInfo.params).length > 0;
-
-  return (
-    <View style={styles.sourcePageCard}>
-      <Pressable onPress={main.toggleOpen} hitSlop={12}>
-        <View style={styles.sourcePageAccordionHeader}>
-          <View style={styles.sourcePageTop}>
-            <View style={styles.sourcePageIcon}>
-              <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
-                <Rect
-                  x="3"
-                  y="3"
-                  width="7"
-                  height="7"
-                  rx="1.5"
-                  stroke={AppColors.purple}
-                  strokeWidth="2"
-                />
-                <Rect
-                  x="14"
-                  y="3"
-                  width="7"
-                  height="7"
-                  rx="1.5"
-                  stroke={AppColors.purple}
-                  strokeWidth="2"
-                />
-                <Rect
-                  x="3"
-                  y="14"
-                  width="7"
-                  height="7"
-                  rx="1.5"
-                  stroke={AppColors.purple}
-                  strokeWidth="2"
-                />
-                <Path
-                  d="M14 17.5h7M17.5 14v7"
-                  stroke={AppColors.purple}
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                />
-              </Svg>
-            </View>
-            <View style={{flex: 1}}>
-              <Text style={styles.sourcePageLabel}>Source Page</Text>
-              <Text style={styles.sourcePageValue} numberOfLines={1}>
-                {routeInfo.path}
-              </Text>
-            </View>
-          </View>
-          <View style={styles.sourcePageHeaderRight}>
-            <CopyButton value={routeInfo.path} label="Source Path" />
-            <View style={styles.iconSquareBtn}>
-              <View style={main.chevronStyle}>
-                <ChevronIcon color={AppColors.grayTextStrong} size={14} />
-              </View>
-            </View>
-          </View>
-        </View>
-      </Pressable>
-
-      {main.isOpen && (
-        <View>
-          {hasParams && (
-            <View style={styles.sourceParamsBox}>
-              <Pressable onPress={params.toggleOpen} hitSlop={10}>
-                <View style={styles.paramsAccordionHeader}>
-                  <View style={styles.paramsAccordionLeft}>
-                    <Text style={styles.sourceParamsLabel}>Parameters</Text>
-                    <View style={styles.headerCountBadge}>
-                      <Text style={styles.headerCountText}>
-                        {Object.keys(routeInfo.params).length}
-                      </Text>
-                    </View>
-                  </View>
-                  <View style={styles.paramsAccordionRight}>
-                    <CopyButton value={routeInfo.params} label="Parameters" />
-                    <View style={styles.iconSquareBtn}>
-                      <View style={params.chevronStyle}>
-                        <ChevronIcon color={AppColors.grayTextStrong} size={14} />
-                      </View>
-                    </View>
-                  </View>
-                </View>
-              </Pressable>
-
-              {params.isOpen && (
-                <View style={styles.paramsBody}>
-                  {Object.entries(routeInfo.params).map(([key, val], i, arr) => (
-                    <View
-                      key={key}
-                      style={[
-                        styles.paramRow,
-                        i < arr.length - 1 ? styles.paramRowBorder : null,
-                      ]}>
-                      <Text style={styles.paramKey}>{key}</Text>
-                      <View style={styles.paramValueRow}>
-                        <Text selectable style={styles.paramValue}>
-                          {typeof val === 'object'
-                            ? JSON.stringify(val)
-                            : String(val)}
-                        </Text>
-                        <CopyButton
-                          value={
-                            typeof val === 'object'
-                              ? JSON.stringify(val)
-                              : String(val)
-                          }
-                          label={key}
-                        />
-                      </View>
-                    </View>
-                  ))}
-                </View>
-              )}
-            </View>
-          )}
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default SourcePageCard;

package/src/components/Toast.tsx

@@ -1,131 +0,0 @@
-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: false,
-        }),
-        Animated.spring(translateYAnim, {
-          toValue: 0,
-          tension: 80,
-          friction: 8,
-          useNativeDriver: false,
-        }),
-      ]).start();
-
-      hideTimerRef.current = setTimeout(() => {
-        Animated.parallel([
-          Animated.timing(opacityAnim, {
-            toValue: 0,
-            duration: 200,
-            useNativeDriver: false,
-          }),
-          Animated.timing(translateYAnim, {
-            toValue: 20,
-            duration: 200,
-            useNativeDriver: false,
-          }),
-        ]).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

@@ -1,61 +0,0 @@
-import React from 'react';
-import {Pressable, PressableProps} from 'react-native';
-import {triggerNativeHaptic} from '../native/NativeInspector';
-
-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 handlePressIn = () => {
-    if (disabled) return;
-    if (enableHaptics) {
-      triggerNativeHaptic('light');
-    }
-  };
-
-  return (
-    <Pressable
-      accessible={accessible}
-      accessibilityRole={accessibilityRole}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      accessibilityState={accessibilityState}
-      accessibilityValue={accessibilityValue}
-      disabled={disabled}
-      style={({pressed}) => [
-        typeof style === 'function' ? style({pressed}) : style,
-        pressed && !disabled && {opacity: 0.82, transform: [{scale: 0.96}]},
-      ]}
-      onPressIn={handlePressIn}
-      onPress={onPress}
-      onLongPress={onLongPress}
-      hitSlop={hitSlop}
-      {...rest}>
-      {children}
-    </Pressable>
-  );
-});
-
-export default TouchableScale;