react-native-debug-toolkit 3.2.1 → 3.2.3

package/README.md

@@ -26,6 +26,15 @@ RN App -> Debug Panel -> local daemon -> Web Console / HTTP API / MCP
 npm install react-native-debug-toolkit
 ```
 
+Install the native part and rebuild the app:
+
+```bash
+cd ios && pod install
+# Android: Gradle autolinking runs on the next build
+```
+
+Expo Go cannot load this native module. Use a development build, prebuild, or bare React Native app.
+
 Optional dependencies:
 
 ```bash
@@ -64,9 +73,11 @@ Open the Web Console:
 http://127.0.0.1:3799/console
 ```
 
-In the app, open Debug Panel -> `DevConnect` -> `Send Once` or `Start Live Sync`.
+In the app, open Debug Panel -> `DevConnect` -> `Send Once` or `Start Live Sync` for desktop logs.
+
+DevConnect auto-detects simulator/emulator and uses local host settings automatically. On real devices, enter your computer IP to connect.
 
-DevConnect auto-detects simulator/emulator and uses `localhost` automatically. On real devices, enter your computer IP to connect.
+For Remote JS Bundle, run Metro on your computer, enter computer IP and Metro port in `DevConnect`, then tap `Use Metro Bundle`. DevConnect writes React Native's native dev-server host setting and reloads the app. The IP and ports are persisted through AsyncStorage when installed, or through the native module after rebuild.
 
 QR scan is optional. Install `react-native-camera-kit` or `expo-camera` in the app to enable the scan button. The app must request camera permission before scanning.
 

package/README.zh-CN.md

@@ -26,6 +26,15 @@ RN App -> Debug Panel -> local daemon -> Web Console / HTTP API / MCP
 npm install react-native-debug-toolkit
 ```
 
+安装原生部分并重新构建 App：
+
+```bash
+cd ios && pod install
+# Android：下次构建时 Gradle autolinking 生效
+```
+
+Expo Go 不能加载这个原生模块。Expo 项目需用 development build、prebuild，或 bare React Native。
+
 可选依赖：
 
 ```bash
@@ -64,9 +73,11 @@ npm exec debug-toolkit --daemon-only
 http://127.0.0.1:3799/console
 ```
 
-App 内打开 Debug Panel -> `DevConnect` -> `Send Once` 或 `Start Live Sync`。
+App 内打开 Debug Panel -> `DevConnect` -> `Send Once` 或 `Start Live Sync` 同步桌面日志。
+
+DevConnect 自动识别模拟器/真机，模拟器下自动使用本机 Metro/daemon 地址。真机需输入电脑 IP 地址。
 
-DevConnect 自动识别模拟器/真机，模拟器下自动使用 `localhost`。真机需输入电脑 IP 地址。
+Remote JS Bundle：先在电脑启动 Metro，在 `DevConnect` 输入电脑 IP 和 Metro 端口，然后点 `Use Metro Bundle`。DevConnect 会写入 React Native 原生 dev-server host 设置并 reload App。IP 和端口会通过 AsyncStorage 持久化；如果没装 AsyncStorage，则在重建后通过本库原生模块持久化。
 
 扫码是可选能力。App 安装 `react-native-camera-kit` 或 `expo-camera` 后，DevConnect 才显示扫码按钮。App 仍需自己配置相机权限文案，并在使用扫码前申请相机权限。
 

package/android/build.gradle

