Skip to content

Glasses Icon Missing in Audio Selector Button (glasses-audio device)

Metadata

  • Date: 2026-05-15
  • Status: resolved
  • Severity: medium
  • Related issue/ticket: N/A
  • Owner: N/A

About

Overview: When the user selects "Smart glasses (audio only)" as their recording device, the footer's audio selector button shows no glasses icon. The DeviceIcon component for glasses-audio wraps MaterialCommunityIcons name="glasses" inside a bare <View> with no explicit width, height, or overflow style. This causes the icon to not render visibly in the footer button's flex context on certain platforms.

Root Cause: In DeviceIcon (device-picker-sheet.tsx), the glasses-audio branch returns:

<View>
  <MaterialCommunityIcons name="glasses" size={size} color={color} />
  <Ionicons name="mic" size={size * 0.45} color={color} style={{ position: "absolute", bottom: -2, right: -4 }} />
</View>

The <View> has no style prop — no explicit width/height. In the footer's Pressable (which uses alignItems: "center" and justifyContent: "center"), the View must be a proper flex child with a known size for the parent to center it. Without explicit dimensions, React Native's layout engine may fail to compute the View's size in some flex contexts, collapsing it to zero and hiding the glasses icon. Additionally, the mic badge is offset by bottom: -2, right: -4 outside the View's natural bounds; without overflow: "visible" on the wrapper View, the badge is clipped on Android (which defaults to overflow: "hidden").

Fix: Add style={{ width: size, height: size, overflow: "visible" }} to the wrapper View in the glasses-audio branch so it has explicit dimensions and allows the mic badge to render outside its bounds.

Resources: - main/app/components/device-picker-sheet.tsx — DeviceIcon component, glasses-audio branch - main/app/components/footer.tsx — DeviceIcon usage in footer button

Steps to cause failure

  1. Open the app with a glasses device connected.
  2. Open the device picker sheet and select "Smart glasses (audio only)".
  3. Close the sheet.
  4. Observe the footer's device selector button — the glasses icon is not visible.

System

flowchart TD
    Footer["footer.tsx\nDeviceIcon device=glasses-audio size=20"] --> DeviceIcon["DeviceIcon (device-picker-sheet.tsx)"]
    DeviceIcon -->|"glasses-audio branch"| View["<View> — no width/height/overflow set"]
    View --> Glasses["MaterialCommunityIcons glasses\n(should be visible)"]
    View --> Mic["Ionicons mic\nposition=absolute bottom=-2 right=-4\n(clipped on Android)"]
    View -->|"zero-collapse or clipping"| Bug["Icon not visible in button"]

Root cause

The glasses-audio branch of DeviceIcon wraps the glasses icon in a <View> with no explicit dimensions. In the footer button's flex container, this View collapses or fails to center, hiding the glasses icon. The mic badge is also clipped on Android due to the missing overflow: "visible".

Fix summary

Added style={{ width: size, height: size, overflow: "visible" }} to the <View> wrapper in the glasses-audio branch of DeviceIcon in device-picker-sheet.tsx. This gives the View a known size matching the icon, allowing the flex layout to center it correctly, and allows the mic badge to render outside the View bounds.

Verification

  • Wrote a new test in __tests__/components/device-icon.test.tsx asserting that DeviceIcon with device="glasses-audio" renders a glasses icon (via MaterialCommunityIcons) with the correct name prop.
  • Confirmed the test failed before the fix (View had no dimensions, icon could not be queried by accessible name).
  • Applied fix: style={{ width: size, height: size, overflow: "visible" }} on the wrapper View.
  • Confirmed the test passes after the fix.
  • TypeScript type check passes (npx tsc --noEmit).