Focus Management with React Native

import * as React from "react";
import { ButtonRef, FocusManager } from "@youi/react-native-youi";

class PressMeButton extends React.Component {
  // When the button is loaded, we tell the FocusManager to set focus on it
  render() {
    return (
      <ButtonRef
        name="Btn-PressMe"
        onLoad={(ref: ButtonRef) => {
          ref && FocusManager.focus(ref);
        }}
        onFocus={() => console.log("I gained focus")}
      >
        <TextRef name="Text" text="Press Me!" />
      </ButtonRef>
    );
  }
}

import * as React from "react";
import { ViewRef, ButtonRef, FocusManager } from "@youi/react-native-youi";

class Alphabet extends React.Component {
  // Let's map all references upon loading.
  buttonRefs = {};
  onLoadBtn = (button: String, ref: ButtonRef) => (this.buttons = ref);

  // Now let's override right navigation to match the first image.
  componentDidMount() {
    FocusManager.setNextFocus(
      this.buttonRefs["a"],
      this.buttonRefs["b"],
      "right"
    );
    FocusManager.setNextFocus(
      this.buttonRefs["b"],
      this.buttonRefs["c"],
      "right"
    );
    FocusManager.setNextFocus(
      this.buttonRefs["c"],
      this.buttonRefs["d"],
      "right"
    );
    // We can make it go to the first element once hitting the end.
    FocusManager.setNextFocus(
      this.buttonRefs["d"],
      this.buttonRefs["a"],
      "right"
    );
  }

  render() {
    return (
      <ViewRef name="Container">
        <ButtonRef
          name="Btn-A"
          onLoad={ref => this.onLoadBtn("a", ref)}
          text="A"
        />
        <ButtonRef
          name="Btn-B"
          onLoad={ref => this.onLoadBtn("b", ref)}
          text="B"
        />
        <ButtonRef
          name="Btn-C"
          onLoad={ref => this.onLoadBtn("c", ref)}
          text="C"
        />
        <ButtonRef
          name="Btn-D"
          onLoad={ref => this.onLoadBtn("d", ref)}
          text="D"
        />
      </ViewRef>
    );
  }
}

import { ViewRef, ButtonRef, FocusManager } from "@youi/react-native-youi";

class Modal extends React.Component {
  rootViewRef: ViewRef;

  // Let's set the focus root to this view and its children.
  componentDidMount() {
    FocusManager.setFocusRoot(this.rootViewRef, true);
  }

  render() {
    return (
      <ViewRef name="Root" onLoad={(ref: ViewRef) => (this.rootViewRef = ref)}>
        <ButtonRef name="Btn-Ok" text="Okay" />
        <ButtonRef name="Btn-Cancel" text="Cancel" />
      </ViewRef>
    );
  }
}

import { ListRef, FocusManager } from "@youi/react-native-youi";

class FocusDescendans extends React.Component {
  rootViewRef: ViewRef;
  onChildFocused = () => {
    console.log("Look mom, I am focused");
  };

  render() {
    return (
      <ListRef
        name="MyList"
        onLoad={this.onLoad}
        onFocusInDescendants={this.onChildFocused}
      />
    );
  }
}

Bonus: There’s a Focus Debugger!

Remember when I said You.i Engine One was built for TV? Well, it has a nifty debugger with all sorts of cool options. The one place I go to every time I’m developing a feature for a TV platform is the focus debugger.

It essentially lets you understand where the focus is at the current moment, which element is the focus root, and what are the next focusable items in each direction.

I can’t express how many times this tool saved me hours of poking around and console logging.

Room for improvement

Although the FocusManager is a great tool, it does have a few drawbacks, mainly that its API is imperative. It makes playing nicely with React Native components somewhat troublesome with having to store the ref internally and then imperatively setting focus.

Here’s hoping future versions of You.i Engine One might have the capabilities to have declarative props on Refs like:

• lockFocus for ViewRefs to automatically setFocusRoot on that ViewRef when mounted and…
• focus for, similarly, telling the FocusManager to focus an element upon rendering it or updating it so we don’t have to store the ref and imperatively set the focus.

What About Vanilla React Native?

At this point, you’re probably wondering why we didn’t just stick to vanilla React Native. After all, the official React Native documentation has an entry about Building For TV Devices. There is both support for Android TV and tvOS. It states that they’ve added support for React Native apps to “just work” when targeting TVs.

It’s fantastic news for development teams tasked with going cross-platform but at the time of writing this piece, there are some shortcomings.

TVs are not the main focus of React Native.

From the beginning, the core platforms targeted by RN were mobile ones. It is understandable that, while RN apps could work on TVs, there is a lot of ground to cover, and it seems to not be actively on their pipeline.

In fact, there are some key issues worth noting are:

• Lack of Documentation: The material available for how to build an app for TVs using React Native is scarce. For instance, it barely references how to interact with UI elements. It mentions how touchable components and the TVEventHandler interface work for making items focusable and handling events. Yet, for someone who has never dealt with Focus Management, it is hard to get started. It is pretty much left to a long trial and error session.
• Few Platforms: Official support on React Native only covers Android TV and tvOS. If we are targeting an application for several platforms (like Roku, Xbox, PlayStation, etc…), then the official support falls short.

After working with You.i Engine One and having conversations with You.i TV’s React Native team, I know that they are working hard to improve their engine. So far, we at G2i have been pretty impressed with what we are able to achieve with it. As with any tool that is pushing the edge of what it is possible, they are making sure that those little issues get covered along the road.

This article was originally published here.