@@ -0,0 +1,34 @@
+buildscript {
+  repositories {
+    google()
+    mavenCentral()
+  }
+  dependencies {
+    classpath("com.android.tools.build:gradle:7.4.2")
+  }
+}
+
+def safeExtGet(prop, fallback) {
+  return rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+}
+
+apply plugin: 'com.android.library'
+
+android {
+  namespace 'com.reactnativedebugtoolkit'
+  compileSdkVersion safeExtGet('compileSdkVersion', 35)
+
+  defaultConfig {
+    minSdkVersion safeExtGet('minSdkVersion', 23)
+    targetSdkVersion safeExtGet('targetSdkVersion', 35)
+  }
+}
+
+repositories {
+  google()
+  mavenCentral()
+}
+
+dependencies {
+  implementation 'com.facebook.react:react-android'
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" />

package/android/src/main/java/com/reactnativedebugtoolkit/DebugToolkitDevConnectModule.java

@@ -0,0 +1,154 @@
+package com.reactnativedebugtoolkit;
+
+import android.content.Context;
+import android.content.SharedPreferences;
+import android.preference.PreferenceManager;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.UiThreadUtil;
+import com.facebook.react.bridge.WritableMap;
+
+import java.lang.reflect.Method;
+
+public class DebugToolkitDevConnectModule extends ReactContextBaseJavaModule {
+  private static final String MODULE_NAME = "DebugToolkitDevConnect";
+  private static final String DEBUG_SERVER_HOST_KEY = "debug_http_host";
+  private static final String APPLY_RELOAD_REASON = "DebugToolkit DevConnect Metro host changed";
+  private static final String RESET_RELOAD_REASON = "DebugToolkit DevConnect Metro host reset";
+
+  public DebugToolkitDevConnectModule(ReactApplicationContext reactContext) {
+    super(reactContext);
+  }
+
+  @NonNull
+  @Override
+  public String getName() {
+    return MODULE_NAME;
+  }
+
+  private SharedPreferences getPreferences() {
+    return PreferenceManager.getDefaultSharedPreferences(getReactApplicationContext());
+  }
+
+  @Nullable
+  private Object callGetter(Object target, String methodName) {
+    try {
+      Method method = target.getClass().getMethod(methodName);
+      return method.invoke(target);
+    } catch (Exception ignored) {
+      return null;
+    }
+  }
+
+  private boolean triggerDevSupportReload(@Nullable Object devSupportManager) throws Exception {
+    if (devSupportManager == null) {
+      return false;
+    }
+
+    Object enabled = callGetter(devSupportManager, "getDevSupportEnabled");
+    if (enabled instanceof Boolean && !((Boolean) enabled)) {
+      return false;
+    }
+
+    Method reloadMethod = devSupportManager.getClass().getMethod("handleReloadJS");
+    reloadMethod.invoke(devSupportManager);
+    return true;
+  }
+
+  private boolean reloadFromReactHost(Context applicationContext, String reason) throws Exception {
+    Object reactHost = callGetter(applicationContext, "getReactHost");
+    if (reactHost == null) {
+      return false;
+    }
+
+    if (triggerDevSupportReload(callGetter(reactHost, "getDevSupportManager"))) {
+      return true;
+    }
+
+    Method reloadMethod = reactHost.getClass().getMethod("reload", String.class);
+    reloadMethod.invoke(reactHost, reason);
+    return true;
+  }
+
+  private boolean reloadFromReactNativeHost(Context applicationContext) throws Exception {
+    Object reactNativeHost = callGetter(applicationContext, "getReactNativeHost");
+    Object instanceManager = reactNativeHost == null
+        ? null
+        : callGetter(reactNativeHost, "getReactInstanceManager");
+    Object devSupportManager = instanceManager == null
+        ? null
+        : callGetter(instanceManager, "getDevSupportManager");
+    return triggerDevSupportReload(devSupportManager);
+  }
+
+  private void resolveAfterReload(String reason, @Nullable WritableMap result, Promise promise) {
+    UiThreadUtil.runOnUiThread(() -> {
+      try {
+        Context applicationContext = getReactApplicationContext().getApplicationContext();
+        boolean reloaded = reloadFromReactHost(applicationContext, reason)
+            || reloadFromReactNativeHost(applicationContext);
+        if (!reloaded) {
+          promise.reject("reload_unavailable", "Unable to trigger React Native reload after updating Metro host.");
+          return;
+        }
+        promise.resolve(result);
+      } catch (Exception error) {
+        promise.reject("reload_failed", "Unable to trigger React Native reload after updating Metro host.", error);
+      }
+    });
+  }
+
+  @ReactMethod
+  public void getMetroHost(Promise promise) {
+    @Nullable String host = getPreferences().getString(DEBUG_SERVER_HOST_KEY, null);
+    promise.resolve(host);
+  }
+
+  @ReactMethod
+  public void applyMetroHost(String hostPort, Promise promise) {
+    if (hostPort == null || hostPort.length() == 0) {
+      promise.reject("invalid_host", "Metro host cannot be empty.");
+      return;
+    }
+
+    boolean stored = getPreferences().edit().putString(DEBUG_SERVER_HOST_KEY, hostPort).commit();
+    if (!stored) {
+      promise.reject("storage_failed", "Unable to persist Metro host.");
+      return;
+    }
+
+    WritableMap result = Arguments.createMap();
+    result.putString("hostPort", hostPort);
+    resolveAfterReload(APPLY_RELOAD_REASON, result, promise);
+  }
+
+  @ReactMethod
+  public void resetMetroHost(Promise promise) {
+    boolean stored = getPreferences().edit().remove(DEBUG_SERVER_HOST_KEY).commit();
+    if (!stored) {
+      promise.reject("storage_failed", "Unable to reset Metro host.");
+      return;
+    }
+
+    resolveAfterReload(RESET_RELOAD_REASON, null, promise);
+  }
+
+  @ReactMethod
+  public void getPreference(String key, Promise promise) {
+    @Nullable String value = getPreferences().getString(key, null);
+    promise.resolve(value);
+  }
+
+  @ReactMethod
+  public void setPreference(String key, String value, Promise promise) {
+    getPreferences().edit().putString(key, value).apply();
+    promise.resolve(null);
+  }
+}

package/android/src/main/java/com/reactnativedebugtoolkit/ReactNativeDebugToolkitPackage.java

@@ -0,0 +1,25 @@
+package com.reactnativedebugtoolkit;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.Collections;
+import java.util.List;
+
+public class ReactNativeDebugToolkitPackage implements ReactPackage {
+  @NonNull
+  @Override
+  public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+    return Collections.<NativeModule>singletonList(new DebugToolkitDevConnectModule(reactContext));
+  }
+
+  @NonNull
+  @Override
+  public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+    return Collections.emptyList();
+  }
+}

