fix(rn-wallet): keep QR scanner "camera unavailable" message in bounds

[ignaciosantise]

Problem

On the rn_cli_wallet Scan screen, when camera permission is denied/unavailable, the message "Camera unavailable. Enable camera access in Settings." rendered as a single line that overflowed both screen edges (first/last words clipped) and appeared dimmed because it sat behind the dark scanner overlay.

Before	After
Text clipped at the edges, dimmed behind the overlay	Two lines, crisp, below the scan frame

Fix

Native (index.tsx + styles.ts)

• Draw the message on top of the dark overlay so it's legible (was painted over).
• Add paddingHorizontal + textAlign: 'center' so it stays within bounds.
• Break it into two lines and position it below the scan frame with margin, matching the existing "Scan a WalletConnect QR code" instruction placement (no longer overlaps the corner brackets).

Web (index.web.tsx)

• Moved the message out of the cutout (where it was centered inside the 280px square, too narrow for two lines) to a stacked column below the square: message on top, "Allow camera access" button beneath, centered with a gap.
• Removed the now-unused errorContainer style; allowCameraButton is now a flex child instead of absolutely positioned.

Testing

Manual, native-only screen (react-native-vision-camera). Verified on iPhone 17 simulator (iOS 26.4) with camera access denied: the message renders as two centered lines below the scan frame, fully on-screen and crisp. Web renders the equivalent placement below the square.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
react-native-walletkit	Ready	Preview	Sep 15, 2026 7:58pm UTC

2 Skipped Deployments

Project	Deployment	Actions	Updated
pos-demo	Ignored		Sep 15, 2026 7:58pm UTC
react-native-appkit	Ignored		Sep 15, 2026 7:58pm UTC

[claude]

Claude finished @ignaciosantise's task in 1m 24s —— View job

---

Code Review

• Gather context
• Read changed files
• Analyze diff
• Post review findings

---

Found 1 issue(s)

Issue 1: Redundant/conflicting color prop on error Text

ID: scan-errortext-dual-color-a3f1
File: wallets/rn_cli_wallet/src/screens/Scan/index.tsx:161
Severity: LOW
Category: code_quality

Context:

• Pattern: color="text-invert" (theme-resolved prop) and style={styles.errorText} (which sets color: 'white') are applied simultaneously to the same Text element.
• Risk: In React Native, style takes precedence, so text-invert is silently ignored today. But if the Text component merges them differently (e.g. applies theme colors last), the text could become a dark color rendered against the dark overlay — invisible.
• Impact: Potential unreadable error text on certain themes or if Text component behavior changes.
• Trigger: Camera permission denied on a device/theme where text-invert resolves to a non-white color.

Recommendation: Drop the redundant color prop — styles.errorText already ensures white:

<Text variant="lg-400" style={styles.errorText}>
  Camera unavailable.{'\n'}Enable camera access in Settings.
</Text>

Fix this →

---

Overall the fix is well-structured. Moving the error view above the SVG overlay (so it renders on top) is the right approach, and mirroring the instructionContainer positioning pattern below the scan frame is clean and consistent. The web restructuring (text + button stacked in a column below the cutout instead of inside it) is also correct.

[Copilot]

🔵 Needs a closer look

The web error block can be clipped on short viewports and needs responsive positioning before approval.

Pull request overview

Updates the rn_cli_wallet Scan screen so camera-unavailable messaging remains readable and within bounds on native and web.

Changes:

• Wraps and repositions the native error message above the scanner overlay.
• Moves web error content below the scan frame.
• Adds centered layout and spacing styles.

File summaries

File	Summary
wallets/rn_cli_wallet/src/screens/Scan/styles.ts	Adds native error layout and text styles.
wallets/rn_cli_wallet/src/screens/Scan/index.web.tsx	Repositions web error content below the scanner frame.
wallets/rn_cli_wallet/src/screens/Scan/index.tsx	Renders native error messaging above the overlay.

Review details

Suppressed comments (1)

wallets/rn_cli_wallet/src/screens/Scan/index.web.tsx:292

• On short web viewports this stacked error block can be clipped by the desktop frame. frameHeight is capped by 100vh - 32px and the frame uses overflow: hidden; for a 468px frame, this top is about 375px, leaving only ~93px for the two-line message, 16px gap, and padded button, so the bottom of the content is outside the frame. Please make the placement responsive for short frames (for example, measure/reposition the block or reduce the scan area/spacing) instead of always using this fixed offset.

            webStyles.errorBelow,
            { top: scanAreaTop + SCAN_AREA_SIZE + Spacing[8] },

• Files reviewed: 3/3 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.