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/dist/commonjs/components/Inspector/NetworkDetail.js CHANGED
@@ -92,14 +92,23 @@ const NetworkDetail = react_1.default.memo(() => {
92
92
  }
93
93
  catch (e) { }
94
94
  return (<>
95
- <react_native_1.View style={styles_1.default.detailInfoTop}>
96
- <react_native_1.View style={{
95
+
96
+ <react_native_1.View style={{
97
97
  flexDirection: 'row',
98
98
  alignItems: 'center',
99
+ justifyContent: 'space-between',
100
+ flexWrap: 'wrap',
99
101
  gap: 6,
102
+ paddingBottom: 8,
103
+ borderBottomWidth: 1,
104
+ borderBottomColor: AppColors_1.AppColors.dividerColor,
105
+ }}>
106
+ <react_native_1.View style={{
107
+ flexDirection: 'row',
108
+ alignItems: 'center',
109
+ gap: 5,
100
110
  flexWrap: 'wrap',
101
111
  flex: 1,
102
- minWidth: 0,
103
112
  }}>
104
113
 
105
114
  <react_native_1.View style={[
@@ -107,8 +116,8 @@ const NetworkDetail = react_1.default.memo(() => {
107
116
  {
108
117
  backgroundColor: constants_1.METHOD_COLORS[selected.method] ?? constants_1.METHOD_COLORS.ALL,
109
118
  paddingHorizontal: 8,
110
- paddingVertical: 4,
111
- borderRadius: 7,
119
+ paddingVertical: 3.5,
120
+ borderRadius: 6,
112
121
  },
113
122
  ]}>
114
123
  <react_native_1.Text style={[
@@ -116,6 +125,7 @@ const NetworkDetail = react_1.default.memo(() => {
116
125
  {
117
126
  color: AppColors_1.AppColors.white,
118
127
  fontSize: 10.5,
128
+ fontFamily: AppFonts_1.AppFonts.interBold,
119
129
  },
120
130
  ]}>
121
131
  {selected.method}
@@ -174,8 +184,8 @@ const NetworkDetail = react_1.default.memo(() => {
174
184
  ? `${AppColors_1.AppColors.errorColor}40`
175
185
  : `${(0, helpers_1.getStatusColor)(selected.status)}40`,
176
186
  paddingHorizontal: 7,
177
- paddingVertical: 3.5,
178
- borderRadius: 7,
187
+ paddingVertical: 3,
188
+ borderRadius: 6,
179
189
  },
180
190
  ]}>
181
191
  {selected.status === 0 ? (<NetworkIcons_1.FailIcon size={8} color={AppColors_1.AppColors.errorColor}/>) : (<react_native_1.View style={{
@@ -207,8 +217,8 @@ const NetworkDetail = react_1.default.memo(() => {
207
217
  backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
208
218
  borderColor: `${AppColors_1.AppColors.brandPurple}30`,
209
219
  paddingHorizontal: 7,
210
- paddingVertical: 3.5,
211
- borderRadius: 7,
220
+ paddingVertical: 3,
221
+ borderRadius: 6,
212
222
  gap: 4,
213
223
  },
214
224
  ]}>
@@ -232,8 +242,8 @@ const NetworkDetail = react_1.default.memo(() => {
232
242
  backgroundColor: `${AppColors_1.AppColors.sky600}14`,
233
243
  borderColor: `${AppColors_1.AppColors.sky600}30`,
234
244
  paddingHorizontal: 7,
235
- paddingVertical: 3.5,
236
- borderRadius: 7,
245
+ paddingVertical: 3,
246
+ borderRadius: 6,
237
247
  gap: 4,
238
248
  },
239
249
  ]}>
@@ -250,33 +260,27 @@ const NetworkDetail = react_1.default.memo(() => {
250
260
  </react_native_1.Text>
251
261
  </react_native_1.View>)}
252
262
  </react_native_1.View>
253
-
254
- <react_native_1.View style={styles_1.default.detailInfoRight}>
255
- <TouchableScale_1.default style={[styles_1.default.iconSquareBtn, { backgroundColor: `${AppColors_1.AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
256
- <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={14}/>
257
- </TouchableScale_1.default>
258
- <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
259
- <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
260
- <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
261
- </react_native_1.View>
262
263
  </react_native_1.View>
263
264
 
264
265
 
265
- <react_native_1.Pressable style={{
266
+ <react_native_1.View style={{
266
267
  backgroundColor: AppColors_1.AppColors.grayBackground,
267
268
  borderRadius: 10,
268
269
  borderWidth: 1,
269
270
  borderColor: AppColors_1.AppColors.dividerColor,
270
271
  padding: 10,
271
272
  marginTop: 8,
272
- gap: 6,
273
- }} onPress={handleOpenUrl}>
273
+ gap: 8,
274
+ }}>
275
+
274
276
  <react_native_1.View style={{
275
277
  flexDirection: 'row',
276
278
  alignItems: 'center',
277
279
  justifyContent: 'space-between',
280
+ flexWrap: 'nowrap',
281
+ gap: 6,
278
282
  }}>
279
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
283
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0 }}>
280
284
  {schemeStr ? (<react_native_1.View style={{
281
285
  backgroundColor: schemeStr.startsWith('https')
282
286
  ? `${AppColors_1.AppColors.green600}18`
@@ -302,59 +306,41 @@ const NetworkDetail = react_1.default.memo(() => {
302
306
  color: AppColors_1.AppColors.grayTextWeak,
303
307
  letterSpacing: 0.4,
304
308
  textTransform: 'uppercase',
305
- }}>
309
+ }} numberOfLines={1}>
306
310
  ENDPOINT URL
307
311
  </react_native_1.Text>
308
312
  </react_native_1.View>
309
313
 
310
- <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
311
- {queryStr ? (<react_native_1.View style={{
312
- backgroundColor: `${AppColors_1.AppColors.purple}14`,
313
- paddingHorizontal: 6,
314
- paddingVertical: 2,
315
- borderRadius: 4,
316
- }}>
317
- <react_native_1.Text style={{
318
- fontFamily: AppFonts_1.AppFonts.interBold,
319
- fontSize: 8.5,
320
- color: AppColors_1.AppColors.purple,
321
- }}>
322
- {t('network.queryParams')}
323
- </react_native_1.Text>
324
- </react_native_1.View>) : null}
325
-
326
- <react_native_1.View style={{
327
- flexDirection: 'row',
328
- alignItems: 'center',
329
- gap: 3,
330
- backgroundColor: `${AppColors_1.AppColors.sky600}14`,
331
- paddingHorizontal: 6,
332
- paddingVertical: 2,
333
- borderRadius: 4,
334
- }}>
335
- <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={10}/>
336
- <react_native_1.Text style={{
337
- fontFamily: AppFonts_1.AppFonts.interBold,
338
- fontSize: 9,
339
- color: AppColors_1.AppColors.sky600,
340
- }}>
341
- Open
342
- </react_native_1.Text>
343
- </react_native_1.View>
314
+
315
+ <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flexShrink: 0 }}>
316
+ <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
317
+ <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
318
+ <CopyButton_1.default value={detailDisplayUrl} label="URL" iconType="copy"/>
319
+ <TouchableScale_1.default style={[
320
+ styles_1.default.iconSquareBtn,
321
+ {
322
+ backgroundColor: `${AppColors_1.AppColors.sky600}15`,
323
+ borderColor: `${AppColors_1.AppColors.sky600}35`,
324
+ },
325
+ ]} onPress={handleOpenUrl} hitSlop={10} accessibilityLabel="Open in Browser">
326
+ <NetworkIcons_1.ExternalLinkIcon color={AppColors_1.AppColors.sky600} size={13}/>
327
+ </TouchableScale_1.default>
344
328
  </react_native_1.View>
345
329
  </react_native_1.View>
346
330
 
347
331
 
348
- <react_native_1.Text selectable={true} style={{
332
+ <react_native_1.Pressable onPress={handleOpenUrl}>
333
+ <react_native_1.Text selectable={true} style={{
349
334
  fontFamily: AppFonts_1.AppFonts.interMedium,
350
335
  fontSize: 12.5,
351
336
  color: AppColors_1.AppColors.skyBlue,
352
337
  textDecorationLine: 'underline',
353
338
  lineHeight: 18,
354
339
  }}>
355
- {detailDisplayUrl}
356
- </react_native_1.Text>
357
- </react_native_1.Pressable>
340
+ {detailDisplayUrl}
341
+ </react_native_1.Text>
342
+ </react_native_1.Pressable>
343
+ </react_native_1.View>
358
344
  </>);
359
345
  })()}
360
346
  </react_native_1.View>