react-native-inapp-inspector 1.1.1 → 1.1.3

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 (45) hide show
  1. package/README.md +14 -0
  2. package/dist/commonjs/components/ConsoleLogCard.js +18 -0
  3. package/dist/commonjs/components/JsonViewer.d.ts +2 -1
  4. package/dist/commonjs/components/JsonViewer.js +6 -4
  5. package/dist/commonjs/components/LogCard.js +17 -0
  6. package/dist/commonjs/components/MetaAccordion.js +26 -6
  7. package/dist/commonjs/components/NetworkIcons.d.ts +9 -2
  8. package/dist/commonjs/components/NetworkIcons.js +59 -3
  9. package/dist/commonjs/components/ReduxTreeView.js +80 -5
  10. package/dist/commonjs/constants/version.d.ts +1 -1
  11. package/dist/commonjs/constants/version.js +1 -1
  12. package/dist/commonjs/customHooks/reduxLogger.d.ts +21 -7
  13. package/dist/commonjs/customHooks/reduxLogger.js +147 -48
  14. package/dist/commonjs/customHooks/webViewLogger.js +13 -8
  15. package/dist/commonjs/helpers/settingsStore.d.ts +24 -0
  16. package/dist/commonjs/helpers/settingsStore.js +74 -0
  17. package/dist/commonjs/index.d.ts +1 -1
  18. package/dist/commonjs/index.js +897 -170
  19. package/dist/commonjs/styles/index.d.ts +40 -0
  20. package/dist/commonjs/styles/index.js +45 -2
  21. package/dist/commonjs/types/index.d.ts +4 -0
  22. package/dist/esm/components/ConsoleLogCard.js +18 -0
  23. package/dist/esm/components/JsonViewer.d.ts +2 -1
  24. package/dist/esm/components/JsonViewer.js +6 -4
  25. package/dist/esm/components/LogCard.js +17 -0
  26. package/dist/esm/components/MetaAccordion.js +27 -7
  27. package/dist/esm/components/NetworkIcons.d.ts +9 -2
  28. package/dist/esm/components/NetworkIcons.js +51 -2
  29. package/dist/esm/components/ReduxTreeView.js +81 -6
  30. package/dist/esm/constants/version.d.ts +1 -1
  31. package/dist/esm/constants/version.js +1 -1
  32. package/dist/esm/customHooks/reduxLogger.d.ts +21 -7
  33. package/dist/esm/customHooks/reduxLogger.js +145 -47
  34. package/dist/esm/customHooks/webViewLogger.js +13 -8
  35. package/dist/esm/helpers/settingsStore.d.ts +24 -0
  36. package/dist/esm/helpers/settingsStore.js +67 -0
  37. package/dist/esm/index.d.ts +1 -1
  38. package/dist/esm/index.js +896 -172
  39. package/dist/esm/styles/index.d.ts +40 -0
  40. package/dist/esm/styles/index.js +45 -2
  41. package/dist/esm/types/index.d.ts +4 -0
  42. package/example/App.tsx +199 -61
  43. package/example/ios/example.xcodeproj/project.pbxproj +0 -8
  44. package/example/package-lock.json +4 -3
  45. package/package.json +1 -1
@@ -35,6 +35,7 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
35
35
  color: string;
36
36
  fontSize: number;
37
37
  letterSpacing: number;
38
+ paddingBottom: number;
38
39
  };
39
40
  headerButtonGroup: {
40
41
  flexDirection: string;
@@ -174,6 +175,26 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
174
175
  listContent: {
175
176
  paddingBottom: number;
176
177
  };
178
+ scrollTopBtn: {
179
+ position: string;
180
+ bottom: number;
181
+ right: number;
182
+ width: number;
183
+ height: number;
184
+ borderRadius: number;
185
+ backgroundColor: string;
186
+ alignItems: string;
187
+ justifyContent: string;
188
+ shadowColor: string;
189
+ shadowOffset: {
190
+ width: number;
191
+ height: number;
192
+ };
193
+ shadowOpacity: number;
194
+ shadowRadius: number;
195
+ elevation: number;
196
+ zIndex: number;
197
+ };
177
198
  detailScroll: {
178
199
  flex: number;
179
200
  };
@@ -215,6 +236,22 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
215
236
  borderRadius: number;
216
237
  backgroundColor: string;
217
238
  };
