react-native-debug-toolkit 3.2.3 → 3.2.5

package/src/features/devConnect/DevConnectTab.tsx

@@ -28,16 +28,15 @@ import {
   normalizeComputerHost,
   normalizePort,
   parseComputerTarget,
-  type ParsedComputerTarget,
 } from './devConnectUtils';
 import {
+  saveComputerHost,
   saveComputerTarget,
   saveDaemonPort,
   saveMetroPort,
 } from './devConnectPreferences';
 import { applyMetroBundle, resetMetroBundle } from './nativeDevConnect';
-import type { DevConnectState } from './types';
-import { DevConnectQrScanner } from './DevConnectQrScanner';
+import type { DevConnectFeatureControls, DevConnectSettingsPatch, DevConnectState } from './types';
 
 const CONNECTION_TIMEOUT_MS = 2000;
 
@@ -63,7 +62,7 @@ function describeMetroFailure(result: { reason: string; error?: string }): strin
   return result.error ? `Metro switch failed: ${result.error}` : 'Metro switch failed.';
 }
 
-export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectState>) {
+export function DevConnectTab({ snapshot, feature }: DebugFeatureRenderProps<DevConnectState>) {
   const inputRef = useRef<TextInput>(null);
   const [computerHost, setComputerHost] = useState(snapshot.computerHost);
   const [metroPort, setMetroPort] = useState(snapshot.metroPort);
@@ -73,17 +72,29 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
   const [message, setMessage] = useState<string | null>(null);
   const [sending, setSending] = useState(false);
   const [metroBusy, setMetroBusy] = useState(false);
-  const [qrVisible, setQrVisible] = useState(false);
 
   const isSim = snapshot.isSimulator;
 
+  const updateFeatureSettings = useCallback((patch: DevConnectSettingsPatch) => {
+    (feature as unknown as DevConnectFeatureControls).updateSettings?.(patch);
+  }, [feature]);
+
   useEffect(() => {
     setComputerHost(snapshot.computerHost);
+  }, [snapshot.computerHost]);
+
+  useEffect(() => {
     setMetroPort(snapshot.metroPort);
+  }, [snapshot.metroPort]);
+
+  useEffect(() => {
     setDaemonPort(snapshot.daemonPort);
+  }, [snapshot.daemonPort]);
+
+  useEffect(() => {
     setStreaming(snapshot.streaming);
     setSyncState(snapshot.streaming ? 'running' : 'idle');
-  }, [snapshot.computerHost, snapshot.daemonPort, snapshot.metroPort, snapshot.streaming]);
+  }, [snapshot.streaming]);
 
   const metroHost = isSim ? getSimulatorMetroHost() : computerHost;
   const metroTarget = useMemo(
@@ -100,36 +111,97 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     const target = parseComputerTarget(value);
     if (target) {
       setMetroPort(target.metroPort);
-      saveComputerTarget(value).catch(() => {});
+      saveComputerTarget(value)
+        .then((savedTarget) => {
+          if (savedTarget) {
+            updateFeatureSettings({
+              computerHost: savedTarget.computerHost,
+              metroPort: savedTarget.metroPort,
+            });
+          }
+        })
+        .catch(() => {});
     }
     setSyncState((prev) => (prev === 'failed' ? 'idle' : prev));
     setMessage(null);
-  }, []);
+  }, [updateFeatureSettings]);
 
   const handleMetroPortChange = useCallback((value: string) => {
     setMetroPort(value);
     const normalized = normalizePort(value);
     if (normalized) {
-      saveMetroPort(normalized).catch(() => {});
+      saveMetroPort(normalized)
+        .then(() => updateFeatureSettings({ metroPort: normalized }))
+        .catch(() => {});
     }
     setMessage(null);
-  }, []);
+  }, [updateFeatureSettings]);
 
   const handleDaemonPortChange = useCallback((value: string) => {
     setDaemonPort(value);
     const normalized = normalizePort(value);
     if (normalized) {
-      saveDaemonPort(normalized).catch(() => {});
+      saveDaemonPort(normalized)
+        .then(() => updateFeatureSettings({ daemonPort: normalized }))
+        .catch(() => {});
     }
     setMessage(null);
-  }, []);
+  }, [updateFeatureSettings]);
+
+  const persistConnectionSettings = useCallback(async (): Promise<boolean> => {
+    const normalizedDaemonPort = normalizePort(daemonPort);
+    if (!normalizedDaemonPort) {
+      setMessage('Enter a valid desktop logs port.');
+      return false;
+    }
+
+    const patch: DevConnectSettingsPatch = { daemonPort: normalizedDaemonPort };
+    const writes: Array<Promise<unknown>> = [saveDaemonPort(normalizedDaemonPort)];
+    setDaemonPort(normalizedDaemonPort);
+
+    if (!isSim) {
+      const normalizedHost = normalizeComputerHost(computerHost);
+      if (!normalizedHost) {
+        setMessage('Enter your computer IP first.');
+        return false;
+      }
+      patch.computerHost = normalizedHost;
+      writes.push(saveComputerHost(normalizedHost));
+      setComputerHost(normalizedHost);
+    }
+
+    const normalizedMetroPort = normalizePort(metroPort);
+    if (normalizedMetroPort) {
+      patch.metroPort = normalizedMetroPort;
+      writes.push(saveMetroPort(normalizedMetroPort));
+      setMetroPort(normalizedMetroPort);
+    }
+
+    await Promise.all(writes);
+    updateFeatureSettings(patch);
+    return true;
+  }, [computerHost, daemonPort, isSim, metroPort, updateFeatureSettings]);
+
+  const persistMetroSettings = useCallback(async (): Promise<boolean> => {
+    if (!metroTarget) {
+      setMessage('Enter a valid computer IP and Metro port.');
+      return false;
+    }
 
-  const handleQrTarget = useCallback((target: ParsedComputerTarget) => {
-    setComputerHost(target.computerHost);
-    setMetroPort(target.metroPort);
-    saveComputerTarget(`${target.computerHost}:${target.metroPort}`).catch(() => {});
-    setMessage('Computer IP updated from QR code.');
-  }, []);
+    const patch: DevConnectSettingsPatch = { metroPort: metroTarget.port };
+    const writes: Array<Promise<unknown>> = [saveMetroPort(metroTarget.port)];
+    setMetroPort(metroTarget.port);
+
+    if (!isSim) {
+      patch.computerHost = metroTarget.host;
+      writes.push(saveComputerTarget(metroTarget.hostPort));
+      setComputerHost(metroTarget.host);
+    }
+
+    await Promise.all(writes);
+    updateFeatureSettings(patch);
+    return true;
+  }, [isSim, metroTarget, updateFeatureSettings]);
 
   const validateSettings = useCallback((): boolean => {
     if (!isSim && !normalizeComputerHost(computerHost)) {
@@ -172,6 +244,9 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     if (!validateSettings()) {
       return;
     }
+    if (!(await persistConnectionSettings())) {
+      return;
+    }
 
     const daemonOptions = configureDaemon();
     setMessage('Checking desktop connection...');
@@ -210,12 +285,15 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
       },
     });
     setStreaming(true);
