`:focus` / `:focus-within` never fire on tvOS (focus engine not observed)

Author: slvvnCreated Jul 1, 2026Updated Sep 3, 2026
LabelsPlatform: iOSRepro provided

Description

On tvOS, the CSS pseudo-selectors :focus and :focus-within never fire for a focusable view navigated with the D-pad. The same happens on iOS, although focus states are less common.

Expected: when a focusable view gains focus, its :focus styles apply (as on web).

Actual: nothing happens. REAPseudoSelectorObserver.mm seems to observe only UITextField/UITextView, so the UIKit focus engine (UIFocusDidUpdateNotification) is never observed and no view can match :focus. On tvOS, where the focus engine is the primary navigation, native :focus/:focus-within are effectively unusable for that purpose.

Proposed fix: also observe UIFocusDidUpdateNotification (iOS and tvOS) so any focusable view participates. (:focus = ctx.nextFocusedView == view, :focus-within = focus entering/leaving the subtree). This matches how React Native itself detects focus (RCTViewComponentView -didUpdateFocusInContext:, nextFocusedView == self).

Steps to reproduce

  1. On tvOS, render an Animated Pressable with a CSS style whose :focus variant changes a visible property (e.g. borderColor).
  2. Move focus to it with the tvOS remote.
  3. The :focus style is never applied.

Snack or a link to a repository

https://github.com/slvvn/reanimated-tvos-focus-repro

Reanimated version

4.6.0-nightly-20260627-2baa894a7

Worklets version

0.10.0

React Native version

0.86 (react-native-tvos 0.86.0-2)

Platforms

iOS, tvOS

JavaScript runtime

Hermes

Workflow

Expo Dev Client

Architecture

No response

Reanimated feature flags

Yes

React Native release level

No response

Build type

No response

Device

No response

Host machine

No response

Device model

No response

Acknowledgements

Yes

Source: software-mansion/react-native-reanimated