Property hasTVPreferredFocus has a 1 second delay on tvOS

BughasTVPreferredFocus.zip

🐛 Bug Report

We are using React Native to build an app for all platforms including Apple TV. We need the hasTVPreferredFocus property to show initial focus. But there seems to be a hard-coded delay of 1 sec in the code.

To Reproduce

Create a project for tvOS. Add a <View> component with a couple of <TouchableHighlight> components. Set the hasTVPreferredFocus property of the last one to true. The component will render but the last component will get the focus after a one second delay.

Expected Behavior

The last one should be focused in render, without the 1 second delay.

Code Example

const Test = () => (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <TouchableHighlight tvParallaxProperties={{ magnification: 1.5 }}>
      <Text style={{ color: 'white', fontSize: 50 }}>Button1</Text>
    </TouchableHighlight>
    <TouchableHighlight tvParallaxProperties={{ magnification: 1.5 }}>
      <Text style={{ color: 'white', fontSize: 50 }}>Button2</Text>
    </TouchableHighlight>
    <TouchableHighlight
      hasTVPreferredFocus
      tvParallaxProperties={{ magnification: 1.5 }}
    >
      <Text style={{ color: 'white', fontSize: 50 }}>Button3</Text>
    </TouchableHighlight>
  </View>
);

Native code with the delay.

- (void)setHasTVPreferredFocus:(BOOL)hasTVPreferredFocus
{
  _hasTVPreferredFocus = hasTVPreferredFocus;
  if (hasTVPreferredFocus) {
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
      UIView *rootview = self;
      while (![rootview isReactRootView] && rootview != nil) {
        rootview = [rootview superview];
      }
      if (rootview == nil) return;

      rootview = [rootview superview];

      [(RCTRootView *)rootview setReactPreferredFocusedView:self];
      [rootview setNeedsFocusUpdate];
      [rootview updateFocusIfNeeded];
    });
  }
}

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 7.79 GB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.14.2 - /usr/local/opt/node@10/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/opt/node@10/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.58.4 => 0.58.4 
    npmGlobalPackages:
      react-native-cli: 2.0.1

[hufkens]

Probably because react-native doesn’t use AutoLayout, but the FocusEngine works with the AutoLayout there could be a delay. Problem is that having a 1 second delay is really weird and unusable if you want to use it.

Also we miss the FocusGuide in react-native. The FocusGuide is a component that can be used to direct the focus from one component to another if there is no direct line of sight (up, down, left, right).

We found a way to directly set focus to a RCTView:

const RCTUIManager = NativeModules.UIManager;
RCTUIManager.updateView(tag, 'RCTView', {
    hasTVPreferredFocus: true,
 });

[douglowder]

This is fixed in the new community repo for tvOS (https://github.com/react-native-community/react-native-tvos/pull/2), and is part of the first NPM release (react-native-tvos@0.59.8-0). See this doc for instructions.