package/ios/DebugToolkitDevConnect.mm

@@ -0,0 +1,81 @@
+#import <Foundation/Foundation.h>
+#import <React/RCTBridgeModule.h>
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTReloadCommand.h>
+
+static NSString *const DebugToolkitRCTJsLocationKey = @"RCT_jsLocation";
+static NSString *const DebugToolkitBundleRoot = @"index";
+
+static void DebugToolkitResolveAfterReload(NSString *reason, id result, RCTPromiseResolveBlock resolve)
+{
+  dispatch_async(dispatch_get_main_queue(), ^{
+    NSURL *bundleURL = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:DebugToolkitBundleRoot];
+    if (bundleURL) {
+      RCTReloadCommandSetBundleURL(bundleURL);
+    }
+    RCTTriggerReloadCommandListeners(reason);
+    resolve(result ?: [NSNull null]);
+  });
+}
+
+@interface DebugToolkitDevConnect : NSObject <RCTBridgeModule>
+@end
+
+@implementation DebugToolkitDevConnect
+
+RCT_EXPORT_MODULE(DebugToolkitDevConnect)
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+RCT_EXPORT_METHOD(getMetroHost:(RCTPromiseResolveBlock)resolve
+                  rejecter:(__unused RCTPromiseRejectBlock)reject)
+{
+  NSString *host = [RCTBundleURLProvider sharedSettings].jsLocation;
+  resolve(host ?: [NSNull null]);
+}
+
+RCT_EXPORT_METHOD(applyMetroHost:(NSString *)hostPort
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+  if (hostPort.length == 0) {
+    reject(@"invalid_host", @"Metro host cannot be empty.", nil);
+    return;
+  }
+
+  [RCTBundleURLProvider sharedSettings].jsLocation = hostPort;
+  DebugToolkitResolveAfterReload(@"DebugToolkit DevConnect Metro host changed", @{ @"hostPort" : hostPort }, resolve);
+}
+
+RCT_EXPORT_METHOD(resetMetroHost:(RCTPromiseResolveBlock)resolve
+                  rejecter:(__unused RCTPromiseRejectBlock)reject)
+{
+  NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];
+  [defaults removeObjectForKey:DebugToolkitRCTJsLocationKey];
+  [defaults synchronize];
+  [[NSNotificationCenter defaultCenter] postNotificationName:RCTBundleURLProviderUpdatedNotification object:nil];
+  DebugToolkitResolveAfterReload(@"DebugToolkit DevConnect Metro host reset", [NSNull null], resolve);
+}
+
+RCT_EXPORT_METHOD(getPreference:(NSString *)key
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(__unused RCTPromiseRejectBlock)reject)
+{
+  NSString *value = [[NSUserDefaults standardUserDefaults] stringForKey:key];
+  resolve(value ?: [NSNull null]);
+}
+
+RCT_EXPORT_METHOD(setPreference:(NSString *)key
+                  value:(NSString *)value
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(__unused RCTPromiseRejectBlock)reject)
+{
+  [[NSUserDefaults standardUserDefaults] setObject:value forKey:key];
+  [[NSUserDefaults standardUserDefaults] synchronize];
+  resolve([NSNull null]);
+}
+
+@end

