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/esm/components/Inspector/NetworkDetail.js CHANGED
@@ -87,14 +87,23 @@ const NetworkDetail = React.memo(() => {
87
87
  }
88
88
  catch (e) { }
89
89
  return (<>
90
- <View style={styles.detailInfoTop}>
91
- <View style={{
90
+
91
+ <View style={{
92
92
  flexDirection: 'row',
93
93
  alignItems: 'center',
94
+ justifyContent: 'space-between',
95
+ flexWrap: 'wrap',
94
96
  gap: 6,
97
+ paddingBottom: 8,
98
+ borderBottomWidth: 1,
99
+ borderBottomColor: AppColors.dividerColor,
100
+ }}>
101
+ <View style={{
102
+ flexDirection: 'row',
103
+ alignItems: 'center',
104
+ gap: 5,
95
105
  flexWrap: 'wrap',
96
106
  flex: 1,
97
- minWidth: 0,
98
107
  }}>
99
108
 
100
109
  <View style={[
@@ -102,8 +111,8 @@ const NetworkDetail = React.memo(() => {
102
111
  {
103
112
  backgroundColor: METHOD_COLORS[selected.method] ?? METHOD_COLORS.ALL,
104
113
  paddingHorizontal: 8,
105
- paddingVertical: 4,
106
- borderRadius: 7,
114
+ paddingVertical: 3.5,
115
+ borderRadius: 6,
107
116
  },
108
117
  ]}>
109
118
  <Text style={[
@@ -111,6 +120,7 @@ const NetworkDetail = React.memo(() => {
111
120
  {
112
121
  color: AppColors.white,
113
122
  fontSize: 10.5,
123
+ fontFamily: AppFonts.interBold,
114
124
  },
115
125
  ]}>
116
126
  {selected.method}
@@ -169,8 +179,8 @@ const NetworkDetail = React.memo(() => {
169
179
  ? `${AppColors.errorColor}40`
170
180
  : `${getStatusColor(selected.status)}40`,
171
181
  paddingHorizontal: 7,
172
- paddingVertical: 3.5,
173
- borderRadius: 7,
182
+ paddingVertical: 3,
183
+ borderRadius: 6,
174
184
  },
175
185
  ]}>
176
186
  {selected.status === 0 ? (<FailIcon size={8} color={AppColors.errorColor}/>) : (<View style={{
@@ -202,8 +212,8 @@ const NetworkDetail = React.memo(() => {
202
212
  backgroundColor: `${AppColors.brandPurple}14`,
203
213
  borderColor: `${AppColors.brandPurple}30`,
204
214
  paddingHorizontal: 7,
205
- paddingVertical: 3.5,
206
- borderRadius: 7,
215
+ paddingVertical: 3,
216
+ borderRadius: 6,
207
217
  gap: 4,
208
218
  },
209
219
  ]}>
@@ -227,8 +237,8 @@ const NetworkDetail = React.memo(() => {
227
237
  backgroundColor: `${AppColors.sky600}14`,
228
238
  borderColor: `${AppColors.sky600}30`,
229
239
  paddingHorizontal: 7,
230
- paddingVertical: 3.5,
231
- borderRadius: 7,
240
+ paddingVertical: 3,
241
+ borderRadius: 6,
232
242
  gap: 4,
233
243
  },
234
244
  ]}>
@@ -245,33 +255,27 @@ const NetworkDetail = React.memo(() => {
245
255
  </Text>
246
256
  </View>)}
247
257
  </View>
248
-
249
- <View style={styles.detailInfoRight}>
250
- <TouchableScale style={[styles.iconSquareBtn, { backgroundColor: `${AppColors.sky600}15` }]} onPress={handleOpenUrl} hitSlop={12}>
251
- <ExternalLinkIcon color={AppColors.sky600} size={14}/>
252
- </TouchableScale>
253
- <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
254
- <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
255
- <CopyButton value={detailDisplayUrl} label="URL"/>
256
- </View>
257
258
  </View>
258
259
 
259
260
 
260
- <Pressable style={{
261
+ <View style={{
261
262
  backgroundColor: AppColors.grayBackground,
262
263
  borderRadius: 10,
263
264
  borderWidth: 1,
264
265
  borderColor: AppColors.dividerColor,
265
266
  padding: 10,
266
267
  marginTop: 8,
267
- gap: 6,
268
- }} onPress={handleOpenUrl}>
268
+ gap: 8,
269
+ }}>
270
+
269
271
  <View style={{
270
272
  flexDirection: 'row',
271
273
  alignItems: 'center',
272
274
  justifyContent: 'space-between',
275
+ flexWrap: 'nowrap',
276
+ gap: 6,
273
277
  }}>
274
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
278
+ <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexShrink: 1, minWidth: 0 }}>
275
279
  {schemeStr ? (<View style={{
276
280
  backgroundColor: schemeStr.startsWith('https')
277
281
  ? `${AppColors.green600}18`
@@ -297,59 +301,41 @@ const NetworkDetail = React.memo(() => {
297
301
  color: AppColors.grayTextWeak,
298
302
  letterSpacing: 0.4,
299
303
  textTransform: 'uppercase',
300
- }}>
304
+ }} numberOfLines={1}>
301
305
  ENDPOINT URL
302
306
  </Text>
303
307
  </View>
304
308
 
305
- <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
306
- {queryStr ? (<View style={{
307
- backgroundColor: `${AppColors.purple}14`,
308
- paddingHorizontal: 6,
309
- paddingVertical: 2,
310
- borderRadius: 4,
311
- }}>
312
- <Text style={{
313
- fontFamily: AppFonts.interBold,
314
- fontSize: 8.5,
315
- color: AppColors.purple,
316
- }}>
317
- {t('network.queryParams')}
318
- </Text>
319
- </View>) : null}
320
-
321
- <View style={{
322
- flexDirection: 'row',
323
- alignItems: 'center',
324
- gap: 3,
325
- backgroundColor: `${AppColors.sky600}14`,
326
- paddingHorizontal: 6,
327
- paddingVertical: 2,
328
- borderRadius: 4,
329
- }}>
330
- <ExternalLinkIcon color={AppColors.sky600} size={10}/>
331
- <Text style={{
332
- fontFamily: AppFonts.interBold,
333
- fontSize: 9,
334
- color: AppColors.sky600,
335
- }}>
336
- Open
337
- </Text>
338
- </View>
309
+
310
+ <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flexShrink: 0 }}>
311
+ <CopyButton value={getCurlCommand(selected)} label="cURL" iconType="terminal"/>
312
+ <CopyButton value={getFetchCommand(selected)} label="fetch()" iconType="fetch"/>
313
+ <CopyButton value={detailDisplayUrl} label="URL" iconType="copy"/>
314
+ <TouchableScale style={[
315
+ styles.iconSquareBtn,
316
+ {
317
+ backgroundColor: `${AppColors.sky600}15`,
318
+ borderColor: `${AppColors.sky600}35`,
319
+ },
320
+ ]} onPress={handleOpenUrl} hitSlop={10} accessibilityLabel="Open in Browser">
321
+ <ExternalLinkIcon color={AppColors.sky600} size={13}/>
322
+ </TouchableScale>
339
323
  </View>
340
324
  </View>
341
325
 
342
326
 
343
- <Text selectable={true} style={{
327
+ <Pressable onPress={handleOpenUrl}>
328
+ <Text selectable={true} style={{
344
329
  fontFamily: AppFonts.interMedium,
345
330
  fontSize: 12.5,
346
331
  color: AppColors.skyBlue,
347
332
  textDecorationLine: 'underline',
348
333
  lineHeight: 18,
349
334
  }}>
350
- {detailDisplayUrl}
351
- </Text>
352
- </Pressable>
335
+ {detailDisplayUrl}
336
+ </Text>
337
+ </Pressable>
338
+ </View>
353
339
  </>);
354
340
  })()}
355
341
  </View>