-  }, [configureDaemon, streaming, validateSettings]);
+  }, [configureDaemon, persistConnectionSettings, streaming, validateSettings]);
 
   const sendOnce = useCallback(async () => {
     if (!validateSettings()) {
       return;
     }
+    if (!(await persistConnectionSettings())) {
+      return;
+    }
 
     const daemonOptions = configureDaemon();
     setSending(true);
@@ -246,7 +324,7 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     } finally {
       setSending(false);
     }
-  }, [configureDaemon, validateSettings]);
+  }, [configureDaemon, persistConnectionSettings, validateSettings]);
 
   const applyRemoteBundle = useCallback(async () => {
     if (!metroTarget) {
@@ -261,6 +339,9 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     setMetroBusy(true);
     setMessage('Checking Metro...');
     try {
+      if (!(await persistMetroSettings())) {
+        return;
+      }
       const result = await applyMetroBundle(metroTarget.host, metroTarget.port);
       if (result.ok) {
         setMessage(`Using Metro at ${result.hostPort}. Reloading...`);
@@ -270,7 +351,7 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
     } finally {
       setMetroBusy(false);
     }
-  }, [metroTarget, snapshot.nativeMetroAvailable]);
+  }, [metroTarget, persistMetroSettings, snapshot.nativeMetroAvailable]);
 
   const resetRemoteBundle = useCallback(async () => {
     if (!snapshot.nativeMetroAvailable) {
@@ -294,6 +375,8 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
   const canConnect = isSim || (Boolean(normalizeComputerHost(computerHost)) && Boolean(normalizePort(daemonPort)));
   const canUseMetro = Boolean(metroTarget) && snapshot.nativeMetroAvailable && !metroBusy;
   const busy = sending || syncState === 'checking';
+  const subnetPrefix = snapshot.subnetPrefix;
+  const ipPlaceholder = subnetPrefix ? `${subnetPrefix}...` : '192.168.1.10';
 
   return (
     <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -312,7 +395,7 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
                 style={styles.input}
                 value={computerHost}
                 onChangeText={handleHostChange}
-                placeholder="192.168.1.10"
+                placeholder={ipPlaceholder}
                 placeholderTextColor={Colors.textLight}
                 autoCapitalize="none"
                 autoCorrect={false}
@@ -321,12 +404,19 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
                 onSubmitEditing={() => inputRef.current?.blur()}
                 editable={!streaming}
               />
-              {snapshot.qrAvailable ? (
-                <TouchableOpacity style={styles.scanButton} onPress={() => setQrVisible(true)} disabled={streaming} activeOpacity={0.7}>
-                  <Text style={styles.scanButtonText}>Scan</Text>
-                </TouchableOpacity>
-              ) : null}
             </View>
+            {subnetPrefix && !computerHost ? (
+              <TouchableOpacity
+                style={styles.subnetHint}
+                onPress={() => {
+                  setComputerHost(subnetPrefix);
+                  inputRef.current?.focus();
+                }}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.subnetHintText}>Tap to fill: {subnetPrefix}</Text>
+              </TouchableOpacity>
+            ) : null}
           </View>
         )}
 
@@ -438,11 +528,6 @@ export function DevConnectTab({ snapshot }: DebugFeatureRenderProps<DevConnectSt
           ) : null}
         </View>
       </ScrollView>
