react-native-tvos 0.68.1-1 → 0.68.2-2

package/Libraries/Components/DrawerAndroid/AndroidDrawerLayoutNativeComponent.js

@@ -8,17 +8,17 @@
  * @flow strict-local
  */
 
-import type {ViewProps} from 'react-native/Libraries/Components/View/ViewPropTypes';
-import type {ColorValue} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
+import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {
   WithDefault,
   DirectEventHandler,
   Int32,
   Float,
-} from 'react-native/Libraries/Types/CodegenTypes';
-import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+} from '../../Types/CodegenTypes';
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import * as React from 'react';
 
 type DrawerStateEvent = $ReadOnly<{|

package/Libraries/Components/Pressable/Pressable.js

@@ -36,9 +36,10 @@ import type {
   PressEvent,
 } from '../../Types/CoreEventTypes';
 import View from '../View/View';
-import typeof TVParallaxPropertiesType from '../AppleTV/TVViewPropTypes';
+import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
 import Platform from '../../Utilities/Platform';
-import {tvFocusEventHandler} from '../AppleTV/TVFocusEventHandler';
+import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 
 type ViewStyleProp = $ElementType<React.ElementConfig<typeof View>, 'style'>;
 
@@ -212,6 +213,11 @@ function Pressable(props: Props, forwardedRef): React.Node {
     onHoverIn,
     onHoverOut,
     isTVSelectable,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
     onBlur,
     onFocus,
     onLongPress,
@@ -354,6 +360,11 @@ function Pressable(props: Props, forwardedRef): React.Node {
       {...restPropsWithDefaults}
       {...eventHandlers}
       ref={viewRef}
+      nextFocusDown={tagForComponentOrHandle(props.nextFocusDown)}
+      nextFocusForward={tagForComponentOrHandle(props.nextFocusForward)}
+      nextFocusLeft={tagForComponentOrHandle(props.nextFocusLeft)}
+      nextFocusRight={tagForComponentOrHandle(props.nextFocusRight)}
+      nextFocusUp={tagForComponentOrHandle(props.nextFocusUp)}
       isTVSelectable={isTVSelectable !== false && accessible !== false}
       style={typeof style === 'function' ? style({pressed, focused}) : style}
       tvParallaxProperties={tvParallaxProperties}

package/Libraries/Components/Pressable/useAndroidRippleForView.js

@@ -12,7 +12,9 @@ import invariant from 'invariant';
 import {Commands} from '../View/ViewNativeComponent';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
-import {Platform, View, processColor} from 'react-native';
+import Platform from '../../Utilities/Platform';
+import View from '../../Components/View/View';
+import processColor from '../../StyleSheet/processColor';
 import * as React from 'react';
 import {useMemo} from 'react';
 

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+const React = require('react');
+const ReactNative = require('react-native');
+import ReactNativeShims from '../../Renderer/shims/ReactNative';
+const Platform = require('../../Utilities/Platform');
+import {Commands} from '../View/ViewNativeComponent';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+type TVFocusGuideViewProps = $ReadOnly<{
+  ...ViewProps,
+
+  /**
+   * The views the focus should go to
+   */
+  destinations: ?(Object[]),
+
+  /**
+   * How the TVFocusGuideView content safe padding should be applied. "null" to disable it.
+   */
+  safePadding?: 'vertical' | 'horizontal' | 'both' | null,
+}>;
+
+const TVFocusGuideView = (props: TVFocusGuideViewProps): React.Node => {
+  const safePadding =
+    props.safePadding === undefined ? 'both' : props.safePadding;
+  const focusGuidePadding =
+    safePadding === 'both'
+      ? {padding: 1}
+      : safePadding === 'vertical'
+      ? {paddingVertical: 1}
+      : safePadding === 'horizontal'
+      ? {paddingHorizontal: 1}
+      : null;
+
+  /**
+   * The client specified layout(using 'style' prop) should be applied the container view ReactNative.View.
+   * And the focusGuide's layout should be overridden to wrap it fully inside the container view.
+   * For example, if the client specifies 'marginLeft' property in the style prop,
+   * then the TVFocusGuideView will apply the 'marginLeft' for both the parentView and the focusGuideView.
+   * and so, the left margin is getting added twice and UI becomes incorrect.
+   * The same is applicable for other layout properties.
+   */
+  const focusGuideStyle = [focusGuidePadding, props.style, styles.focusGuide];
+
+  return (
+    /**
+     * The container needs to have at least a width of 1 and a height of 1.
+     * Also, being the container, it shouldn't be possible to give it some padding.
+     */
+    <ReactNative.View style={[props.style, styles.container]}>
+      {Platform.isTV ? (
+        Platform.isTVOS ? (
+          <FocusGuideViewTVOS {...props} style={focusGuideStyle} />
+        ) : (
+          <FocusGuideViewAndroidTV {...props} style={focusGuideStyle} />
+        )
+      ) : (
+        props.children
+      )}
+    </ReactNative.View>
+  );
+};
+
+const FocusGuideViewTVOS = (props: TVFocusGuideViewProps) => {
+  const focusGuideRef = React.useRef(null);
+
+  React.useEffect(() => {
+    const nativeDestinations = (props.destinations || [])
+      .map(d => ReactNative.findNodeHandle(d))
+      .filter(c => c !== 0 && c !== null && c !== undefined);
+    const hostComponentRef = ReactNativeShims.findHostInstance_DEPRECATED(
+      focusGuideRef?.current,
+    );
+    hostComponentRef &&
+      Commands.setDestinations(hostComponentRef, nativeDestinations);
+  }, [props.destinations]);
+
+  return (
+    <ReactNative.View style={props.style} ref={focusGuideRef}>
+      {props.children}
+    </ReactNative.View>
+  );
+};
+
+const FocusGuideViewAndroidTV = (props: TVFocusGuideViewProps) => {
+  const nativeDestinations = React.useMemo(
+    () =>
+      (props.destinations || [])
+        .map(d => ReactNative.findNodeHandle(d))
+        .filter(c => c !== 0 && c !== null && c !== undefined),
+    [props.destinations],
+  );
+
+  return (
+    <ReactNative.View
+      style={props.style}
+      focusable={props.focusable ?? true}
+      destinations={nativeDestinations}
+    >
+      {props.children}
+    </ReactNative.View>
+  );
+};
+
+const styles = ReactNative.StyleSheet.create({
+  container: {
+    minWidth: 1,
+    minHeight: 1,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+  },
+  focusGuide: {
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    marginLeft: 0,
+    marginTop: 0,
+    marginRight: 0,
+    marginBottom: 0,
+  },
+});
+
+module.exports = TVFocusGuideView;

package/Libraries/Components/Touchable/TVTouchable.js

@@ -18,7 +18,7 @@ import type {
   PressEvent,
 } from '../../Types/CoreEventTypes';
 import Platform from '../../Utilities/Platform';
-import TVEventHandler from '../../Components/AppleTV/TVEventHandler';
+import TVEventHandler from '../../Components/TV/TVEventHandler';
 
 type TVTouchableConfig = $ReadOnly<{|
   getDisabled: () => boolean,

package/Libraries/Components/Touchable/Touchable.js

@@ -15,7 +15,7 @@ import Platform from '../../Utilities/Platform';
 import Position from './Position';
 import UIManager from '../../ReactNative/UIManager';
 import SoundManager from '../Sound/SoundManager';
-import {tvFocusEventHandler} from '../AppleTV/TVFocusEventHandler';
+import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
 
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -19,6 +19,8 @@ import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 import Platform from '../../Utilities/Platform';
 import View from '../../Components/View/View';
 import type {ViewProps} from '../../Components/View/ViewPropTypes';
+import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
 type AndroidProps = $ReadOnly<{|
@@ -29,9 +31,21 @@ type AndroidProps = $ReadOnly<{|
   nextFocusUp?: ?number,
 |}>;
 
+type TVProps = $ReadOnly<{|
+  hasTVPreferredFocus?: ?boolean,
+  isTVSelectable?: ?boolean,
+  tvParallaxProperties?: ?TVParallaxPropertiesType,
+  nextFocusDown?: ?number,
+  nextFocusForward?: ?number,
+  nextFocusLeft?: ?number,
+  nextFocusRight?: ?number,
+  nextFocusUp?: ?number,
+|}>;
+
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...AndroidProps,
+  ...TVProps,
   ...ViewProps,
 
   activeOpacity?: ?number,
@@ -313,11 +327,11 @@ class TouchableHighlight extends React.Component<Props, State> {
         hasTVPreferredFocus={this.props.hasTVPreferredFocus === true}
         isTVSelectable={this.props.isTVSelectable !== false && this.props.accessible !== false}
         tvParallaxProperties={this.props.tvParallaxProperties}
-        nextFocusDown={this.props.nextFocusDown}
-        nextFocusForward={this.props.nextFocusForward}
-        nextFocusLeft={this.props.nextFocusLeft}
-        nextFocusRight={this.props.nextFocusRight}
-        nextFocusUp={this.props.nextFocusUp}
+        nextFocusDown={tagForComponentOrHandle(this.props.nextFocusDown)}
+        nextFocusForward={tagForComponentOrHandle(this.props.nextFocusForward)}
+        nextFocusLeft={tagForComponentOrHandle(this.props.nextFocusLeft)}
+        nextFocusRight={tagForComponentOrHandle(this.props.nextFocusRight)}
+        nextFocusUp={tagForComponentOrHandle(this.props.nextFocusUp)}
         focusable={
           this.props.focusable !== false && this.props.onPress !== undefined
         }

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -20,6 +20,7 @@ import type {PressEvent} from '../../Types/CoreEventTypes';
 import Platform from '../../Utilities/Platform';
 import View from '../../Components/View/View';
 import processColor from '../../StyleSheet/processColor';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 import invariant from 'invariant';
 
@@ -291,11 +292,11 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           this.props.onPress !== undefined &&
           !this.props.disabled,
         nativeID: this.props.nativeID,
-        nextFocusDown: this.props.nextFocusDown,
-        nextFocusForward: this.props.nextFocusForward,
-        nextFocusLeft: this.props.nextFocusLeft,
-        nextFocusRight: this.props.nextFocusRight,
-        nextFocusUp: this.props.nextFocusUp,
+        nextFocusDown: tagForComponentOrHandle(this.props.nextFocusDown),
+        nextFocusForward: tagForComponentOrHandle(this.props.nextFocusForward),
+        nextFocusLeft: tagForComponentOrHandle(this.props.nextFocusLeft),
+        nextFocusRight: tagForComponentOrHandle(this.props.nextFocusRight),
+        nextFocusUp: tagForComponentOrHandle(this.props.nextFocusUp),
         onLayout: this.props.onLayout,
         testID: this.props.testID,
       },
@@ -318,7 +319,7 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
           }
         },
         onPress: event => {
-          if (this.props.onPress != null) {
+          if (this.props.onPress != null && Platform.OS !== 'android') {
             this.props.onPress(event);
           }
         },

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -19,8 +19,8 @@ import Easing from '../../Animated/Easing';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import flattenStyle from '../../StyleSheet/flattenStyle';
 import Platform from '../../Utilities/Platform';
-import typeof TVParallaxPropertiesType from '../AppleTV/TVViewPropTypes';
-import tagForComponentOrHandle from '../AppleTV/tagForComponentOrHandle';
+import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 
 import * as React from 'react';
 

package/Libraries/Components/View/ReactNativeViewViewConfig.js

@@ -11,7 +11,7 @@
 import type {ViewConfig} from '../../Renderer/shims/ReactNativeTypes';
 import ReactNativeViewViewConfigAndroid from './ReactNativeViewViewConfigAndroid';
 import ReactNativeViewViewConfigAppleTV from './ReactNativeViewViewConfigAppleTV';
-import {Platform} from 'react-native';
+import Platform from '../../Utilities/Platform';
 
 const ReactNativeViewConfig: ViewConfig = {
   uiViewClassName: 'RCTView',

package/Libraries/Components/View/ViewPropTypes.js

@@ -21,7 +21,7 @@ import type {
 import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {Node} from 'react';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import type {TVViewProps} from '../AppleTV/TVViewPropTypes';
+import type {TVViewProps} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityRole,
   AccessibilityState,

package/Libraries/Lists/VirtualizedSectionList.js

@@ -11,7 +11,8 @@
 import invariant from 'invariant';
 import type {ViewToken} from './ViewabilityHelper';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
-import {View, VirtualizedList} from 'react-native';
+import View from '../Components/View/View';
+import VirtualizedList from './VirtualizedList';
 import * as React from 'react';
 
 type Item = any;

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -10,9 +10,11 @@
 
 import {ansiToJson} from 'anser';
 import * as React from 'react';
-import {StyleSheet, Text, View} from 'react-native';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import View from '../../Components/View/View';
 
-import type {TextStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
+import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 
 // Afterglow theme from https://iterm2colorschemes.com/
 const COLORS = {

package/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js

@@ -18,8 +18,8 @@ if (__DEV__) {
 "use strict";
 
 var React = require("react");
-require("react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore");
-var ReactNativePrivateInterface = require("react-native/Libraries/ReactPrivate/ReactNativePrivateInterface");
+require("../../ReactPrivate/ReactNativePrivateInitializeCore");
+var ReactNativePrivateInterface = require("../../ReactPrivate/ReactNativePrivateInterface");
 var Scheduler = require("scheduler");
 
 var ReactSharedInternals =

package/Libraries/Renderer/shims/createReactNativeComponentClass.js

@@ -13,7 +13,7 @@
 
 'use strict';
 
-import {ReactNativeViewConfigRegistry} from 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface';
+import {ReactNativeViewConfigRegistry} from '../../ReactPrivate/ReactNativePrivateInterface';
 import {type ViewConfig} from './ReactNativeTypes';
 
 const {register} = ReactNativeViewConfigRegistry;

package/Libraries/Utilities/BackHandler.ios.js

@@ -14,7 +14,7 @@
 'use strict';
 
 const Platform = require('./Platform');
-const TVEventHandler = require('../Components/AppleTV/TVEventHandler');
+const TVEventHandler = require('../Components/TV/TVEventHandler');
 
 type BackPressEventName = 'backPress' | 'hardwareBackPress';
 

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -35,13 +35,11 @@ export type ReactTestRendererJSON =
    * delete this comment and run Flow. */
   $ReturnType<ReactTestRenderer.create.toJSON>;
 
-const {
-  Switch,
-  Text,
-  TextInput,
-  View,
-  VirtualizedList,
-} = require('react-native');
+const Switch = require('../Components/Switch/Switch');
+const Text = require('../Text/Text');
+const TextInput = require('../Components/TextInput/TextInput');
+const View = require('../Components/View/View');
+const VirtualizedList = require('../Lists/VirtualizedList');
 
 function byClickable(): Predicate {
   return withMessage(

package/README.md

@@ -201,7 +201,12 @@ class Game2048 extends React.Component {
   - `enableTVMenuKey`/`disableTVMenuKey`:  Method to enable and disable the menu key gesture recognizer, in order to fix an issue with Apple's guidelines for menu key navigation (see https://github.com/facebook/react-native/issues/18930).  The `RNTester` app uses these methods to implement correct menu key behavior for back navigation.
   - `enableTVPanGesture`/`disableTVPanGesture`: Methods to enable and disable detection of finger touches that pan across the touch surface of the Siri remote. See `TVEventHandlerExample` in the `RNTester` app for a demo.
 
-- _TVFocusGuideView_: This component provides support for Apple's `UIFocusGuide` API, to help ensure that focusable controls can be navigated to, even if they are not directly in line with other controls.  An example is provided in `RNTester` that shows two different ways of using this component.
+- _TVFocusGuideView_: This component provides support for Apple's `UIFocusGuide` API and is implemented in the same way for Android TV, to help ensure that focusable controls can be navigated to, even if they are not directly in line with other controls.  An example is provided in `RNTester` that shows two different ways of using this component.
+
+| Prop | Value | Description | 
+|---|---|---|
+| destinations | any[] | Array of `Component`s to register as destinations of the FocusGuideView | 
+| safePadding | 'both' (default) \| 'vertical' \| 'horizontal' \| null | When the FocusGuide children are exactly the same size as the FocusGuide's container, the focus will almost certainly be given directly to the children without going through the FocusGuide. This prop make sure it doesn't happen by adding a padding of 1 in all directions.<br />"null" to disable it. |
 
 - _Next Focus Direction_: the props `nextFocus*` on `View` should work as expected on iOS too (previously android only). One caveat is that if there is no focusable in the `nextFocusable*` direction next to the starting view, iOS doesn't check if we want to override the destination. 
 

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.h

@@ -71,6 +71,10 @@ NS_ASSUME_NONNULL_BEGIN
 
 #if TARGET_OS_TV
 @property(nonatomic, nullable) UIFocusGuide *focusGuide;
+@property(nonatomic, nullable) UIFocusGuide *focusGuideUp;
+@property(nonatomic, nullable) UIFocusGuide *focusGuideDown;
+@property(nonatomic, nullable) UIFocusGuide *focusGuideLeft;
+@property(nonatomic, nullable) UIFocusGuide *focusGuideRight;
 #endif
 
 /**

package/React/Fabric/Mounting/ComponentViews/View/RCTViewComponentView.mm

@@ -309,41 +309,92 @@ using namespace facebook::react;
   return _props->isTVSelectable;
 }
 
-- (NSArray<id<UIFocusEnvironment>> *)preferredFocusEnvironments {
-  if (_nextFocusActiveTarget == nil) return [super preferredFocusEnvironments];
-  UIView * nextFocusActiveTarget = _nextFocusActiveTarget;
-  _nextFocusActiveTarget = nil;
-  NSArray<id<UIFocusEnvironment>> * focusEnvironment = @[nextFocusActiveTarget];
-  return focusEnvironment;
-}
-
-- (BOOL) shouldUpdateFocusInContext:(UIFocusUpdateContext *)context {
-  if (self.isFocused) {
-    if (_nextFocusUp != nil && context.focusHeading == UIFocusHeadingUp) {
-      self->_nextFocusActiveTarget = _nextFocusUp;
-      [self setNeedsFocusUpdate];
-      return false;
+// In tvOS, to support directional focus APIs, we add a UIFocusGuide for each
+// side of the view where a nextFocus has been set. Set layout constraints to
+// make the guide 1 px thick, and set the destination to the nextFocus object.
+//
+// This is only done once the view is focused.
+//
+- (void)enableDirectionalFocusGuides
+{
+  if (self->_nextFocusUp != nil) {
+    if (self.focusGuideUp == nil) {
+      self.focusGuideUp = [UIFocusGuide new];
+      [[self containingRootView] addLayoutGuide:self.focusGuideUp];
+
+      [self.focusGuideUp.bottomAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
+      [self.focusGuideUp.widthAnchor constraintEqualToAnchor:self.widthAnchor].active = YES;
+      [self.focusGuideUp.heightAnchor constraintEqualToConstant:1.0].active = YES;
+      [self.focusGuideUp.leftAnchor constraintEqualToAnchor:self.leftAnchor].active = YES;
     }
-    if (_nextFocusDown != nil && context.focusHeading == UIFocusHeadingDown) {
-      self->_nextFocusActiveTarget = _nextFocusDown;
-      [self setNeedsFocusUpdate];
-      return false;
+
+    self.focusGuideUp.preferredFocusEnvironments = @[self->_nextFocusUp];
+  }
+
+  if (self->_nextFocusDown != nil) {
+    if (self.focusGuideDown == nil) {
+      self.focusGuideDown = [UIFocusGuide new];
+      [[self containingRootView] addLayoutGuide:self.focusGuideDown];
+
+      [self.focusGuideDown.topAnchor constraintEqualToAnchor:self.bottomAnchor].active = YES;
+      [self.focusGuideDown.widthAnchor constraintEqualToAnchor:self.widthAnchor].active = YES;
+      [self.focusGuideDown.heightAnchor constraintEqualToConstant:1.0].active = YES;
+      [self.focusGuideDown.leftAnchor constraintEqualToAnchor:self.leftAnchor].active = YES;
     }
-    if (_nextFocusLeft != nil && context.focusHeading == UIFocusHeadingLeft) {
-      self->_nextFocusActiveTarget = _nextFocusLeft;
-      [self setNeedsFocusUpdate];
-      return false;
+
+    self.focusGuideDown.preferredFocusEnvironments = @[self->_nextFocusDown];
+  }
+
+  if (self->_nextFocusLeft != nil) {
+    if (self.focusGuideLeft == nil) {
+      self.focusGuideLeft = [UIFocusGuide new];
+      [[self containingRootView] addLayoutGuide:self.focusGuideLeft];
+
+      [self.focusGuideLeft.topAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
+      [self.focusGuideLeft.widthAnchor constraintEqualToConstant:1.0].active = YES;
+      [self.focusGuideLeft.heightAnchor constraintEqualToAnchor:self.heightAnchor].active = YES;
+      [self.focusGuideLeft.rightAnchor constraintEqualToAnchor:self.leftAnchor].active = YES;
     }
-    if (_nextFocusRight != nil && context.focusHeading == UIFocusHeadingRight) {
-      self->_nextFocusActiveTarget = _nextFocusRight;
-      [self setNeedsFocusUpdate];
-      return false;
+
+    self.focusGuideLeft.preferredFocusEnvironments = @[self->_nextFocusLeft];
+  }
+
+  if (self->_nextFocusRight != nil) {
+    if (self.focusGuideRight == nil) {
+      self.focusGuideRight = [UIFocusGuide new];
+      [[self containingRootView] addLayoutGuide:self.focusGuideRight];
+
+      [self.focusGuideRight.topAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
+      [self.focusGuideRight.widthAnchor constraintEqualToConstant:1.0].active = YES;
+      [self.focusGuideRight.heightAnchor constraintEqualToAnchor:self.heightAnchor].active = YES;
+      [self.focusGuideRight.leftAnchor constraintEqualToAnchor:self.rightAnchor].active = YES;
     }
-    self->_nextFocusActiveTarget = nil;
-    return true;
+
+    self.focusGuideRight.preferredFocusEnvironments = @[self->_nextFocusRight];
+  }
+}
+// Called when focus leaves this view -- disable the directional focus guides
+// (if they exist) so that they don't interfere with focus navigation from
+// other views
+//
+- (void)disableDirectionalFocusGuides
+{
+  if (self.focusGuideUp != nil) {
+    [[self containingRootView] removeLayoutGuide:self.focusGuideUp];
+    self.focusGuideUp = nil;
+  }
+  if (self.focusGuideDown != nil) {
+    [[self containingRootView] removeLayoutGuide:self.focusGuideDown];
+    self.focusGuideDown = nil;
+  }
+  if (self.focusGuideLeft != nil) {
+    [[self containingRootView] removeLayoutGuide:self.focusGuideLeft];
+    self.focusGuideLeft = nil;
+  }
+  if (self.focusGuideRight != nil) {
+    [[self containingRootView] removeLayoutGuide:self.focusGuideRight];
+    self.focusGuideRight = nil;
   }
-  self->_nextFocusActiveTarget = nil;
-  return true;
 }
 
 - (void)didUpdateFocusInContext:(UIFocusUpdateContext *)context withAnimationCoordinator:(UIFocusAnimationCoordinator *)coordinator
@@ -353,11 +404,13 @@ using namespace facebook::react;
     }
     if (context.nextFocusedView == self && self.isUserInteractionEnabled ) {
       [self becomeFirstResponder];
+      [self enableDirectionalFocusGuides];
       [coordinator addCoordinatedAnimations:^(void){
           [self addParallaxMotionEffects];
           [self sendFocusNotification:context];
       } completion:^(void){}];
     } else {
+      [self disableDirectionalFocusGuides];
       [coordinator addCoordinatedAnimations:^(void){
           [self removeParallaxMotionEffects];
           [self sendBlurNotification:context];

package/React/Views/RCTTVView.h

@@ -32,11 +32,15 @@
 /**
  * Focus direction tags
  */
-@property (nonatomic, strong) RCTTVView * nextFocusUp;
-@property (nonatomic, strong) RCTTVView * nextFocusDown;
-@property (nonatomic, strong) RCTTVView * nextFocusLeft;
-@property (nonatomic, strong) RCTTVView * nextFocusRight;
-@property (nonatomic, strong) RCTTVView * nextFocusActiveTarget;
+@property (nonatomic, weak) RCTTVView * nextFocusUp;
+@property (nonatomic, weak) RCTTVView * nextFocusDown;
+@property (nonatomic, weak) RCTTVView * nextFocusLeft;
+@property (nonatomic, weak) RCTTVView * nextFocusRight;
+
+@property (nonatomic, strong) UIFocusGuide * focusGuideUp;
+@property (nonatomic, strong) UIFocusGuide * focusGuideDown;
+@property (nonatomic, strong) UIFocusGuide * focusGuideLeft;
+@property (nonatomic, strong) UIFocusGuide * focusGuideRight;
 
 - (instancetype)initWithBridge:(RCTBridge *)bridge;