No keyboard focus indicator on most components, and the three that have one each did it differently

Current behaviour

Most interactive components have no MD3 keyboard focus indicator.

On Android a keyboard user gets nothing. On web you get the browser's default outline, so not invisible, just not MD3 and different per browser.

The three that do have one each did it their own way. FAB has a local useFocusRing hook with a reanimated SharedValue and checks document.activeElement. Checkbox uses useState plus src/utils/isKeyboardFocusEvent.ts. Switch uses a SharedValue plus the same util. All three also carry their own copy of

const webNoOutline = { outline: "none" } as unknown as ViewStyle;

src/theme/tokens/sys/state.ts already has focusIndicator: { thickness: 3, outerOffset: 2 }. It is just not used in most places.

One thing to know before testing on iOS: onFocus never fires there for a View or Pressable. RCTViewComponentView.mm emits it from becomeFirstResponder only behind the enableImperativeFocus flag, which defaults off. Android has no such gate. So the FAB/Checkbox/Switch rings are already inert on iOS, and this is a web and Android fix.

Expected behaviour

A focus indicator on every interactive component, from one shared implementation and the existing tokens.

Easy to get wrong:

• Keyboard only. A mouse click must not light it. Pressable's own focused state fires for clicks too, see necolas/react-native-web#1849.
• Placement. MD3 puts the ring outside, hence outerOffset. But outside gets trimmed by a clipping ancestor sized to its content, and lands on the neighbour for things that sit flush. Chips in a horizontal ScrollView are the obvious case. material-web hits the same thing and has an inward variant for it.
• Colour. MD3 tonal palettes are luminance matched by tone, so a secondary ring drawn on top of another role at the same tone is about 1:1 and disappears. It needs to land somewhere with real contrast.

How to reproduce?

1. cd example && yarn start
2. Android, hardware keyboard or adb shell input keyevent KEYCODE_TAB. Tab through the Chip screen. Nothing. Same on List.Item, Segmented Buttons, Radio Button, a pressable Card.
3. FAB and Checkbox do show a ring, so focus itself works.
4. Web, same screens, you get the browser outline instead.

Android drops keyboard focus the moment you touch the screen. Tab again to get back.

Preview

Nothing to show as a still, it only exists while something is focused.

What have you tried so far?

• Read every component for existing focus handling to get the table, rather than trusting the ticket this came from.
• RN has outlineWidth / outlineColor / outlineStyle / outlineOffset since 0.77, implemented on both platforms. Measured on iOS sim, android-35 emulator and expo web: paints on all three, costs no layout, takes its radius from the view it sits on, survives that view's own overflow: 'hidden', negative offset draws inside. An ancestor's overflow: 'hidden' does clip it.
• Version floor is fine. The react-native-reanimated >= 4.3.0 peer dep already declares react-native: "0.81 - 0.85".

Your Environment