Register Device Button: No Loading Feedback + Stale Label After Registration

Metadata

• Date: 2026-04-26
• Status: fixed
• Severity: medium
• Related issue/ticket: N/A
• Owner: N/A

About

Overview: - Bug 1: Pressing the "Register Device" button produces no visual feedback. The button should grey out immediately on press and remain greyed out while the user is in the native registration flow (Meta View app). Instead the button appears to do nothing until the user returns. - Bug 2: After completing the registration flow in Meta View and returning to the settings screen, the button label still reads "Register Device" instead of updating to "Unregister Device". The user must navigate away from and back into settings before the label updates. - These bugs degrade user trust: with no feedback the user may press the button multiple times, and after returning from registration the UI appears broken.

Technical Questions: - startRegistration() is an iOS AsyncFunction that calls Wearables.shared.startRegistration(), which opens the Meta View companion app via URL scheme and resolves in milliseconds — it does not wait for the user to complete pairing. - The registration completes only when Meta View redirects back via the encache:// URL scheme and WearablesAppDelegateSubscriber.handleUrl() processes the callback. - useFocusEffect fires on React Navigation focus events (in-app navigation). It does NOT fire when the iOS app returns to the foreground after being backgrounded (e.g., after the user comes back from Meta View). Therefore the stale-label fix using useFocusEffect alone is insufficient. - React Native's AppState API fires change events when the app transitions between active, inactive, and background states. An AppState listener is needed to detect the app-return and re-read registration state.

Resources: - main/app/app/settings.tsx — SettingsScreenContent component - main/app/wearables-module/ios/WearablesModule.swift — startRegistration() and startUnregistrationInternal() - main/app/wearables-module/ios/WearablesAppDelegateSubscriber.swift — URL callback handler that completes registration - main/app/__tests__/settings-screen.test.tsx — existing test suite

Steps to cause failure

flowchart LR
  A[User opens Settings] --> B[Presses Register Device]
  B --> C[startRegistration resolves in ms]
  C --> D[App transitions to background - Meta View opens]
  D --> E[User completes pairing in Meta View]
  E --> F[Meta View redirects back via encache:// URL]
  F --> G[App returns to foreground - Settings screen visible]
  G --> H[useFocusEffect does NOT fire - AppState not wired]
  H --> I[Button still shows Register Device - stale state]

System

flowchart TD
  SettingsScreen --> handleToggleRegistration
  handleToggleRegistration --> |"isRegistered=false"| startRegistration
  startRegistration --> |"resolves in ~ms"| NativeMetaView["Meta View App (OS level)"]
  NativeMetaView --> |"encache:// URL callback"| WearablesAppDelegateSubscriber
  WearablesAppDelegateSubscriber --> |"handleUrl()"| RegistrationComplete["isAnyDeviceRegisted() = true"]
  SettingsScreen --> |"useFocusEffect fires on RN nav focus only"| isAnyDeviceRegisted
  AppState --> |"change → active"| isAnyDeviceRegisted

Registration state is updated by the URL callback handler asynchronously. The settings screen must listen to AppState changes to detect the app-return and re-read registration state.

Reproduction Details

1. Open the Encache app on a device with no registered glasses.
2. Navigate to Settings.
3. Observe the "Register Device" button.
4. Press the "Register" button — observe: no visual feedback, button is not greyed out.
5. Complete pairing in Meta View and return to Encache Settings.
6. Observe: button still shows "Register" / "Register Device" — stale label.
7. Navigate away from Settings and back — button now correctly shows "Unregister".

Reproduction test (unit preferred): main/app/__tests__/settings-screen.test.tsx — new tests button remains disabled while app is backgrounded for registration and refreshes registration state when app returns to foreground

Notes for PR

Bug 1 fix: After startRegistration() resolves, do NOT call setIsToggling(false) in the finally block for the registration path. For the registration (not unregistration) path, leave isToggling = true to keep the button visually greyed out and disabled while the user completes pairing in Meta View. The AppState listener will reset isToggling = false and refresh isRegistered when the app returns to foreground.

Bug 2 fix: Add a useEffect that subscribes to AppState.addEventListener('change', ...). When the state transitions to 'active', call setIsRegistered(WearablesModule.isAnyDeviceRegisted()). Also reset isToggling to false on this transition so the button is interactive again. The listener should be cleaned up on unmount.

Audit Log

Verification

• [x] Reproduced failure before fix
• [x] Reproduction test fails before fix
• [x] Root cause identified with evidence
• [x] Fix applied at source (no workaround-only patch)
• [x] Reproduction test passes after fix
• [x] Reproduction path now passes
• [x] Regression test added/updated — 2 new tests + 1 updated test in main/app/__tests__/settings-screen.test.tsx
• [x] Verified no duplicate solved-bug log exists for same root cause