-      <DevConnectQrScanner
-        visible={qrVisible}
-        onClose={() => setQrVisible(false)}
-        onScanTarget={handleQrTarget}
-      />
     </KeyboardAvoidingView>
   );
 }
@@ -464,7 +549,9 @@ const styles = StyleSheet.create({
   sectionTitle: { fontSize: 14, fontWeight: '600', color: Colors.text, marginBottom: 4 },
   sectionDesc: { fontSize: 12, color: Colors.textSecondary, marginBottom: 10, lineHeight: 17 },
   label: { fontSize: 13, fontWeight: '500', color: Colors.textSecondary, marginBottom: 6 },
-  inputRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  inputRow: { flexDirection: 'row', alignItems: 'center' },
+  subnetHint: { marginTop: 6 },
+  subnetHintText: { fontSize: 12, color: Colors.primary, fontWeight: '500' },
   input: {
     flex: 1,
     backgroundColor: Colors.surface,
@@ -477,18 +564,6 @@ const styles = StyleSheet.create({
     color: Colors.text,
     fontFamily: 'Courier',
   },
-  scanButton: {
-    minWidth: 62,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 8,
-    backgroundColor: Colors.surface,
-    borderWidth: 1,
-    borderColor: Colors.primary,
-  },
-  scanButtonText: { color: Colors.primary, fontSize: 13, fontWeight: '600' },
   portRow: { flexDirection: 'row', gap: 10 },
   portField: { flex: 1 },
   portLabel: { fontSize: 11, color: Colors.textSecondary, marginBottom: 4 },

package/src/features/devConnect/devConnectPreferences.ts

@@ -40,8 +40,13 @@ export async function saveComputerTarget(value: string): Promise<ParsedComputerT
 }
 
 export async function saveComputerHost(value: string): Promise<string | null> {
-  const target = await saveComputerTarget(value);
-  return target?.computerHost ?? null;
+  const host = normalizeComputerHost(value);
+  if (!host) {
+    return null;
+  }
+
+  await setPreference(KEYS.computerHost, host);
+  return host;
 }
 
 export async function saveMetroPort(value: string): Promise<string | null> {

package/src/features/devConnect/devConnectUtils.ts

@@ -164,3 +164,11 @@ export function buildDaemonDeviceHost(computerHost: string, daemonPort: string):
   const port = normalizePort(daemonPort) ?? DEFAULT_DAEMON_PORT;
   return port === DEFAULT_DAEMON_PORT ? host : `${host}:${port}`;
 }
+
+export function extractSubnetPrefix(ip: string): string | null {
+  if (!isValidIpv4(ip)) {
+    return null;
+  }
+  const parts = ip.split('.');
+  return `${parts[0]}.${parts[1]}.${parts[2]}.`;
+}

package/src/features/devConnect/index.ts

@@ -1,12 +1,11 @@
 import { DevConnectTab } from './DevConnectTab';
-import { isCameraKitAvailable } from './cameraKit';
 import { loadDevConnectPreferences } from './devConnectPreferences';
-import { DEFAULT_DAEMON_PORT, DEFAULT_METRO_PORT } from './devConnectUtils';
-import { isNativeDevConnectAvailable } from './nativeDevConnect';
+import { DEFAULT_DAEMON_PORT, DEFAULT_METRO_PORT, extractSubnetPrefix } from './devConnectUtils';
+import { getDeviceLocalIp, isNativeDevConnectAvailable } from './nativeDevConnect';
 import { isSimulator } from './platformDetect';
 import { daemonClient } from '../../utils/DaemonClient';
 import type { DebugFeature, DebugFeatureListener } from '../../types';
-import type { DevConnectState } from './types';
+import type { DevConnectFeatureControls, DevConnectSettingsPatch, DevConnectState } from './types';
 
 export type { DevConnectState } from './types';
 export {
@@ -24,6 +23,7 @@ export {
   saveDaemonPort,
   saveMetroPort,
 } from './devConnectPreferences';
+export { nativeIsDebugBuild } from './nativeDevConnect';
 
 export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
   const listeners = new Set<DebugFeatureListener>();
@@ -32,7 +32,6 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
     computerHost: '',
     metroPort: DEFAULT_METRO_PORT,
     daemonPort: DEFAULT_DAEMON_PORT,
-    qrAvailable: isCameraKitAvailable(),
     nativeMetroAvailable: isNativeDevConnectAvailable(),
     streaming: daemonClient.isConnected(),
   };
@@ -45,12 +44,21 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
     listeners.forEach((listener) => listener());
   };
 
-  return {
+  const updateSettings = (patch: DevConnectSettingsPatch) => {
+    state = {
+      ...state,
+      ...patch,
+    };
+    notify();
+  };
+
+  const feature: DebugFeature<DevConnectState> & DevConnectFeatureControls = {
     name: 'devConnect',
     label: 'DevConnect',
     renderContent: DevConnectTab,
     setup() {
-      loadDevConnectPreferences().then((preferences) => {
+      daemonClient.setOnConnectionChange(() => notify());
+      loadDevConnectPreferences().then(async (preferences) => {
         state = {
           ...state,
           computerHost: preferences.computerHost,
@@ -58,6 +66,19 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
           daemonPort: preferences.daemonPort,
           nativeMetroAvailable: isNativeDevConnectAvailable(),
         };
+
+        if (!state.isSimulator) {
+          try {
+            const localIp = await getDeviceLocalIp();
+            if (localIp) {
+              const prefix = extractSubnetPrefix(localIp);
+              if (prefix) {
+                state = { ...state, subnetPrefix: prefix };
+              }
+            }
+          } catch { /* subnetPrefix stays undefined */ }
+        }
+
         notify();
       }).catch(() => {
         notify();
@@ -73,5 +94,8 @@ export const createDevConnectFeature = (): DebugFeature<DevConnectState> => {
         listeners.delete(listener);
       };
     },
+    updateSettings,
   };
+
+  return feature;
 };

package/src/features/devConnect/nativeDevConnect.ts

@@ -6,6 +6,8 @@ interface DebugToolkitDevConnectNativeModule {
   applyMetroHost: (hostPort: string) => Promise<{ hostPort?: string } | void>;
   resetMetroHost: () => Promise<void>;
   getMetroHost?: () => Promise<string | null>;
+  getLocalIp?: () => Promise<string | null>;
+  isDebugBuild?: () => Promise<boolean>;
 }
 
 type MetroBundleFailureReason =
@@ -124,3 +126,29 @@ export async function resetMetroBundle(): Promise<MetroBundleResult | { ok: true
     };
   }
 }
+
+export async function getDeviceLocalIp(): Promise<string | null> {
+  const nativeModule = getNativeModule();
+  if (!nativeModule?.getLocalIp) {
+    return null;
+  }
+  try {
+    const ip = await nativeModule.getLocalIp();
+    return typeof ip === 'string' ? ip : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function nativeIsDebugBuild(): Promise<boolean | null> {
+  const nativeModule = getNativeModule();
+  if (!nativeModule?.isDebugBuild) {
+    return null;
+  }
+  try {
+    const result = await nativeModule.isDebugBuild();
+    return typeof result === 'boolean' ? result : null;
+  } catch {
+    return null;
+  }
+}

package/src/features/devConnect/types.ts

@@ -3,7 +3,15 @@ export interface DevConnectState {
   computerHost: string;
   metroPort: string;
   daemonPort: string;
-  qrAvailable: boolean;
+  subnetPrefix?: string;
   nativeMetroAvailable: boolean;
   streaming: boolean;
 }
+
+export type DevConnectSettingsPatch = Partial<
+  Pick<DevConnectState, 'computerHost' | 'metroPort' | 'daemonPort'>
+>;
+
+export interface DevConnectFeatureControls {
+  updateSettings?: (patch: DevConnectSettingsPatch) => void;
+}

package/src/ui/DebugView.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DebugToolkitProvider } from '../core/DebugToolkitProvider';
 import { initializeDebugToolkit } from '../core/initialize';
 import type { FeatureConfigs } from '../core/initialize';
@@ -42,6 +42,8 @@ export function DebugView({
   environments,
   enabled,
 }: DebugViewProps) {
+  const destroyRef = useRef<(() => void) | null>(null);
+
   useEffect(() => {
     // Build feature config: all enabled by default, user overrides take precedence
     const resolvedFeatures: FeatureConfigs = {
@@ -61,13 +63,20 @@ export function DebugView({
     }
 
     // Initialize toolkit
-    const toolkit = initializeDebugToolkit({
+    let cancelled = false;
+    initializeDebugToolkit({
       features: resolvedFeatures,
       enabled,
+    }).then((toolkit) => {
+      if (!cancelled) {
+        destroyRef.current = () => toolkit.destroy();
+      }
     });
 
     return () => {
-      toolkit.destroy();
+      cancelled = true;
+      destroyRef.current?.();
+      destroyRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/src/utils/DaemonClient.ts

@@ -186,6 +186,7 @@ export class DaemonClient {
   private _onEndpointDetected: ((url: string) => void) | undefined;
   private _restorePromise: Promise<void> | null = null;
   private _sessionId: SessionInfo | null = null;
+  private _onConnectionChange: (() => void) | undefined;
 
   constructor(options: DaemonClientOptions) {
     this._fetch = options.fetch;
@@ -315,6 +316,7 @@ export class DaemonClient {
     ).remove;
 
     this._stream = state;
+    this._onConnectionChange?.();
     this.emitStatus({ state: 'connecting' });
     this.enqueueSendFullReport();
   }
@@ -324,6 +326,7 @@ export class DaemonClient {
     const state = this._stream;
     this._stream = null;
     this._sessionId = null;
+    this._onConnectionChange?.();
 
     if (state.debounceTimer) clearTimeout(state.debounceTimer);
     if (state.retryTimer) clearTimeout(state.retryTimer);
@@ -360,6 +363,10 @@ export class DaemonClient {
     this._onEndpointDetected = callback;
   }
 
+  setOnConnectionChange(callback: (() => void) | undefined): void {
+    this._onConnectionChange = callback;
+  }
+
   // --- Restore (init-time reconnect) ---
 
   async restore(): Promise<void> {