react-native-inapp-inspector 2.3.7 → 2.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (56) hide show
  1. package/dist/commonjs/components/Inspector/AnalyticsTab.js +27 -2
  2. package/dist/commonjs/components/Inspector/BundleTab.js +3 -0
  3. package/dist/commonjs/components/Inspector/ConsoleTab.js +24 -1
  4. package/dist/commonjs/components/Inspector/CrashTab.js +30 -1
  5. package/dist/commonjs/components/Inspector/FeatureUnderDevNotice.d.ts +7 -0
  6. package/dist/commonjs/components/Inspector/FeatureUnderDevNotice.js +111 -0
  7. package/dist/commonjs/components/Inspector/InspectorHeader.js +225 -108
  8. package/dist/commonjs/components/Inspector/NpmUpdateToast.js +1 -1
  9. package/dist/commonjs/components/Inspector/PerformanceTab.js +3 -0
  10. package/dist/commonjs/components/Inspector/ReduxTab.js +24 -1
  11. package/dist/commonjs/components/Inspector/SettingsPanel.js +73 -88
  12. package/dist/commonjs/components/Inspector/StorageTab.js +37 -11
  13. package/dist/commonjs/components/Inspector/UpdateAvailableModal.js +2 -0
  14. package/dist/commonjs/components/LogCard.js +33 -3
  15. package/dist/commonjs/constants/version.d.ts +1 -1
  16. package/dist/commonjs/constants/version.js +1 -1
  17. package/dist/commonjs/customHooks/networkLogger.js +2 -0
  18. package/dist/commonjs/helpers/telemetry.js +34 -0
  19. package/dist/commonjs/index.js +3 -0
  20. package/dist/esm/components/Inspector/AnalyticsTab.js +29 -4
  21. package/dist/esm/components/Inspector/BundleTab.js +3 -0
  22. package/dist/esm/components/Inspector/ConsoleTab.js +26 -3
  23. package/dist/esm/components/Inspector/CrashTab.js +32 -3
  24. package/dist/esm/components/Inspector/FeatureUnderDevNotice.d.ts +7 -0
  25. package/dist/esm/components/Inspector/FeatureUnderDevNotice.js +74 -0
  26. package/dist/esm/components/Inspector/InspectorHeader.js +226 -109
  27. package/dist/esm/components/Inspector/NpmUpdateToast.js +1 -1
  28. package/dist/esm/components/Inspector/PerformanceTab.js +3 -0
  29. package/dist/esm/components/Inspector/ReduxTab.js +26 -3
  30. package/dist/esm/components/Inspector/SettingsPanel.js +73 -88
  31. package/dist/esm/components/Inspector/StorageTab.js +39 -13
  32. package/dist/esm/components/Inspector/UpdateAvailableModal.js +2 -0
  33. package/dist/esm/components/LogCard.js +34 -4
  34. package/dist/esm/constants/version.d.ts +1 -1
  35. package/dist/esm/constants/version.js +1 -1
  36. package/dist/esm/customHooks/networkLogger.js +2 -0
  37. package/dist/esm/helpers/telemetry.js +34 -0
  38. package/dist/esm/index.js +3 -0
  39. package/package.json +1 -1
  40. package/src/components/Inspector/AnalyticsTab.tsx +71 -43
  41. package/src/components/Inspector/BundleTab.tsx +3 -0
  42. package/src/components/Inspector/ConsoleTab.tsx +28 -1
  43. package/src/components/Inspector/CrashTab.tsx +45 -14
  44. package/src/components/Inspector/FeatureUnderDevNotice.tsx +94 -0
  45. package/src/components/Inspector/InspectorHeader.tsx +257 -115
  46. package/src/components/Inspector/NpmUpdateToast.tsx +1 -1
  47. package/src/components/Inspector/PerformanceTab.tsx +3 -0
  48. package/src/components/Inspector/ReduxTab.tsx +28 -1
  49. package/src/components/Inspector/SettingsPanel.tsx +93 -132
  50. package/src/components/Inspector/StorageTab.tsx +56 -27
  51. package/src/components/Inspector/UpdateAvailableModal.tsx +2 -0
  52. package/src/components/LogCard.tsx +41 -4
  53. package/src/constants/version.ts +1 -1
  54. package/src/customHooks/networkLogger.ts +2 -0
  55. package/src/helpers/telemetry.ts +36 -0
  56. package/src/index.tsx +5 -0
package/src/components/Inspector/InspectorHeader.tsx CHANGED
@@ -5,7 +5,9 @@ import {
5
5
  Linking,
6
6
  Platform,
7
7
  Pressable,
8
+ ScrollView,
8
9
  Text,
10
+ useWindowDimensions,
9
11
  View,
10
12
  } from 'react-native';
11
13
  import LinearGradient from 'react-native-linear-gradient';