package/lib/commonjs/features/devConnect/DevConnectQrScanner.js

@@ -27,7 +27,9 @@ class CameraErrorBoundary extends _react.Component {
     this.props.onCameraError(error.message || 'Camera failed to initialize.');
   }
   render() {
-    if (this.state.hasError) return null;
+    if (this.state.hasError) {
+      return null;
+    }
     return this.props.children;
   }
 }
@@ -37,7 +39,7 @@ class CameraErrorBoundary extends _react.Component {
 function DevConnectQrScanner({
   visible,
   onClose,
-  onScanHost
+  onScanTarget
 }) {
   const scannedRef = (0, _react.useRef)(false);
   const [error, setError] = (0, _react.useState)(null);
@@ -51,8 +53,12 @@ function DevConnectQrScanner({
     }
   }, [visible]);
   const handleScanned = (0, _react.useCallback)(rawValue => {
-    if (scannedRef.current) return;
-    if (typeof rawValue !== 'string') return;
+    if (scannedRef.current) {
+      return;
+    }
+    if (typeof rawValue !== 'string') {
+      return;
+    }
     const parsed = (0, _devConnectUtils.parseMetroQrPayload)(rawValue);
     if (!parsed) {
       setError('QR code does not contain a supported Metro URL.');
@@ -60,9 +66,12 @@ function DevConnectQrScanner({
     }
     scannedRef.current = true;
     setError(null);
-    onScanHost(parsed.computerHost);
+    onScanTarget({
+      computerHost: parsed.computerHost,
+      metroPort: parsed.metroPort
+    });
     onClose();
-  }, [onClose, onScanHost]);
+  }, [onClose, onScanTarget]);
   const handleCameraKitRead = (0, _react.useCallback)(event => {
     handleScanned(event.nativeEvent?.codeStringValue ?? '');
   }, [handleScanned]);
@@ -72,63 +81,71 @@ function DevConnectQrScanner({
   const handleCameraError = (0, _react.useCallback)(_msg => {
     setCameraFailed(true);
   }, []);
-  if (!visible || !scanner) return null;
+  if (!visible || !scanner) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
     visible: visible,
     animationType: "slide",
+    presentationStyle: "fullScreen",
     onRequestClose: onClose,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: styles.container,
-      children: [!cameraFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(CameraErrorBoundary, {
-        onCameraError: handleCameraError,
-        children: scanner.kind === 'camera-kit' && scanner.CameraKit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(scanner.CameraKit.Camera, {
-          style: styles.camera,
-          cameraType: scanner.CameraKit.CameraType?.Back,
-          scanBarcode: true,
-          onReadCode: handleCameraKitRead,
-          showFrame: true,
-          laserColor: _colors.Colors.primary,
-          frameColor: _colors.Colors.primary,
-          allowedBarcodeTypes: ['qr']
-        }) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? /*#__PURE__*/(0, _jsxRuntime.jsx)(scanner.ExpoCamera.Camera, {
-          style: styles.camera,
-          onBarCodeScanned: handleExpoScanned,
-          barCodeScannerSettings: {
-            barCodeTypes: ['qr']
-          }
-        }) : null
-      }), cameraFailed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.cameraFallback,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.cameraFallbackText,
-          children: "Camera unavailable."
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.cameraFallbackHint,
-          children: "Please enter computer IP manually."
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.previewLayer,
+        children: [!cameraFailed && /*#__PURE__*/(0, _jsxRuntime.jsx)(CameraErrorBoundary, {
+          onCameraError: handleCameraError,
+          children: scanner.kind === 'camera-kit' && scanner.CameraKit ? /*#__PURE__*/(0, _jsxRuntime.jsx)(scanner.CameraKit.Camera, {
+            style: styles.camera,
+            cameraType: scanner.CameraKit.CameraType?.Back,
+            scanBarcode: true,
+            onReadCode: handleCameraKitRead,
+            showFrame: true,
+            laserColor: _colors.Colors.primary,
+            frameColor: _colors.Colors.primary,
+            allowedBarcodeTypes: ['qr']
+          }) : scanner.kind === 'expo-camera' && scanner.ExpoCamera ? /*#__PURE__*/(0, _jsxRuntime.jsx)(scanner.ExpoCamera.Camera, {
+            style: styles.camera,
+            onBarCodeScanned: handleExpoScanned,
+            barCodeScannerSettings: {
+              barCodeTypes: ['qr']
+            }
+          }) : null
+        }), cameraFailed && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.cameraFallback,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cameraFallbackText,
+            children: "Camera unavailable."
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.cameraFallbackHint,
+            children: "Please enter computer IP manually."
+          })]
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.footer,
-        children: [!cameraFailed && !error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.hint,
-          children: "Scan a Metro QR code."
-        }), error && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.error,
-          children: error
+        style: styles.topBar,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.titleGroup,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.title,
+            children: "Scan Metro QR"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            style: styles.subtitle,
+            children: "Expo or Metro URL"
+          })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
           style: styles.closeButton,
           onPress: onClose,
