How to return focus to a card when navigating back from pages?

Vega Open Beta Q&A
1

Hello guys,
For the past few days I’ve been trying to understand how the mechanism of returning focus to a card works in TV apps.

I’ve implemented my own solution using a FocusManager class that stores a reference to the focused card. When I navigate back, I call that reference and try to restore focus. It works sometimes, but often I lose the reference and the focus is not restored.

In demo apps, when you navigate back, the focus feels almost instant — like the previous screen is still “alive” in the background and the focus state was never lost.

Is there a known pattern, concept, or article about how this is usually implemented?
I’d like to understand the proper mechanism behind this.

Best regards

3

Hi @Nemanja1,

Below are some suggestions which might help:

  • Check out Focus management suggestions from here
  • Try TVFocusGuideView with autoFocus as mentioned here
  • Refer Focus manager sample code from here
  • If you are using JS stack navigator createStackNavigator, try Native Stack Navigator createNativeStackNavigator from here. If you suspect that screens are unmounted, try disabling detachInactiveScreens

If issue still persists, would you be able to create a detailed bug report here with a sample code which can reproduce this issue?

Regards,
Siva

4

Thank you for the feedback. I’ve read through the documentation and followed the recommended approach for this feature.

In my implementation I used the FocusManager utility class from the example. I initially tried using the useFocusEffect hook, but in my case it felt too slow when navigating back, the screen mounts first and the focus is applied slightly after, which causes a visible flicker for a split second.

To avoid this, I switched to using FocusManager directly and trigger the focus explicitly when navigating back. I also use a small setTimeout to ensure the focus is applied at the correct moment in the navigation.

1 Like