@@ -77,6 +79,11 @@ const InspectorHeader = React.memo(() => {
77
79
  setSelectedCrash,
78
80
  } = useInspector();
79
81
 
82
+ const {width: windowWidth} = useWindowDimensions();
83
+ const isNarrow = windowWidth < 360;
84
+ const isCompact = windowWidth < 400;
85
+ const isTablet = windowWidth >= 600;
86
+
80
87
  const [showUpdateModal, setShowUpdateModal] = React.useState<boolean>(false);
81
88
  const [appVersionString, setAppVersionString] = React.useState<string>(() => {
82
89
  return getAppVersionAndBuild().formatted;
@@ -101,7 +108,7 @@ const InspectorHeader = React.memo(() => {
101
108
  if (clean === 'DEV' || clean.includes('DEV') || clean === 'LOCAL') {
102
109
  return {
103
110
  label: rawEnv,
104
- bg: `${AppColors.emerald500}40`, // emerald
111
+ bg: `${AppColors.emerald500}40`,
105
112
  border: `${AppColors.emerald400}8C`,
106
113
  text: AppColors.mintGreenBorder,
107
114
  };
@@ -109,7 +116,7 @@ const InspectorHeader = React.memo(() => {
109
116
  if (clean === 'UAT' || clean === 'QA' || clean === 'TEST') {
110
117
  return {
111
118
  label: rawEnv,
112
- bg: `${AppColors.amber500}47`, // amber
119
+ bg: `${AppColors.amber500}47`,
113
120
  border: `${AppColors.amber400}99`,
114
121
  text: AppColors.amberWarmBorder,
115
122
  };
@@ -117,15 +124,14 @@ const InspectorHeader = React.memo(() => {
117
124
  if (clean === 'PREPROD' || clean === 'STAGE' || clean === 'STAGING') {
118
125
  return {
119
126
  label: rawEnv,
120
- bg: `${AppColors.purple500}47`, // purple
127
+ bg: `${AppColors.purple500}47`,
121
128
  border: `${AppColors.purple400}99`,
122
129
  text: AppColors.violetSoftBorder,
123
130
  };
124
131
  }
125
- // PROD / Live
126
132
  return {
127
133
  label: rawEnv,
128
- bg: `${AppColors.rose500}40`, // rose
134
+ bg: `${AppColors.rose500}40`,
129
135
  border: `${AppColors.roseBorder}8C`,
130
136
  text: AppColors.errorBorder,
131
137
  };
@@ -166,6 +172,9 @@ const InspectorHeader = React.memo(() => {
166
172
  const headerTopPadding =
167
173
  Platform.OS === 'ios' && modalHeightPercent >= 95 ? 44 : 0;
168
174
 
175
+ const buttonSize = isNarrow ? 28 : isCompact ? 30 : 32;
176
+ const logoSize = isNarrow ? 36 : isCompact ? 40 : 44;
177
+
169
178
  return (
170
179
  <>
171
180
  <LinearGradient
@@ -174,14 +183,22 @@ const InspectorHeader = React.memo(() => {
174
183
  end={{x: 1, y: 1}}
175
184
  style={styles.headerGradient}>
176
185
  <View style={{paddingTop: headerTopPadding, width: '100%'}}>
177
- <View style={styles.header}>
186
+ <View
187
+ style={[
188
+ styles.header,
189
+ {
190
+ paddingHorizontal: isNarrow ? 8 : 12,
191
+ paddingVertical: isNarrow ? 6 : 8,
192
+ minHeight: isNarrow ? 48 : 52,
193
+ },
194
+ ]}>
178
195
  <View
179
196
  style={[
180
197
  styles.headerLeft,
181
198
  {
182
199
  flexDirection: 'row',
183
200
  alignItems: 'center',
184
- gap: 8,
201
+ gap: isNarrow ? 6 : 8,
185
202
  flex: !isDetailView ? 1 : 0,
186
203
  minWidth: 0,
187
204
  },
@@ -208,9 +225,9 @@ const InspectorHeader = React.memo(() => {
208
225
  hitSlop={15}
209
226
  style={[
210
227
  {
211
- width: 38,
212
- height: 38,
213
- borderRadius: 19,
228
+ width: isNarrow ? 32 : 36,
229
+ height: isNarrow ? 32 : 36,
230
+ borderRadius: isNarrow ? 16 : 18,
214
231
  alignItems: 'center',
215
232
  justifyContent: 'center',
216
233
  backgroundColor: `${AppColors.white}2E`,
@@ -219,13 +236,12 @@ const InspectorHeader = React.memo(() => {
219
236
  },
220
237
  !isAnySelected && {display: 'none'},
221
238
  ]}>
222
- {/* Soft outer glow to fake a blurred circle */}
223
239
  <View
224
240
  style={{
225
241
  position: 'absolute',
226
- width: 48,
227
- height: 48,
228
- borderRadius: 24,
242
+ width: isNarrow ? 40 : 44,
243
+ height: isNarrow ? 40 : 44,
244
+ borderRadius: 22,
229
245
  backgroundColor: `${AppColors.white}1A`,
230
246
  }}
231
247
  />
@@ -239,7 +255,7 @@ const InspectorHeader = React.memo(() => {
239
255
  <Text
240
256
  style={{
241
257
  fontFamily: AppFonts.interBold,
242
- fontSize: 16,
258
+ fontSize: isNarrow ? 14 : 16,
243
259
  color: AppColors.white,
244
260
  letterSpacing: -0.2,
245
261
  }}
@@ -250,7 +266,7 @@ const InspectorHeader = React.memo(() => {
250
266
  <View
251
267
  style={{
252
268
  backgroundColor: `${AppColors.white}26`,
253
- paddingHorizontal: 6,
269
+ paddingHorizontal: isNarrow ? 4 : 6,
254
270
  paddingVertical: 1.5,
255
271
  borderRadius: 10,
256
272
  borderWidth: 1,
@@ -259,7 +275,7 @@ const InspectorHeader = React.memo(() => {
259
275
  <Text
260
276
  style={{
261
277
  fontFamily: AppFonts.interBold,
262
- fontSize: 9,
278
+ fontSize: isNarrow ? 8 : 9,
263
279
  color: AppColors.white,
264
280
  }}>
265
281
  v{LIB_VERSION}
@@ -270,7 +286,7 @@ const InspectorHeader = React.memo(() => {
270
286
  <Text
271
287
  style={{
272
288
  fontFamily: AppFonts.interRegular,
273
- fontSize: 10.5,
289
+ fontSize: isNarrow ? 9.5 : 10.5,
274
290
  color: `${AppColors.white}CC`,
275
291
  }}
276
292
  numberOfLines={1}>
@@ -284,22 +300,29 @@ const InspectorHeader = React.memo(() => {
284
300
  style={{
285
301
  flexDirection: 'row',
286
302
  alignItems: 'center',
287
- gap: 8,
303
+ gap: isNarrow ? 6 : 8,
288
304
  flex: 1,
289
305
  minWidth: 0,
290
- marginRight: 6,
306
+ marginRight: 4,
291
307
  }}>
292
- <AppHeaderLogo size={46} customIcon={appIcon} />
293
- <View style={{gap: 2.5, flex: 1, minWidth: 0}}>
308
+ <AppHeaderLogo size={logoSize} customIcon={appIcon} />
309
+ <View style={{gap: 2, flex: 1, minWidth: 0}}>
294
310
  <View
295
311
  style={{
296
312
  flexDirection: 'row',
297
313
  alignItems: 'center',
298
- gap: 6,
314
+ gap: isNarrow ? 4 : 6,
299
315
  minWidth: 0,
300
316
  }}>
301
317
  <Text
302
- style={[styles.headerTitle, {flexShrink: 1}]}
318
+ style={[
319
+ styles.headerTitle,
320
+ {
321
+ fontSize: isNarrow ? 13.5 : isCompact ? 14.5 : 15.5,
322
+ flexShrink: 1,
323
+ paddingBottom: 0,
324
+ },
325
+ ]}
303
326
  numberOfLines={1}
304
327
  ellipsizeMode="tail">
305
328
  {getAppName()}
@@ -311,12 +334,19 @@ const InspectorHeader = React.memo(() => {
311
334
  backgroundColor: envConfig.bg,
312
335
  borderColor: envConfig.border,
313
336
  flexShrink: 0,
337
+ paddingHorizontal: isNarrow ? 4.5 : 6,
314
338
  paddingVertical: 1.5,
315
339
  marginBottom: 0,
316
340
  },
317
341
  ]}>
318
342
  <Text
319
- style={[styles.envBadgeText, {color: envConfig.text}]}>
343
+ style={[
344
+ styles.envBadgeText,
345
+ {
346
+ color: envConfig.text,
347
+ fontSize: isNarrow ? 8.5 : 9.5,
348
+ },
349
+ ]}>
320
350
  {envConfig.label}
321
351
  </Text>
322
352
  </View>
@@ -329,9 +359,9 @@ const InspectorHeader = React.memo(() => {
329
359
  alignItems: 'center',
330
360
  backgroundColor: '#F59E0B',
331
361
  borderRadius: 5,
332
- paddingHorizontal: 5.5,
362
+ paddingHorizontal: isNarrow ? 4 : 5.5,
333
363
  paddingVertical: 1.5,
334
- gap: 3.5,
364
+ gap: 3,
335
365
  shadowColor: '#F59E0B',
336
366
  shadowOffset: {width: 0, height: 1.5},
337
367
  shadowOpacity: 0.35,
@@ -349,16 +379,18 @@ const InspectorHeader = React.memo(() => {
349
379
  transform: [{scale: unreadPulseAnim}],
350
380
  }}
351
381
  />
352
- <Text
353
- style={{
354
- fontFamily: AppFonts.interBold,
355
- fontSize: 9,
356
- color: '#FFFFFF',
357
- letterSpacing: 0.3,
358
- }}>
359
- UPDATE
360
- </Text>
361
- <BoltIcon size={9} color="#FFFFFF" />
382
+ {!isNarrow && (
383
+ <Text
384
+ style={{
385
+ fontFamily: AppFonts.interBold,
386
+ fontSize: 8.5,
387
+ color: '#FFFFFF',
388
+ letterSpacing: 0.3,
389
+ }}>
390
+ UPDATE
391
+ </Text>
392
+ )}
393
+ <BoltIcon size={isNarrow ? 8 : 9} color="#FFFFFF" />
362
394
  </Pressable>
363
395
  )}
364
396
  </View>
@@ -368,7 +400,7 @@ const InspectorHeader = React.memo(() => {
368
400
  style={{
369
401
  flexDirection: 'row',
370
402
  alignItems: 'center',
371
- gap: 5,
403
+ gap: isNarrow ? 4 : 5,
372
404
  minWidth: 0,
373
405
  }}>
374
406
  <View
@@ -377,26 +409,28 @@ const InspectorHeader = React.memo(() => {
377
409
  alignItems: 'center',
378
410
  backgroundColor: `${AppColors.white}1F`,
379
411
  borderRadius: 5,
380
- paddingHorizontal: 6,
412
+ paddingHorizontal: isNarrow ? 4.5 : 6,
381
413
  paddingVertical: 2,
382
- gap: 4,
414
+ gap: 3.5,
383
415
  borderWidth: 1,
384
416
  borderColor: `${AppColors.white}2E`,
385
- flexShrink: 0,
417
+ flexShrink: 1,
418
+ minWidth: 0,
386
419
  }}>
387
420
  {Platform.OS === 'ios' ? (
388
- <AppleIcon color={`${AppColors.white}E6`} size={10} />
421
+ <AppleIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10} />
389
422
  ) : (
390
- <AndroidIcon color={`${AppColors.white}E6`} size={10} />
423
+ <AndroidIcon color={`${AppColors.white}E6`} size={isNarrow ? 9 : 10} />
391
424
  )}
392
425
  <Text
393
426
  style={{
394
427
  fontFamily: AppFonts.interMedium,
395
- fontSize: 9.5,
428
+ fontSize: isNarrow ? 8.5 : 9.5,
396
429
  color: `${AppColors.white}EB`,
397
430
  letterSpacing: 0.1,
398
431
  }}
399
- numberOfLines={1}>
432
+ numberOfLines={1}
433
+ ellipsizeMode="tail">
400
434
  {appVersionString}
401
435
  </Text>
402
436
  </View>
@@ -416,18 +450,18 @@ const InspectorHeader = React.memo(() => {
416
450
  alignItems: 'center',
417
451
  backgroundColor: `${AppColors.white}1F`,
418
452
  borderRadius: 5,
419
- paddingHorizontal: 6,
453
+ paddingHorizontal: isNarrow ? 4.5 : 6,
420
454
  paddingVertical: 2,
421
- gap: 4,
455
+ gap: 3.5,
422
456
  borderWidth: 1,
423
457
  borderColor: `${AppColors.white}2E`,
424
458
  flexShrink: 0,
425
459
  }}>
426
- <NpmIcon size={10} color="#FF6B6B" />
460
+ <NpmIcon size={isNarrow ? 9 : 10} color="#FF6B6B" />
427
461
  <Text
428
462
  style={{
429
463
  fontFamily: AppFonts.interMedium,
430
- fontSize: 9.5,
464
+ fontSize: isNarrow ? 8.5 : 9.5,
431
465
  color: `${AppColors.white}EB`,
432
466
  letterSpacing: 0.1,
433
467
  }}
@@ -438,7 +472,7 @@ const InspectorHeader = React.memo(() => {
438
472
  <Text
439
473
  style={{
440
474
  fontFamily: AppFonts.interBold,
441
- fontSize: 9,
475
+ fontSize: 8.5,
442
476
  color: '#F59E0B',
443
477
  }}>
444
478
  ●
@@ -452,7 +486,7 @@ const InspectorHeader = React.memo(() => {
452
486
  </View>
453
487
 
454
488
  {isDetailView && (
455
- <View style={styles.headerCenter}>
489
+ <View style={[styles.headerCenter, {paddingHorizontal: isNarrow ? 2 : 6}]}>
456
490
  {activeTab === 'apis' && selected != null ? (
457
491
  <View style={styles.headerDetailCenter}>
458
492
  <View style={styles.headerDetailRow}>
@@ -463,27 +497,38 @@ const InspectorHeader = React.memo(() => {
463
497
  backgroundColor:
464
498
  METHOD_COLORS[selected.method as Method] ??
465
499
  AppColors.grayText,
500
+ paddingHorizontal: isNarrow ? 5 : 6,
501
+ paddingVertical: isNarrow ? 2 : 3,
466
502
  },
467
503
  ]}>
468
- <Text style={styles.headerMethodText}>
504
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
469
505
  {selected.method}
470
506
  </Text>
471
507
  </View>
472
508
  <Text
473
- style={styles.headerDetailTitle}
509
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
474
510
  numberOfLines={1}
475
511
  ellipsizeMode="middle">
476
512
  {detailTitle}
477
513
  </Text>
478
514
  </View>
479
- <View style={styles.headerDetailSubRow}>
515
+ <ScrollView
516
+ horizontal
517
+ showsHorizontalScrollIndicator={false}
518
+ contentContainerStyle={{
519
+ flexDirection: 'row',
520
+ alignItems: 'center',
521
+ gap: isNarrow ? 4 : 6,
522
+ marginTop: 3,
523
+ paddingVertical: 1,
524
+ }}>
480
525
  <View
481
526
  style={{
482
527
  flexDirection: 'row',
483
528
  alignItems: 'center',
484
- gap: 5,
485
- paddingHorizontal: 8,
486
- paddingVertical: 3,
529
+ gap: 4,
530
+ paddingHorizontal: isNarrow ? 6 : 8,
531
+ paddingVertical: 2.5,
487
532
  borderRadius: 20,
488
533
  backgroundColor: `${getStatusColor(selected.status)}26`,
489
534
  borderWidth: 1,
@@ -494,13 +539,15 @@ const InspectorHeader = React.memo(() => {
494
539
  styles.headerStatusDot,
495
540
  {
496
541
  backgroundColor: getStatusColor(selected.status),
542
+ width: isNarrow ? 6 : 7,
543
+ height: isNarrow ? 6 : 7,
497
544
  },
498
545
  ]}
499
546
  />
500
547
  <Text
501
548
  style={[
502
549
  styles.headerSubTitle,
503
- {fontFamily: AppFonts.interBold},
550
+ {fontFamily: AppFonts.interBold, fontSize: isNarrow ? 10 : 11},
504
551
  ]}>
505
552
  {selected.status === 0
506
553
  ? 'Failed'
@@ -512,13 +559,13 @@ const InspectorHeader = React.memo(() => {
512
559
  flexDirection: 'row',
513
560
  alignItems: 'center',
514
561
  gap: 4,
515
- paddingHorizontal: 8,
516
- paddingVertical: 3,
562
+ paddingHorizontal: isNarrow ? 6 : 8,
563
+ paddingVertical: 2.5,
517
564
  borderRadius: 20,
518
565
  backgroundColor: `${AppColors.white}29`,
519
566
  }}>
520
- <ClockIcon color={AppColors.white} size={11} />
521
- <Text style={styles.headerSubTitle}>
567
+ <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11} />
568
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
522
569
  {selected.duration != null
523
570
  ? `${selected.duration}ms`
524
571
  : '—'}
@@ -530,18 +577,18 @@ const InspectorHeader = React.memo(() => {
530
577
  flexDirection: 'row',
531
578
  alignItems: 'center',
532
579
  gap: 4,
533
- paddingHorizontal: 8,
534
- paddingVertical: 3,
580
+ paddingHorizontal: isNarrow ? 6 : 8,
581
+ paddingVertical: 2.5,
535
582
  borderRadius: 20,
536
583
  backgroundColor: `${AppColors.white}29`,
537
584
  }}>
538
- <SizeIcon color={AppColors.white} size={11} />
539
- <Text style={styles.headerSubTitle}>
585
+ <SizeIcon color={AppColors.white} size={isNarrow ? 10 : 11} />
586
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
540
587
  {getSize(selected.response)}
541
588
  </Text>
542
589
  </View>
543
590
  )}
544
- </View>
591
+ </ScrollView>
545
592
  </View>
546
593
  ) : activeTab === 'analytics' && selectedEvent != null ? (
547
594
  <View style={styles.headerDetailCenter}>
@@ -554,20 +601,31 @@ const InspectorHeader = React.memo(() => {
554
601
  selectedEvent.source === 'firebase'
555
602
  ? `${AppColors.firebaseOrange}4D`
556
603
  : `${AppColors.purple}4D`,
604
+ paddingHorizontal: isNarrow ? 5 : 6,
605
+ paddingVertical: isNarrow ? 2 : 3,
557
606
  },
558
607
  ]}>
559
- <Text style={styles.headerMethodText}>
608
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
560
609
  {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
561
610
  </Text>
562
611
  </View>
563
612
  <Text
564
- style={styles.headerDetailTitle}
613
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
565
614
  numberOfLines={1}
566
615
  ellipsizeMode="middle">
567
616
  {selectedEvent.name}
568
617
  </Text>
569
618
  </View>
570
- <View style={styles.headerDetailSubRow}>
619
+ <ScrollView
620
+ horizontal
621
+ showsHorizontalScrollIndicator={false}
622
+ contentContainerStyle={{
623
+ flexDirection: 'row',
624
+ alignItems: 'center',
625
+ gap: isNarrow ? 4 : 6,
626
+ marginTop: 3,
627
+ paddingVertical: 1,
628
+ }}>
571
629
  <View
572
630
  style={[
573
631
  styles.headerStatusDot,
@@ -576,10 +634,12 @@ const InspectorHeader = React.memo(() => {
576
634
  selectedEvent.source === 'firebase'
577
635
  ? AppColors.firebaseOrange
578
636
  : AppColors.purple,
637
+ width: isNarrow ? 6 : 7,
638
+ height: isNarrow ? 6 : 7,
579
639
  },
580
640
  ]}
581
641
  />
582
- <Text style={styles.headerSubTitle}>
642
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
583
643
  {Object.keys(selectedEvent.params).length} param
584
644
  {Object.keys(selectedEvent.params).length !== 1
585
645
  ? 's'
@@ -587,7 +647,7 @@ const InspectorHeader = React.memo(() => {
587
647
  {' · '}
588
648
  {selectedEvent.source}
589
649
  </Text>
590
- </View>
650
+ </ScrollView>
591
651
  </View>
592
652
  ) : activeTab === 'logs' && selectedLog != null ? (
593
653
  <View style={styles.headerDetailCenter}>
@@ -602,37 +662,48 @@ const InspectorHeader = React.memo(() => {
602
662
  : selectedLog.type === 'warn'
603
663
  ? `${AppColors.lightOrange}4D`
604
664
  : `${AppColors.purple}4D`,
665
+ paddingHorizontal: isNarrow ? 5 : 6,
666
+ paddingVertical: isNarrow ? 2 : 3,
605
667
  },
606
668
  ]}>
607
- <Text style={styles.headerMethodText}>
669
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
608
670
  {selectedLog.type.toUpperCase()}
609
671
  </Text>
610
672
  </View>
611
673
  <Text
612
- style={styles.headerDetailTitle}
674
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
613
675
  numberOfLines={1}
614
676
  ellipsizeMode="middle">
615
677
  console.
616
678
  {selectedLog.sourceMethod || selectedLog.type || 'log'}
617
679
  </Text>
618
680
  </View>
619
- <View style={styles.headerDetailSubRow}>
681
+ <ScrollView
682
+ horizontal
683
+ showsHorizontalScrollIndicator={false}
684
+ contentContainerStyle={{
685
+ flexDirection: 'row',
686
+ alignItems: 'center',
687
+ gap: isNarrow ? 4 : 6,
688
+ marginTop: 3,
689
+ paddingVertical: 1,
690
+ }}>
620
691
  <View
621
692
  style={{
622
693
  flexDirection: 'row',
623
694
  alignItems: 'center',
624
695
  gap: 4,
625
- paddingHorizontal: 8,
626
- paddingVertical: 3,
696
+ paddingHorizontal: isNarrow ? 6 : 8,
697
+ paddingVertical: 2.5,
627
698
  borderRadius: 20,
628
699
  backgroundColor: `${AppColors.white}29`,
629
700
  }}>
630
- <ClockIcon color={AppColors.white} size={11} />
631
- <Text style={styles.headerSubTitle}>
701
+ <ClockIcon color={AppColors.white} size={isNarrow ? 10 : 11} />
702
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
632
703
  {formatTime(selectedLog.timestamp)}
633
704
  </Text>
634
705
  </View>
635
- </View>
706
+ </ScrollView>
636
707
  </View>
637
708
  ) : activeTab === 'redux' && selectedReduxSlice != null ? (
638
709
  (() => {
@@ -654,39 +725,54 @@ const InspectorHeader = React.memo(() => {
654
725
  styles.headerMethodBadge,
655
726
  {
656
727
  backgroundColor: `${AppColors.purple}4D`,
728
+ paddingHorizontal: isNarrow ? 5 : 6,
729
+ paddingVertical: isNarrow ? 2 : 3,
657
730
  },
658
731
  ]}>
659
- <Text style={styles.headerMethodText}>SLICE</Text>
732
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>SLICE</Text>
660
733
  </View>
661
734
  <Text
662
- style={styles.headerDetailTitle}
735
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
663
736
  numberOfLines={1}
664
737
  ellipsizeMode="middle">
665
738
  {selectedReduxSlice}
666
739
  </Text>
667
740
  </View>
668
- <View style={styles.headerDetailSubRow}>
741
+ <ScrollView
742
+ horizontal
743
+ showsHorizontalScrollIndicator={false}
744
+ contentContainerStyle={{
745
+ flexDirection: 'row',
746
+ alignItems: 'center',
747
+ gap: isNarrow ? 4 : 6,
748
+ marginTop: 3,
749
+ paddingVertical: 1,
750
+ }}>
669
751
  <View
670
752
  style={[
671
753
  styles.headerStatusDot,
672
- {backgroundColor: AppColors.liveGreen},
754
+ {
755
+ backgroundColor: AppColors.liveGreen,
756
+ width: isNarrow ? 6 : 7,
757
+ height: isNarrow ? 6 : 7,
758
+ },
673
759
  ]}
674
760
  />
675
- <Text style={styles.headerSubTitle}>Live</Text>
676
- <Text style={[styles.headerSubTitle, {opacity: 0.6}]}>
761
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>Live</Text>
762
+ <Text style={[styles.headerSubTitle, {opacity: 0.6, fontSize: isNarrow ? 10 : 11}]}>
677
763
  •
678
764
  </Text>
679
- <Text style={styles.headerSubTitle}>
765
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
680
766
  {keyCount} keys
681
767
  </Text>
682
- <Text style={[styles.headerSubTitle, {opacity: 0.6}]}>
768
+ <Text style={[styles.headerSubTitle, {opacity: 0.6, fontSize: isNarrow ? 10 : 11}]}>
683
769
  •
684
770
  </Text>
685
- <Text style={styles.headerSubTitle}>{sliceSize}</Text>
771
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>{sliceSize}</Text>
686
772
  {lastAction?.timestamp && (
687
773
  <>
688
774
  <Text
689
- style={[styles.headerSubTitle, {opacity: 0.6}]}>
775
+ style={[styles.headerSubTitle, {opacity: 0.6, fontSize: isNarrow ? 10 : 11}]}>
690
776
  •
691
777
  </Text>
692
778
  <View
@@ -695,14 +781,14 @@ const InspectorHeader = React.memo(() => {
695
781
  alignItems: 'center',
696
782
  gap: 3,
697
783
  }}>
698
- <ClockIcon color={AppColors.white} size={10} />
699
- <Text style={styles.headerSubTitle}>
784
+ <ClockIcon color={AppColors.white} size={isNarrow ? 9 : 10} />
785
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
700
786
  {lastAction.timestamp}
701
787
  </Text>
702
788
  </View>
703
789
  </>
704
790
  )}
705
- </View>
791
+ </ScrollView>
706
792
  </View>
707
793
  );
708
794
  })()
@@ -714,28 +800,43 @@ const InspectorHeader = React.memo(() => {
714
800
  styles.headerMethodBadge,
715
801
  {
716
802
  backgroundColor: `${AppColors.brandPurple}4D`,
803
+ paddingHorizontal: isNarrow ? 5 : 6,
804
+ paddingVertical: isNarrow ? 2 : 3,
717
805
  },
718
806
  ]}>
719
- <Text style={styles.headerMethodText}>ACTION</Text>
807
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>ACTION</Text>
720
808
  </View>
721
809
  <Text
722
- style={styles.headerDetailTitle}
810
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
723
811
  numberOfLines={1}
724
812
  ellipsizeMode="middle">
725
813
  {selectedReduxAction.type}
726
814
  </Text>
727
815
  </View>
728
- <View style={styles.headerDetailSubRow}>
816
+ <ScrollView
817
+ horizontal
818
+ showsHorizontalScrollIndicator={false}
819
+ contentContainerStyle={{
820
+ flexDirection: 'row',
821
+ alignItems: 'center',
822
+ gap: isNarrow ? 4 : 6,
823
+ marginTop: 3,
824
+ paddingVertical: 1,
825
+ }}>
729
826
  <View
730
827
  style={[
731
828
  styles.headerStatusDot,
732
- {backgroundColor: AppColors.purple},
829
+ {
830
+ backgroundColor: AppColors.purple,
831
+ width: isNarrow ? 6 : 7,
832
+ height: isNarrow ? 6 : 7,
833
+ },
733
834
  ]}
734
835
  />
735
- <Text style={styles.headerSubTitle}>
836
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
736
837
  {selectedReduxAction.timestamp || 'Dispatched'}
737
838
  </Text>
738
- </View>
839
+ </ScrollView>
739
840
  </View>
740
841
  ) : activeTab === 'crash' && selectedCrash != null ? (
741
842
  <View style={styles.headerDetailCenter}>
@@ -747,22 +848,33 @@ const InspectorHeader = React.memo(() => {
747
848
  backgroundColor: selectedCrash.isFatal
748
849
  ? AppColors.red600
749
850
  : AppColors.amber600,
851
+ paddingHorizontal: isNarrow ? 5 : 6,
852
+ paddingVertical: isNarrow ? 2 : 3,
750
853
  },
751
854
  ]}>
752
- <Text style={styles.headerMethodText}>
855
+ <Text style={[styles.headerMethodText, {fontSize: isNarrow ? 9 : 10}]}>
753
856
  {selectedCrash.isFatal
754
857
  ? 'FATAL'
755
858
  : selectedCrash.type.toUpperCase()}
756
859
  </Text>
757
860
  </View>
758
861
  <Text
759
- style={styles.headerDetailTitle}
862
+ style={[styles.headerDetailTitle, {fontSize: isNarrow ? 13.5 : 15}]}
760
863
  numberOfLines={1}
761
864
  ellipsizeMode="middle">
762
865
  {selectedCrash.name || selectedCrash.message}
763
866
  </Text>
764
867
  </View>
765
- <View style={styles.headerDetailSubRow}>
868
+ <ScrollView
869
+ horizontal
870
+ showsHorizontalScrollIndicator={false}
871
+ contentContainerStyle={{
872
+ flexDirection: 'row',
873
+ alignItems: 'center',
874
+ gap: isNarrow ? 4 : 6,
875
+ marginTop: 3,
876
+ paddingVertical: 1,
877
+ }}>
766
878
  <View
767
879
  style={[
768
880
  styles.headerStatusDot,
@@ -770,24 +882,26 @@ const InspectorHeader = React.memo(() => {
770
882
  backgroundColor: selectedCrash.isFatal
771
883
  ? AppColors.red600
772
884
  : AppColors.amber500,
885
+ width: isNarrow ? 6 : 7,
886
+ height: isNarrow ? 6 : 7,
773
887
  },
774
888
  ]}
775
889
  />
776
- <Text style={styles.headerSubTitle}>
890
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
777
891
  {selectedCrash.timeStr ||
778
892
  new Date(selectedCrash.timestamp).toLocaleTimeString()}
779
893
  </Text>
780
894
  {selectedCrash.deviceInfo?.platform && (
781
895
  <>
782
- <Text style={[styles.headerSubTitle, {opacity: 0.6}]}>
896
+ <Text style={[styles.headerSubTitle, {opacity: 0.6, fontSize: isNarrow ? 10 : 11}]}>
783
897
  •
784
898
  </Text>
785
- <Text style={styles.headerSubTitle}>
899
+ <Text style={[styles.headerSubTitle, {fontSize: isNarrow ? 10 : 11}]}>
786
900
  {selectedCrash.deviceInfo.platform.toUpperCase()}
787
901
  </Text>
788
902
  </>
789
903
  )}
790
- </View>
904
+ </ScrollView>
791
905
  </View>
792
906
  ) : null}
793
907
  </View>
@@ -801,7 +915,7 @@ const InspectorHeader = React.memo(() => {
801
915
  alignItems: 'center',
802
916
  justifyContent: 'flex-end',
803
917
  flexShrink: 0,
804
- gap: 8,
918
+ gap: isNarrow ? 5 : 7,
805
919
  },
806
920
  ]}>
807
921
  {isSettingsView && (
@@ -821,8 +935,15 @@ const InspectorHeader = React.memo(() => {
821
935
  );
822
936
  }}
823
937
  hitSlop={15}
824
- style={styles.closeButtonSquare}>
825
- <ResetIcon color={AppColors.white} size={14} />
938
+ style={[
939
+ styles.closeButtonSquare,
940
+ {
941
+ width: buttonSize,
942
+ height: buttonSize,
943
+ borderRadius: isNarrow ? 6 : 7,
944
+ },
945
+ ]}>
946
+ <ResetIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
826
947
  </TouchableScale>
827
948
  )}
828
949
 
@@ -843,7 +964,14 @@ const InspectorHeader = React.memo(() => {
843
964
  );
844
965
  }}
845
966
  hitSlop={15}
846
- style={styles.closeButtonSquare}>
967
+ style={[
968
+ styles.closeButtonSquare,
969
+ {
970
+ width: buttonSize,
971
+ height: buttonSize,
972
+ borderRadius: isNarrow ? 6 : 7,
973
+ },
974
+ ]}>
847
975
  <Animated.View
848
976
  style={{
849
977
  transform: [
@@ -861,7 +989,7 @@ const InspectorHeader = React.memo(() => {
861
989
  },
862
990
  ],
863
991
  }}>
864
- <TrashIcon color={AppColors.white} size={14} />
992
+ <TrashIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
865
993
  </Animated.View>
866
994
  </TouchableScale>
867
995
  )}
@@ -870,16 +998,30 @@ const InspectorHeader = React.memo(() => {
870
998
  <TouchableScale
871
999
  onPress={() => setSettingsPage('main')}
872
1000
  hitSlop={15}
873
- style={styles.closeButtonSquare}>
874
- <SettingsIcon color={AppColors.white} size={14} />
1001
+ style={[
1002
+ styles.closeButtonSquare,
1003
+ {
1004
+ width: buttonSize,
1005
+ height: buttonSize,
1006
+ borderRadius: isNarrow ? 6 : 7,
1007
+ },
1008
+ ]}>
1009
+ <SettingsIcon color={AppColors.white} size={isNarrow ? 12 : 14} />
875
1010
  </TouchableScale>
876
1011
  )}
877
1012
 
878
1013
  <TouchableScale
879
1014
  onPress={closeModal}
880
1015
  hitSlop={15}
881
- style={styles.closeButtonSquare}>
882
- <CloseWhite size={14} />
1016
+ style={[
1017
+ styles.closeButtonSquare,
1018
+ {
1019
+ width: buttonSize,
1020
+ height: buttonSize,
1021
+ borderRadius: isNarrow ? 6 : 7,
1022
+ },
1023
+ ]}>
1024
+ <CloseWhite size={isNarrow ? 12 : 14} />
883
1025
  </TouchableScale>
884
1026
  </View>
885
1027
  </View>