Revolutionizing Focus Management in TV Applications with React Native
Working on cross-platform TV app development is like going on a thrilling journey full of chances to do great things, but it comes with some unique challenges. One hurdle that continually takes the spotlight is focus management.
At the core of React Native tvOS, we’ve been exploring this complex area, going deep into focus management and pushing boundaries to make things better for the people developing apps and the users on TV platforms. Through this blog post, we unveil our remarkable journey, sharing the solutions we’ve come up with and the important progress we’ve made.
So, settle in, grab a warm drink, and accompany us as we navigate the captivating world of focus management.
I. How do we develop our app?
Before we plunge into the depths, let’s brush over our starting point. At XITE, we employ React Native tvOS to engineer our flagship product, our TV app. Despite its name, RN tvOS is not solely dedicated to Apple TV. Instead, it’s a fork of React Native supporting both Apple TV and Android TV platforms. It provides a sturdy array of tools and components designed to handle TV-specific functionalities like focus management and platform-specific controls.
Our gratitude goes out to the creator and maintainer, Douglas Lowder, who has made this possible. Kudos to you, Doug, for being an indispensable part of our ecosystem.
At XITE, we have two separate flavors targeting platforms including Android TV, Fire OS, and Tizen OS, with potential future expansions thanks to the flexibility of React Native. This framework empowers us to evolve our application from a single codebase with a small yet efficient team. However, one persistent hurdle was reducing our developer productivity — focus management.
II. The Ultimate Challenge: Focus Management
Unlike web and mobile platforms where users interact directly via touch or mouse clicks, TV users navigate using a remote control, leading to a fundamentally different interaction model. The focus needs to move intuitively from one element to another as the user navigates the app, a seemingly simple task that is challenging to perfect. Building a cross-platform application does make it even harder.
Platform Differences
Both Android and tvOS have their native focus engines determining the next element to focus, based on the current state and user input. However, their behaviors differ significantly.
Android’s focus engine searches for any element in proximity to the current focus. So, if there’s an item on the left, even if it doesn’t perfectly align with the current focus, it can still gain focus when the user navigates left. This approach gives Android flexibility but can also lead to unpredictable focus changes.
In contrast, tvOS values precision, changing focus only when an element perfectly aligns with the current focus in response to user input. If there is no such element, no focus change occurs. It expects you to programmatically guide the focus engine to make the right decision on unclear scenarios, resulting in more predictability.
While these platform discrepancies might appear negligible, they pose considerable hurdles in crafting cross-platform apps with seamless d-pad navigation and superior user experience. Because of that, creating tools to mitigate these differences and providing a more predictable and manageable focus across the platforms is an imperative mission.
Focus Redirection
TV apps often necessitate the focus to transition to the first element of a container when switching between focus containers. Ensuring this behavior, especially when the focus needs to return to the last focused element on subsequent visits, can be challenging if there’s not a built-in way to do that.
Native platforms provide some primitives for solving this but they’re not very suitable to unify under one cross-platform API.
Focus Recovery
In a dynamic application, elements on the screen may disappear or change based on user actions or data updates. This poses a challenge for focus management when the currently focused element might get removed from the screen, leaving the focus in a limbo state.
Native platforms have their strategies to deal with such situations. Android moves the focus to the item closest to the top-left corner, which can be quite unpredictable and disorienting for the user.
On the other hand, tvOS attempts automatic recovery which may lead to inconsistent focus behavior.
Lack of Support
As outlined above, React Native TV developers lack native components that support automatic focus redirection, further complicating focus management.
Cumulatively, these factors make focus management in TV applications a complex task, necessitating a solution that can unravel these complexities while providing a seamless and predictable experience for both users and developers.
Hence, we embarked on a mission to tailor the ultimate cross-platform focus management solution on React Native tvOS.
III. Forging the Ultimate Solutions: Our Journey
Our journey began with the existing TVFocusGuide component, a rudimentary but unstable — especially on Android — tool acting as a focus redirection point, just like UIFocusGuide.
We saw its potential to serve a broader range of use cases and committed ourselves to improve it. We laid the groundwork by stabilizing the component, ensuring its functionality across platforms. After six PRs (#420, #423, #426, #427, #437 #447) and two weeks of hard work, we established a robust foundation we can build upon.
`autoFocus`: Navigating Focus on Autopilot
The autoFocus (#450) was our next — and probably the biggest — achievement. It takes the burden of manual work off developers’ shoulders, managing ‘focus redirection’ and ‘focus recovery’ automatically. It directs the focus to the first element of the container as users navigate between focus containers and memorizes the last focused element, redirecting the focus back to it on subsequent visits.
In addition, autoFocus handles focus recovery by detecting when the focused element is removed from the screen and redirecting the focus to the first focusable element within the container. This feature simplifies focus management by providing a predictable cross-platform solution with no extra overhead, thanks to its native implementation.
Don’t forget to check out the PR descriptions for extra information: #450 (my favorite), #455. Especially #450 is like an article on its own.
`trapFocus`: Putting Focus on a Leash
The trapFocus feature (#465) was our response to a critical problem in TV applications: maintaining the focus within a specific region or container.
This feature confines the user’s navigation within a specified boundary until certain criteria have been met or a user action is made, preventing accidental navigation and user confusion. Imagine a dialog where you want the user’s interaction to be confined until they make a selection or dismiss the dialog, for instance.
However, another compelling reason for introducing trapFocus was the challenges presented by virtualization.
Virtualization is a performance optimization technique used when rendering large lists of items. It works by rendering only the items that are currently visible or about to become visible on the screen. As a result, not all items in a list are in the UI tree at all times. When items scroll off the screen, they’re removed from the UI tree, and new items are added.
This dynamic nature of virtualized lists presents a challenge for focus navigation, which relies on the existence of elements in the UI tree to determine where to move focus next. Consider a scenario where the user navigates through items faster than the speed at which new items are rendered. They could reach the end of the currently rendered portion of the list before the next items have a chance to load. Potentially, navigating to an element in the direction of the action, even though there are more elements in the list to visit in the list.
This is where trapFocus comes to the rescue. It ensures the focus stays within the intended boundary until you programmatically set it loose. By doing so, it mitigates issues related to focus navigation and enhances the user experience in applications.
Wrapping Up: The Journey Continues
In conclusion, Focus management in cross-platform TV application development presents a unique set of challenges that demand innovative solutions. Through our work at React Native tvOS, we’ve made considerable strides in enhancing focus management, leading to a more seamless and intuitive user and developer experience.
With the introduction of autoFocus and trapFocus, we've offered solutions that not only tame the focus navigation beast but also steer it on autopilot, providing developers the tools they need to craft applications with predictable and controllable focus management across different platforms, giving them more time to focus on the features instead of fighting the platforms.
We’ve made more contributions! So, we encourage you to check the PR descriptions to discover the rest!
But our journey doesn’t end here! We remain dedicated to pushing the boundaries further and exploring new frontiers in this space. We believe the potential for growth and improvement is immense, and we can’t wait to see what the future holds.
By addressing these issues, we have taken significant strides towards enhancing focus management in react-native-tvos. We invite you to explore these improvements and experience the revolution in focus management for yourself!
Special thanks to leonchabbey, SebastienChauvin, matias-sandell, wouterds and douglowder!
Special thanks to leonchabbey and SebastienChauvin for the initial Android implementation of TVFocusGuide and their very valuable ideas in the focus management area. Their work inspired us in the first place.
Special thanks to wouterds and matias-sandell for validating the ideas along the way, testing out the implementations, providing valuable feedback, and sending the good vibes!
Special thanks to douglowder for being incredibly responsive, all the fast PR reviews and testing.
And, of course, thanks to all the rest of the community members who helped us!