239
+ fabShineClip: {
240
+ position: string;
241
+ width: number;
242
+ height: number;
243
+ borderRadius: number;
244
+ overflow: string;
245
+ };
246
+ fabShineStreak: {
247
+ position: string;
248
+ top: number;
249
+ width: number;
250
+ height: number;
251
+ transform: {
252
+ rotate: string;
253
+ }[];
254
+ };
218
255
  fab: {
219
256
  width: number;
220
257
  height: number;
@@ -1420,6 +1457,9 @@ export declare const getRawStyles: (colors: typeof AppColors) => {
1420
1457
  };
1421
1458
  headerGradient: {
1422
1459
  width: string;
1460
+ borderTopLeftRadius: number;
1461
+ borderTopRightRadius: number;
1462
+ overflow: string;
1423
1463
  };
1424
1464
  statusChip: {
1425
1465
  paddingHorizontal: number;
@@ -26,8 +26,9 @@ export const getRawStyles = (colors) => ({
26
26
  headerTitle: {
27
27
  fontFamily: AppFonts.interBold,
28
28
  color: colors.primaryLight,
29
- fontSize: 18,
29
+ fontSize: 15,
30
30
  letterSpacing: 0.3,
31
+ paddingBottom: 4,
31
32
  },
32
33
  headerButtonGroup: {
33
34
  flexDirection: 'row',
@@ -151,6 +152,24 @@ export const getRawStyles = (colors) => ({
151
152
  borderColor: 'rgba(255, 255, 255, 0.08)',
152
153
  },
153
154
  listContent: { paddingBottom: 12 },
155
+ // #2 — scroll-to-top button, always shown at the bottom right.
156
+ scrollTopBtn: {
157
+ position: 'absolute',
158
+ bottom: 25,
159
+ right: 15,
160
+ width: 38,
161
+ height: 38,
162
+ borderRadius: 19,
163
+ backgroundColor: colors.purple,
164
+ alignItems: 'center',
165
+ justifyContent: 'center',
166
+ shadowColor: '#000000',
167
+ shadowOffset: { width: 0, height: 3 },
168
+ shadowOpacity: 0.25,
169
+ shadowRadius: 5,
170
+ elevation: 6,
171
+ zIndex: 50,
172
+ },
154
173
  detailScroll: { flex: 1 },
155
174
  detailContent: { paddingHorizontal: 6, paddingTop: 8, paddingBottom: 20 },
156
175
  fabWrapper: {
@@ -183,6 +202,22 @@ export const getRawStyles = (colors) => ({
183
202
  borderRadius: 30,
184
203
  backgroundColor: `${colors.purple}25`,
185
204
  },
205
+ // #4 — circular clipping mask for the FAB shine sweep.
206
+ fabShineClip: {
207
+ position: 'absolute',
208
+ width: 62,
209
+ height: 62,
210
+ borderRadius: 31,
211
+ overflow: 'hidden',
212
+ },
213
+ // #4 — diagonal light streak that sweeps across the launcher.
214
+ fabShineStreak: {
215
+ position: 'absolute',
216
+ top: -20,
217
+ width: 26,
218
+ height: 102,
219
+ transform: [{ rotate: '25deg' }],
220
+ },
186
221
  fab: {
187
222
  width: 56,
188
223
  height: 56,
@@ -1083,7 +1118,12 @@ export const getRawStyles = (colors) => ({
1083
1118
  color: colors.grayTextWeak,
1084
1119
  fontSize: 11,
1085
1120
  },
1086
- diffBlock: { paddingTop: 12, paddingHorizontal: 12, paddingBottom: 16, gap: 4 },
1121
+ diffBlock: {
1122
+ paddingTop: 12,
1123
+ paddingHorizontal: 12,
1124
+ paddingBottom: 16,
1125
+ gap: 4,
1126
+ },
1087
1127
  diffAdded: {
1088
1128
  color: colors.greenColor,
1089
1129
  fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
@@ -1285,6 +1325,9 @@ export const getRawStyles = (colors) => ({
1285
1325
  },
1286
1326
  headerGradient: {
1287
1327
  width: '100%',
1328
+ borderTopLeftRadius: 20,
1329
+ borderTopRightRadius: 20,
1330
+ overflow: 'hidden',
1288
1331
  },
1289
1332
  // Status chip used in MetaAccordion
1290
1333
  statusChip: {
@@ -7,6 +7,8 @@ export interface ConsoleLog {
7
7
  timestamp: number;
8
8
  caller?: string;
9
9
  sourceMethod?: 'log' | 'info' | 'warn' | 'error';
10
+ /** #9 — number of consecutive identical logs collapsed into this entry. */
11
+ duplicateCount?: number;
10
12
  }
11
13
  export interface AnalyticsEvent {
12
14
  id: number;
@@ -36,6 +38,8 @@ export interface NetworkLog {
36
38
  response?: unknown;
37
39
  requestHeaders?: Record<string, string>;
38
40
  responseHeaders?: Record<string, string>;
41
+ /** #9 — number of consecutive identical requests collapsed into this entry. */
42
+ duplicateCount?: number;
39
43
  }
40
44
  export interface RouteInfo {
41
45
  path: string;
package/example/App.tsx CHANGED
@@ -95,16 +95,22 @@ connectReduxStore(mockStore);
95
95
 
96
96
  function BuggyComponent({ type }: { type: 'js' | 'native' }) {
97
97
  if (type === 'js') {
98
- throw new Error('Simulated JavaScript Crash: ReferenceError: x is not defined in App.tsx at line 67');
98
+ throw new Error(
99
+ 'Simulated JavaScript Crash: ReferenceError: x is not defined in App.tsx at line 67',
100
+ );
99
101
  }
100
102
  if (type === 'native') {
101
- throw new Error('Simulated Native Crash: fatal error: Index out of range in Native Swift/Java module at line 70');
103
+ throw new Error(
104
+ 'Simulated Native Crash: fatal error: Index out of range in Native Swift/Java module at line 70',
105
+ );
102
106
  }
103
107
  return null;
104
108
  }
105
109
 
106
110
  function HomeScreen({ navigation }: any) {
107
- const [activeCrash, setActiveCrash] = React.useState<'none' | 'js' | 'native'>('none');
111
+ const [activeCrash, setActiveCrash] = React.useState<
112
+ 'none' | 'js' | 'native'
113
+ >('none');
108
114
  const [apiCount, setApiCount] = React.useState(0);
109
115
  const [logCount, setLogCount] = React.useState(0);
110
116
  const [analyticsCount, setAnalyticsCount] = React.useState(0);
@@ -114,8 +120,12 @@ function HomeScreen({ navigation }: any) {
114
120
  // Subscribe to logs to display live dashboard counters
115
121
  const unsubNet = subscribeNetworkLogs(logs => setApiCount(logs.length));
116
122
  const unsubConsole = subscribeConsoleLogs(logs => setLogCount(logs.length));
117
- const unsubAnalytics = subscribeAnalyticsEvents(events => setAnalyticsCount(events.length));
118
- const unsubRedux = mockStore.subscribe(() => setReduxState(mockStore.getState()));
123
+ const unsubAnalytics = subscribeAnalyticsEvents(events =>
124
+ setAnalyticsCount(events.length),
125
+ );
126
+ const unsubRedux = mockStore.subscribe(() =>
127
+ setReduxState(mockStore.getState()),
128
+ );
119
129
 
120
130
  // Initial Logs to populate stats
121
131
  console.log('[App] HomeScreen mounted and ready.');
@@ -130,9 +140,13 @@ function HomeScreen({ navigation }: any) {
130
140
  }, []);
131
141
 
132
142
  // Axios client — interceptors are automatically applied by setupNetworkLogger()
133
- const axiosClient = React.useMemo(() => axios.create({
134
- baseURL: 'https://jsonplaceholder.typicode.com',
135
- }), []);
143
+ const axiosClient = React.useMemo(
144
+ () =>
145
+ axios.create({
146
+ baseURL: 'https://jsonplaceholder.typicode.com',
147
+ }),
148
+ [],
149
+ );
136
150
 
137
151
  const triggerAxiosGet = async () => {
138
152
  try {
@@ -198,7 +212,9 @@ function HomeScreen({ navigation }: any) {
198
212
  const triggerNetworkRequest = async () => {
199
213
  try {
200
214
  console.log('[API] Triggering fetch user...');
201
- const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
215
+ const response = await fetch(
216
+ 'https://jsonplaceholder.typicode.com/users/1',
217
+ );
202
218
  const data = await response.json();
203
219
  console.log('[API] Fetch completed successfully:', data.name);
204
220
  } catch (error) {
@@ -216,7 +232,9 @@ function HomeScreen({ navigation }: any) {
216
232
  };
217
233
 
218
234
  const triggerConsoleLogs = () => {
219
- console.log('[App] Manual log triggered at ' + new Date().toLocaleTimeString());
235
+ console.log(
236
+ '[App] Manual log triggered at ' + new Date().toLocaleTimeString(),
237
+ );
220
238
  console.warn('[App] Simulated warning. Please check the API config.');
221
239
  console.error('[App] Simulated error! Critical DB connection timeout.');
222
240
  };
@@ -228,7 +246,10 @@ function HomeScreen({ navigation }: any) {
228
246
 
229
247
  return (
230
248
  <SafeAreaView style={styles.safeContainer}>
231
- <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
249
+ <ScrollView
250
+ contentContainerStyle={styles.content}
251
+ showsVerticalScrollIndicator={false}
252
+ >
232
253
  {/* Header Hero Section */}
233
254
  <View style={styles.headerHero}>
234
255
  <Text style={styles.headerBadge}>INSPECTOR PLAYGROUND</Text>
@@ -251,7 +272,9 @@ function HomeScreen({ navigation }: any) {
251
272
  <Text style={styles.statLbl}>Logs</Text>
252
273
  </View>
253
274
  <View style={styles.statBox}>
254
- <Text style={[styles.statVal, { color: '#EA580C' }]}>{analyticsCount}</Text>
275
+ <Text style={[styles.statVal, { color: '#EA580C' }]}>
276
+ {analyticsCount}
277
+ </Text>
255
278
  <Text style={styles.statLbl}>Analytics</Text>
256
279
  </View>
257
280
  <View style={styles.statBox}>
@@ -267,35 +290,72 @@ function HomeScreen({ navigation }: any) {
267
290
  <View style={styles.panelCard}>
268
291
  <Text style={styles.panelHeader}>🌐 API & NETWORK TESTS</Text>
269
292
  <View style={styles.btnRow}>
270
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#38BDF8' }]} onPress={triggerNetworkRequest}>
271
- <Text style={[styles.btnText, { color: '#38BDF8' }]}>Fetch (200 OK)</Text>
293
+ <TouchableOpacity
294
+ style={[styles.gridBtn, { borderColor: '#38BDF8' }]}
295
+ onPress={triggerNetworkRequest}
296
+ >
297
+ <Text style={[styles.btnText, { color: '#38BDF8' }]}>
298
+ Fetch (200 OK)
299
+ </Text>
272
300
  </TouchableOpacity>
273
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F43F5E' }]} onPress={triggerFailedNetworkRequest}>
274
- <Text style={[styles.btnText, { color: '#F43F5E' }]}>Fetch (404 Err)</Text>
301
+ <TouchableOpacity
302
+ style={[styles.gridBtn, { borderColor: '#F43F5E' }]}
303
+ onPress={triggerFailedNetworkRequest}
304
+ >
305
+ <Text style={[styles.btnText, { color: '#F43F5E' }]}>
306
+ Fetch (404 Err)
307
+ </Text>
275
308
  </TouchableOpacity>
276
309
  </View>
277
310
  </View>
278
311
 
279
312
  <View style={styles.panelCard}>
280
- <Text style={styles.panelHeader}>⚡ AXIOS AUTOMATIC INTERCEPTION</Text>
313
+ <Text style={styles.panelHeader}>
314
+ ⚡ AXIOS AUTOMATIC INTERCEPTION
315
+ </Text>
281
316
  <View style={{ gap: 8 }}>
282
317
  <View style={styles.btnRow}>
283
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#10B981' }]} onPress={triggerAxiosGet}>
284
- <Text style={[styles.btnText, { color: '#10B981' }]}>Axios GET</Text>
318
+ <TouchableOpacity
319
+ style={[styles.gridBtn, { borderColor: '#10B981' }]}
320
+ onPress={triggerAxiosGet}
321
+ >
322
+ <Text style={[styles.btnText, { color: '#10B981' }]}>
323
+ Axios GET
324
+ </Text>
285
325
  </TouchableOpacity>
286
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#8B5CF6' }]} onPress={triggerAxiosPost}>
287
- <Text style={[styles.btnText, { color: '#8B5CF6' }]}>Axios POST</Text>
326
+ <TouchableOpacity
327
+ style={[styles.gridBtn, { borderColor: '#8B5CF6' }]}
328
+ onPress={triggerAxiosPost}
329
+ >
330
+ <Text style={[styles.btnText, { color: '#8B5CF6' }]}>
331
+ Axios POST
332
+ </Text>
288
333
  </TouchableOpacity>
289
334
  </View>
290
335
  <View style={styles.btnRow}>
291
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F59E0B' }]} onPress={triggerAxiosPut}>
292
- <Text style={[styles.btnText, { color: '#F59E0B' }]}>Axios PUT</Text>
336
+ <TouchableOpacity
337
+ style={[styles.gridBtn, { borderColor: '#F59E0B' }]}
338
+ onPress={triggerAxiosPut}
339
+ >
340
+ <Text style={[styles.btnText, { color: '#F59E0B' }]}>
341
+ Axios PUT
342
+ </Text>
293
343
  </TouchableOpacity>
294
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#38BDF8' }]} onPress={triggerAxiosPatch}>
295
- <Text style={[styles.btnText, { color: '#38BDF8' }]}>Axios PATCH</Text>
344
+ <TouchableOpacity
345
+ style={[styles.gridBtn, { borderColor: '#38BDF8' }]}
346
+ onPress={triggerAxiosPatch}
347
+ >
348
+ <Text style={[styles.btnText, { color: '#38BDF8' }]}>
349
+ Axios PATCH
350
+ </Text>
296
351
  </TouchableOpacity>
297
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#EF4444' }]} onPress={triggerAxiosDelete}>
298
- <Text style={[styles.btnText, { color: '#EF4444' }]}>Axios DEL</Text>
352
+ <TouchableOpacity
353
+ style={[styles.gridBtn, { borderColor: '#EF4444' }]}
354
+ onPress={triggerAxiosDelete}
355
+ >
356
+ <Text style={[styles.btnText, { color: '#EF4444' }]}>
357
+ Axios DEL
358
+ </Text>
299
359
  </TouchableOpacity>
300
360
  </View>
301
361
  </View>
@@ -303,8 +363,13 @@ function HomeScreen({ navigation }: any) {
303
363
 
304
364
  <View style={styles.panelCard}>
305
365
  <Text style={styles.panelHeader}>📝 CONSOLE EVENT ACTIONS</Text>
306
- <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#6366F1' }]} onPress={triggerConsoleLogs}>
307
- <Text style={styles.fullWidthBtnText}>Trigger Log, Warn & Error Logs</Text>
366
+ <TouchableOpacity
367
+ style={[styles.fullWidthBtn, { backgroundColor: '#6366F1' }]}
368
+ onPress={triggerConsoleLogs}
369
+ >
370
+ <Text style={styles.fullWidthBtnText}>
371
+ Trigger Log, Warn & Error Logs
372
+ </Text>
308
373
  </TouchableOpacity>
309
374
  </View>
310
375
 
@@ -314,7 +379,9 @@ function HomeScreen({ navigation }: any) {
314
379
  <TouchableOpacity
315
380
  style={[styles.gridBtn, { borderColor: '#EA580C' }]}
316
381
  onPress={() => {
317
- console.log('[App] Logged custom analytics event: click_button');
382
+ console.log(
383
+ '[App] Logged custom analytics event: click_button',
384
+ );
318
385
  logAnalyticsEvent('click_button', {
319
386
  button_name: 'test_action',
320
387
  screen_name: 'Home',
@@ -322,56 +389,111 @@ function HomeScreen({ navigation }: any) {
322
389
  });
323
390
  }}
324
391
  >
325
- <Text style={[styles.btnText, { color: '#EA580C' }]}>Log Custom Event</Text>
392
+ <Text style={[styles.btnText, { color: '#EA580C' }]}>
393
+ Log Custom Event
394
+ </Text>
326
395
  </TouchableOpacity>
327
396
  <TouchableOpacity
328
397
  style={[styles.gridBtn, { borderColor: '#E11D48' }]}
329
398
  onPress={() => {
330
- console.log('[App] Logged analytics ecommerce event: item_purchase');
331
- logAnalyticsEvent('item_purchase', {
332
- item_id: 'prod_999',
333
- item_name: 'Premium Debug Kit',
334
- price: 29.99,
335
- currency: 'USD',
336
- items: [{ id: 'prod_999', name: 'Premium Debug Kit', price: 29.99 }],
337
- }, {
338
- user_tier: 'gold_member',
339
- signup_platform: 'ios_app',
340
- });
399
+ console.log(
400
+ '[App] Logged analytics ecommerce event: item_purchase',
401
+ );
402
+ logAnalyticsEvent(
403
+ 'item_purchase',
404
+ {
405
+ item_id: 'prod_999',
406
+ item_name: 'Premium Debug Kit',
407
+ price: 29.99,
408
+ currency: 'USD',
409
+ items: [
410
+ {
411
+ id: 'prod_999',
412
+ name: 'Premium Debug Kit',
413
+ price: 29.99,
414
+ },
415
+ ],
416
+ },
417
+ {
418
+ user_tier: 'gold_member',
419
+ signup_platform: 'ios_app',
420
+ },
421
+ );
341
422
  }}
342
423
  >
343
- <Text style={[styles.btnText, { color: '#E11D48' }]}>Log Purchase</Text>
424
+ <Text style={[styles.btnText, { color: '#E11D48' }]}>
425
+ Log Purchase
426
+ </Text>
344
427
  </TouchableOpacity>
345
428
  </View>
346
429
  </View>
347
430
 
348
431
  <View style={styles.panelCard}>
349
432
  <Text style={styles.panelHeader}>⚙️ REDUX & STATE ACTIONS</Text>
350
- <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]} onPress={handleToggleSidebar}>
351
- <Text style={styles.fullWidthBtnText}>Dispatch: Toggle Sidebar & Update Time</Text>
433
+ <TouchableOpacity
434
+ style={[styles.fullWidthBtn, { backgroundColor: '#8B5CF6' }]}
435
+ onPress={handleToggleSidebar}
436
+ >
437
+ <Text style={styles.fullWidthBtnText}>
438
+ Dispatch: Toggle Sidebar & Update Time
439
+ </Text>
352
440
  </TouchableOpacity>
353
441
  </View>
354
442
 
355
443
  <View style={styles.panelCard}>
356
444
  <Text style={styles.panelHeader}>➔ ROUTING & WEBVIEW</Text>
357
445
  <View style={styles.btnRow}>
358
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#10B981' }]} onPress={() => navigation.navigate('Details')}>
359
- <Text style={[styles.btnText, { color: '#10B981' }]}>Go to Details</Text>
446
+ <TouchableOpacity
447
+ style={[styles.gridBtn, { borderColor: '#10B981' }]}
448
+ onPress={() => navigation.navigate('Details')}
449
+ >
450
+ <Text style={[styles.btnText, { color: '#10B981' }]}>
451
+ Go to Details
452
+ </Text>
360
453
  </TouchableOpacity>
361
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F59E0B' }]} onPress={() => navigation.navigate('WebView')}>
362
- <Text style={[styles.btnText, { color: '#F59E0B' }]}>Go to WebView</Text>
454
+ <TouchableOpacity
455
+ style={[styles.gridBtn, { borderColor: '#F59E0B' }]}
456
+ onPress={() => navigation.navigate('WebView')}
457
+ >
458
+ <Text style={[styles.btnText, { color: '#F59E0B' }]}>
459
+ Go to WebView
460
+ </Text>
363
461
  </TouchableOpacity>
364
462
  </View>
365
463
  </View>
366
464
 
367
465
  <View style={[styles.panelCard, { borderColor: '#F43F5E' }]}>
368
- <Text style={[styles.panelHeader, { color: '#F43F5E' }]}>💥 CRASH SIMULATION TESTS</Text>
466
+ <Text style={[styles.panelHeader, { color: '#F43F5E' }]}>
467
+ 💥 CRASH SIMULATION TESTS
468
+ </Text>
369
469
  <View style={styles.btnRow}>
370
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#F43F5E', backgroundColor: 'rgba(244,63,94,0.05)' }]} onPress={() => setActiveCrash('js')}>
371
- <Text style={[styles.btnText, { color: '#F43F5E' }]}>JS Crash</Text>
470
+ <TouchableOpacity
471
+ style={[
472
+ styles.gridBtn,
473
+ {
474
+ borderColor: '#F43F5E',
475
+ backgroundColor: 'rgba(244,63,94,0.05)',
476
+ },
477
+ ]}
478
+ onPress={() => setActiveCrash('js')}
479
+ >
480
+ <Text style={[styles.btnText, { color: '#F43F5E' }]}>
481
+ JS Crash
482
+ </Text>
372
483
  </TouchableOpacity>
373
- <TouchableOpacity style={[styles.gridBtn, { borderColor: '#EF4444', backgroundColor: 'rgba(239,68,68,0.1)' }]} onPress={() => setActiveCrash('native')}>
374
- <Text style={[styles.btnText, { color: '#EF4444' }]}>Native Crash</Text>
484
+ <TouchableOpacity
485
+ style={[
486
+ styles.gridBtn,
487
+ {
488
+ borderColor: '#EF4444',
489
+ backgroundColor: 'rgba(239,68,68,0.1)',
490
+ },
491
+ ]}
492
+ onPress={() => setActiveCrash('native')}
493
+ >
494
+ <Text style={[styles.btnText, { color: '#EF4444' }]}>
495
+ Native Crash
496
+ </Text>
375
497
  </TouchableOpacity>
376
498
  </View>
377
499
  </View>
@@ -397,17 +519,29 @@ function DetailsScreen({ navigation }: any) {
397
519
  <Text style={styles.headerBadge}>DETAILS MODULE</Text>
398
520
  <Text style={styles.headerTitle}>Navigation Tracking</Text>
399
521
  <Text style={styles.headerSubtitle}>
400
- The breadcrumbs inside the inspector track your stack route in real-time.
522
+ The breadcrumbs inside the inspector track your stack route in
523
+ real-time.
401
524
  </Text>
402
525
  </View>
403
526
 
404
527
  <View style={styles.panelCard}>
405
528
  <Text style={styles.panelHeader}>MODULE ACTIONS</Text>
406
- <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#10B981', marginBottom: 12 }]} onPress={triggerDetailLogs}>
407
- <Text style={styles.fullWidthBtnText}>Trigger Log from Details Screen</Text>
529
+ <TouchableOpacity
530
+ style={[
531
+ styles.fullWidthBtn,
532
+ { backgroundColor: '#10B981', marginBottom: 12 },
533
+ ]}
534
+ onPress={triggerDetailLogs}
535
+ >
536
+ <Text style={styles.fullWidthBtnText}>
537
+ Trigger Log from Details Screen
538
+ </Text>
408
539
  </TouchableOpacity>
409
540
 
410
- <TouchableOpacity style={[styles.fullWidthBtn, { backgroundColor: '#475569' }]} onPress={() => navigation.goBack()}>
541
+ <TouchableOpacity
542
+ style={[styles.fullWidthBtn, { backgroundColor: '#475569' }]}
543
+ onPress={() => navigation.goBack()}
544
+ >
411
545
  <Text style={styles.fullWidthBtnText}>Go Back Home</Text>
412
546
  </TouchableOpacity>
413
547
  </View>
@@ -427,8 +561,12 @@ function WebViewScreen({ navigation }: any) {
427
561
  <WebView
428
562
  source={{ uri: 'https://apple.com' }}
429
563
  style={{ flex: 1 }}
430
- onLoadStart={() => console.log('[WebView] Navigation started to apple.com')}
431
- onLoadEnd={() => console.log('[WebView] Navigation finished loading apple.com')}
564
+ onLoadStart={() =>
565
+ console.log('[WebView] Navigation started to apple.com')
566
+ }
567
+ onLoadEnd={() =>
568
+ console.log('[WebView] Navigation finished loading apple.com')
569
+ }
432
570
  />
433
571
  </View>
434
572
  </SafeAreaView>
@@ -488,7 +626,7 @@ const styles = StyleSheet.create({
488
626
  marginBottom: 6,
489
627
  },
490
628
  headerTitle: {
491
- fontSize: 28,
629
+ fontSize: 14,
492
630
  fontWeight: '900',
493
631
  color: '#F8FAFC',
494
632
  marginBottom: 8,
@@ -191,14 +191,10 @@
191
191
  inputFileListPaths = (
192
192
  "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-input-files.xcfilelist",
193
193
  );
194
- inputPaths = (
195
- );
196
194
  name = "[CP] Embed Pods Frameworks";
197
195
  outputFileListPaths = (
198
196
  "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks-${CONFIGURATION}-output-files.xcfilelist",
199
197
  );
200
- outputPaths = (
201
- );
202
198
  runOnlyForDeploymentPostprocessing = 0;
203
199
  shellPath = /bin/sh;
204
200
  shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-frameworks.sh\"\n";
@@ -234,14 +230,10 @@
234
230
  inputFileListPaths = (
235
231
  "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-input-files.xcfilelist",
236
232
  );
237
- inputPaths = (
238
- );
239
233
  name = "[CP] Copy Pods Resources";
240
234
  outputFileListPaths = (
241
235
  "${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources-${CONFIGURATION}-output-files.xcfilelist",
242
236
  );
243
- outputPaths = (
244
- );
245
237
  runOnlyForDeploymentPostprocessing = 0;
246
238
  shellPath = /bin/sh;
247
239
  shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-example/Pods-example-resources.sh\"\n";
@@ -47,7 +47,7 @@
47
47
  }
48
48
  },
49
49
  "..": {
50
- "version": "1.0.12",
50
+ "version": "1.1.2",
51
51
  "dev": true,
52
52
  "license": "MIT",
53
53
  "dependencies": {
@@ -59,6 +59,8 @@
59
59
  "@react-navigation/native": "^6.1.9",
60
60
  "@types/react": "^19.1.0",
61
61
  "@types/react-native": "^0.72.0",
62
+ "axios": "^1.7.2",
63
+ "prettier": "^2.8.8",
62
64
  "react": "19.1.0",
63
65
  "react-native": "0.81.4",
64
66
  "react-native-linear-gradient": "^2.8.3",
@@ -6932,7 +6934,6 @@
6932
6934
  "version": "2.3.3",
6933
6935
  "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
6934
6936
  "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
6935
- "dev": true,
6936
6937
  "hasInstallScript": true,
6937
6938
  "license": "MIT",
6938
6939
  "optional": true,
@@ -12193,7 +12194,7 @@
12193
12194
  "version": "5.9.3",
12194
12195
  "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
12195
12196
  "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
12196
- "dev": true,
12197
+ "devOptional": true,
12197
12198
  "license": "Apache-2.0",
12198
12199
  "bin": {
12199
12200
  "tsc": "bin/tsc",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-native-inapp-inspector",
3
- "version": "1.1.1",
3
+ "version": "1.1.3",
4
4
  "description": "A self-contained network, console, analytics, and webview inspector for React Native applications.",
5
5
  "repository": {
6
6
  "type": "git",