-          activeOpacity: 0.7,
+          activeOpacity: 0.75,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: styles.closeButtonText,
             children: "Close"
           })
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-        style: styles.topClose,
-        onPress: onClose,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.statusPill, error && styles.statusPillError],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: styles.topCloseText,
-          children: "Close"
+          style: [styles.statusText, error && styles.statusTextError],
+          children: error ?? 'Point the camera at exp:// or http:// Metro URL.'
         })
       })]
     })
@@ -139,11 +156,14 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1,
     backgroundColor: '#000'
   },
+  previewLayer: {
+    ..._reactNative.StyleSheet.absoluteFillObject
+  },
   camera: {
-    flex: 1
+    ..._reactNative.StyleSheet.absoluteFillObject
   },
   cameraFallback: {
-    flex: 1,
+    ..._reactNative.StyleSheet.absoluteFillObject,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 24
@@ -159,45 +179,70 @@ const styles = _reactNative.StyleSheet.create({
     color: 'rgba(255,255,255,0.6)',
     textAlign: 'center'
   },
-  footer: {
-    padding: 16,
-    backgroundColor: _colors.Colors.surface
+  topBar: {
+    position: 'absolute',
+    top: 44,
+    left: 16,
+    right: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingLeft: 14,
+    paddingRight: 8,
+    paddingVertical: 8,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.62)'
   },
-  hint: {
-    fontSize: 13,
-    color: _colors.Colors.textSecondary,
-    marginBottom: 12
+  titleGroup: {
+    flex: 1,
+    paddingRight: 10
   },
-  error: {
-    fontSize: 13,
-    color: _colors.Colors.error,
-    marginBottom: 12
+  title: {
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '700'
+  },
+  subtitle: {
+    color: 'rgba(255,255,255,0.68)',
+    fontSize: 11,
+    marginTop: 2
   },
   closeButton: {
     alignItems: 'center',
     justifyContent: 'center',
-    paddingVertical: 11,
-    borderRadius: 10,
-    backgroundColor: _colors.Colors.primary
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,255,255,0.14)'
   },
   closeButtonText: {
     color: '#fff',
     fontSize: 14,
     fontWeight: '600'
   },
-  topClose: {
+  statusPill: {
     position: 'absolute',
-    top: 48,
+    left: 16,
     right: 16,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 8,
-    backgroundColor: 'rgba(0,0,0,0.55)'
+    bottom: 30,
+    paddingHorizontal: 14,
+    paddingVertical: 11,
+    borderRadius: 12,
+    backgroundColor: 'rgba(0,0,0,0.62)'
   },
-  topCloseText: {
+  statusPillError: {
+    backgroundColor: `${_colors.Colors.error}22`,
+    borderWidth: 1,
+    borderColor: `${_colors.Colors.error}66`
+  },
+  statusText: {
     color: '#fff',
     fontSize: 13,
-    fontWeight: '600'
+    textAlign: 'center',
+    lineHeight: 18
+  },
+  statusTextError: {
+    color: '#fff'
   }
 });
 //# sourceMappingURL=DevConnectQrScanner.js.map