react-native-inapp-inspector 2.3.18 → 2.3.19

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 (79) hide show
  1. package/android/src/main/java/com/inappinspector/NetworkInspectorModule.kt +47 -0
  2. package/dist/commonjs/capture.d.ts +2 -0
  3. package/dist/commonjs/capture.js +3 -0
  4. package/dist/commonjs/components/EmptyState.d.ts +1 -0
  5. package/dist/commonjs/components/EmptyState.js +2 -2
  6. package/dist/commonjs/components/Inspector/FabLauncher.js +494 -39
  7. package/dist/commonjs/components/Inspector/InspectorHeader.js +45 -26
  8. package/dist/commonjs/components/Inspector/MainScreen.js +4 -3
  9. package/dist/commonjs/components/Inspector/MediaGalleryTab.js +418 -13
  10. package/dist/commonjs/components/Inspector/MediaPreviewModal.js +376 -88
  11. package/dist/commonjs/components/Inspector/NetworkDetail.js +49 -63
  12. package/dist/commonjs/components/Inspector/SettingsPanel.js +499 -119
  13. package/dist/commonjs/components/Inspector/TabBar.js +166 -4
  14. package/dist/commonjs/components/JsonViewer.js +4 -3
  15. package/dist/commonjs/components/NetworkIcons.d.ts +4 -0
  16. package/dist/commonjs/components/NetworkIcons.js +26 -1
  17. package/dist/commonjs/components/SegmentedTabs.js +1 -0
  18. package/dist/commonjs/constants/version.d.ts +1 -1
  19. package/dist/commonjs/constants/version.js +1 -1
  20. package/dist/commonjs/i18n/locales/en.json +20 -2
  21. package/dist/commonjs/index.js +45 -30
  22. package/dist/commonjs/native/NativeInspector.d.ts +3 -0
  23. package/dist/commonjs/native/NativeInspector.js +14 -1
  24. package/dist/commonjs/native/NativeNetworkInspector.d.ts +1 -0
  25. package/dist/commonjs/styles/AppColors.js +78 -78
  26. package/dist/commonjs/types/enums.d.ts +2 -0
  27. package/dist/commonjs/types/enums.js +2 -0
  28. package/dist/commonjs/types/interfaces.d.ts +5 -0
  29. package/dist/esm/capture.d.ts +2 -0
  30. package/dist/esm/capture.js +4 -1
  31. package/dist/esm/components/EmptyState.d.ts +1 -0
  32. package/dist/esm/components/EmptyState.js +2 -2
  33. package/dist/esm/components/Inspector/FabLauncher.js +462 -40
  34. package/dist/esm/components/Inspector/InspectorHeader.js +46 -27
  35. package/dist/esm/components/Inspector/MainScreen.js +4 -3
  36. package/dist/esm/components/Inspector/MediaGalleryTab.js +419 -14
  37. package/dist/esm/components/Inspector/MediaPreviewModal.js +379 -91
  38. package/dist/esm/components/Inspector/NetworkDetail.js +49 -63
  39. package/dist/esm/components/Inspector/SettingsPanel.js +500 -120
  40. package/dist/esm/components/Inspector/TabBar.js +135 -6
  41. package/dist/esm/components/JsonViewer.js +4 -3
  42. package/dist/esm/components/NetworkIcons.d.ts +4 -0
  43. package/dist/esm/components/NetworkIcons.js +21 -0
  44. package/dist/esm/components/SegmentedTabs.js +1 -0
  45. package/dist/esm/constants/version.d.ts +1 -1
  46. package/dist/esm/constants/version.js +1 -1
  47. package/dist/esm/i18n/locales/en.json +20 -2
  48. package/dist/esm/index.js +44 -29
  49. package/dist/esm/native/NativeInspector.d.ts +3 -0
  50. package/dist/esm/native/NativeInspector.js +12 -0
  51. package/dist/esm/native/NativeNetworkInspector.d.ts +1 -0
  52. package/dist/esm/styles/AppColors.js +78 -78
  53. package/dist/esm/types/enums.d.ts +2 -0
  54. package/dist/esm/types/enums.js +2 -0
  55. package/dist/esm/types/interfaces.d.ts +5 -0
  56. package/ios/NetworkInspectorModule.mm +241 -136
  57. package/package.json +1 -1
  58. package/react-native-inapp-inspector.podspec +1 -1
  59. package/src/capture.ts +8 -0
  60. package/src/components/EmptyState.tsx +3 -1
  61. package/src/components/Inspector/FabLauncher.tsx +562 -52
  62. package/src/components/Inspector/InspectorHeader.tsx +60 -22
  63. package/src/components/Inspector/MainScreen.tsx +3 -2
  64. package/src/components/Inspector/MediaGalleryTab.tsx +502 -28
  65. package/src/components/Inspector/MediaPreviewModal.tsx +465 -117
  66. package/src/components/Inspector/NetworkDetail.tsx +80 -97
  67. package/src/components/Inspector/SettingsPanel.tsx +708 -152
  68. package/src/components/Inspector/TabBar.tsx +174 -6
  69. package/src/components/JsonViewer.tsx +4 -2
  70. package/src/components/NetworkIcons.tsx +56 -0
  71. package/src/components/SegmentedTabs.tsx +1 -0
  72. package/src/constants/version.ts +1 -1
  73. package/src/i18n/locales/en.json +20 -4
  74. package/src/index.tsx +46 -31
  75. package/src/native/NativeInspector.ts +17 -0
  76. package/src/native/NativeNetworkInspector.ts +1 -0
  77. package/src/styles/AppColors.ts +80 -80
  78. package/src/types/enums.ts +2 -0
  79. package/src/types/interfaces.ts +5 -0
package/src/components/Inspector/NetworkDetail.tsx CHANGED
@@ -151,17 +151,27 @@ const NetworkDetail = React.memo(() => {
151
151
 
152
152
  return (
153
153
  <>
154
- <View style={styles.detailInfoTop}>
154
+ {/* Status & Metrics Badges Row */}
155
+ <View
156
+ style={{
157
+ flexDirection: 'row',
158
+ alignItems: 'center',
159
+ justifyContent: 'space-between',
160
+ flexWrap: 'wrap',
161
+ gap: 6,
162
+ paddingBottom: 8,
163
+ borderBottomWidth: 1,
164
+ borderBottomColor: AppColors.dividerColor,
165
+ }}>
155
166
  <View
156
167
  style={{
157
168
  flexDirection: 'row',
158
169
  alignItems: 'center',
159
- gap: 6,
170
+ gap: 5,
160
171
  flexWrap: 'wrap',
161
172
  flex: 1,
162
- minWidth: 0,
163
173
  }}>
164
- {/* Method Chip */}
174
+ {/* Method Badge */}
165
175
  <View
166
176
  style={[
167
177
  styles.methodBadge,
@@ -171,8 +181,8 @@ const NetworkDetail = React.memo(() => {
171
181
  selected.method as Method
172
182
  ] ?? METHOD_COLORS.ALL,
173
183
  paddingHorizontal: 8,
174
- paddingVertical: 4,
175
- borderRadius: 7,
184
+ paddingVertical: 3.5,
185
+ borderRadius: 6,
176
186
  },
177
187
  ]}>
178
188
  <Text
@@ -181,6 +191,7 @@ const NetworkDetail = React.memo(() => {
181
191
  {
182
192
  color: AppColors.white,
183
193
  fontSize: 10.5,
194
+ fontFamily: AppFonts.interBold,
184
195
  },
185
196
  ]}>
186
197
  {selected.method}
@@ -254,8 +265,8 @@ const NetworkDetail = React.memo(() => {
254
265
  selected.status,
255
266
  )}40`,
256
267
  paddingHorizontal: 7,
257
- paddingVertical: 3.5,
258
- borderRadius: 7,
268
+ paddingVertical: 3,
269
+ borderRadius: 6,
259
270
  },
260
271
  ]}>
261
272
  {selected.status === 0 ? (
@@ -305,8 +316,8 @@ const NetworkDetail = React.memo(() => {
305
316
  backgroundColor: `${AppColors.brandPurple}14`,
306
317
  borderColor: `${AppColors.brandPurple}30`,
307
318
  paddingHorizontal: 7,
308
- paddingVertical: 3.5,
309
- borderRadius: 7,
319
+ paddingVertical: 3,
320
+ borderRadius: 6,
310
321
  gap: 4,
311
322
  },
312
323
  ]}>
@@ -334,8 +345,8 @@ const NetworkDetail = React.memo(() => {
334
345
  backgroundColor: `${AppColors.sky600}14`,
335
346
  borderColor: `${AppColors.sky600}30`,
336
347
  paddingHorizontal: 7,
337
- paddingVertical: 3.5,
338
- borderRadius: 7,
348
+ paddingVertical: 3,
349
+ borderRadius: 6,
339
350
  gap: 4,
340
351
  },
341
352
  ]}>
@@ -354,36 +365,10 @@ const NetworkDetail = React.memo(() => {
354
365
  </View>
355
366
  )}
356
367
  </View>
357
-
358
- <View style={styles.detailInfoRight}>
359
- <TouchableScale
360
- style={[styles.iconSquareBtn, {backgroundColor: `${AppColors.sky600}15`}]}
361
- onPress={handleOpenUrl}
362
- hitSlop={12}>
363
- <ExternalLinkIcon
364
- color={AppColors.sky600}
365
- size={14}
366
- />
367
- </TouchableScale>
368
- <CopyButton
369
- value={getFetchCommand(selected)}
370
- label="fetch()"
371
- iconType="fetch"
372
- />
373
- <CopyButton
374
- value={getCurlCommand(selected)}
375
- label="cURL"
376
- iconType="terminal"
377
- />
378
- <CopyButton
379
- value={detailDisplayUrl}
380
- label="URL"
381
- />
382
- </View>
383
368
  </View>
384
369
 
385
- {/* Full Live URL Analysis Card */}
386
- <Pressable
370
+ {/* Full Live URL & Quick Actions Card */}
371
+ <View
387
372
  style={{
388
373
  backgroundColor: AppColors.grayBackground,
389
374
  borderRadius: 10,
@@ -391,16 +376,18 @@ const NetworkDetail = React.memo(() => {
391
376
  borderColor: AppColors.dividerColor,
392
377
  padding: 10,
393
378
  marginTop: 8,
394
- gap: 6,
395
- }}
396
- onPress={handleOpenUrl}>
379
+ gap: 8,
380
+ }}>
381
+ {/* Endpoint Header Bar with Action Buttons */}
397
382
  <View
398
383
  style={{
399
384
  flexDirection: 'row',
400
385
  alignItems: 'center',
401
386
  justifyContent: 'space-between',
387
+ flexWrap: 'nowrap',
388
+ gap: 6,
402
389
  }}>
403
- <View style={{flexDirection: 'row', alignItems: 'center', gap: 6}}>
390
+ <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0}}>
404
391
  {schemeStr ? (
405
392
  <View
406
393
  style={{
@@ -431,67 +418,63 @@ const NetworkDetail = React.memo(() => {
431
418
  color: AppColors.grayTextWeak,
432
419
  letterSpacing: 0.4,
433
420
  textTransform: 'uppercase',
434
- }}>
421
+ }}
422
+ numberOfLines={1}>
435
423
  ENDPOINT URL
436
424
  </Text>
437
425
  </View>
438
426
 
439
- <View style={{flexDirection: 'row', alignItems: 'center', gap: 4}}>
440
- {queryStr ? (
441
- <View
442
- style={{
443
- backgroundColor: `${AppColors.purple}14`,
444
- paddingHorizontal: 6,
445
- paddingVertical: 2,
446
- borderRadius: 4,
447
- }}>
448
- <Text
449
- style={{
450
- fontFamily: AppFonts.interBold,
451
- fontSize: 8.5,
452
- color: AppColors.purple,
453
- }}>
454
- {t('network.queryParams')}
455
- </Text>
456
- </View>
457
- ) : null}
458
-
459
- <View
460
- style={{
461
- flexDirection: 'row',
462
- alignItems: 'center',
463
- gap: 3,
464
- backgroundColor: `${AppColors.sky600}14`,
465
- paddingHorizontal: 6,
466
- paddingVertical: 2,
467
- borderRadius: 4,
468
- }}>
469
- <ExternalLinkIcon color={AppColors.sky600} size={10} />
470
- <Text
471
- style={{
472
- fontFamily: AppFonts.interBold,
473
- fontSize: 9,
474
- color: AppColors.sky600,
475
- }}>
476
- Open
477
- </Text>
478
- </View>
427
+ {/* Action Buttons: cURL, fetch, Copy URL, Open */}
428
+ <View style={{flexDirection: 'row', alignItems: 'center', gap: 5, flexShrink: 0}}>
429
+ <CopyButton
430
+ value={getCurlCommand(selected)}
431
+ label="cURL"
432
+ iconType="terminal"
433
+ />
434
+ <CopyButton
435
+ value={getFetchCommand(selected)}
436
+ label="fetch()"
437
+ iconType="fetch"
438
+ />
439
+ <CopyButton
440
+ value={detailDisplayUrl}
441
+ label="URL"
442
+ iconType="copy"
443
+ />
444
+ <TouchableScale
445
+ style={[
446
+ styles.iconSquareBtn,
447
+ {
448
+ backgroundColor: `${AppColors.sky600}15`,
449
+ borderColor: `${AppColors.sky600}35`,
450
+ },
451
+ ]}
452
+ onPress={handleOpenUrl}
453
+ hitSlop={10}
454
+ accessibilityLabel="Open in Browser">
455
+ <ExternalLinkIcon
456
+ color={AppColors.sky600}
457
+ size={13}
458
+ />
459
+ </TouchableScale>
479
460
  </View>
480
461
  </View>
481
462
 
482
463
  {/* Full Clickable Hyperlink */}
483
- <Text
484
- selectable={true}
485
- style={{
486
- fontFamily: AppFonts.interMedium,
487
- fontSize: 12.5,
488
- color: AppColors.skyBlue,
489
- textDecorationLine: 'underline',
490
- lineHeight: 18,
491
- }}>
492
- {detailDisplayUrl}
493
- </Text>
494
- </Pressable>
464
+ <Pressable onPress={handleOpenUrl}>
465
+ <Text
466
+ selectable={true}
467
+ style={{
468
+ fontFamily: AppFonts.interMedium,
469
+ fontSize: 12.5,
470
+ color: AppColors.skyBlue,
471
+ textDecorationLine: 'underline',
472
+ lineHeight: 18,
473
+ }}>
474
+ {detailDisplayUrl}
475
+ </Text>
476
+ </Pressable>
477
+ </View>
495
478
  </>
496
479
  );
497
480
  })()}