react-native-tvos 0.69.6-1 → 0.69.6-3

package/Libraries/Components/Pressable/Pressable.js

@@ -34,9 +34,10 @@ import type {
   LayoutEvent,
   MouseEvent,
   PressEvent,
+  TVRemoteEvent,
 } from '../../Types/CoreEventTypes';
 import View from '../View/View';
-import typeof TVParallaxPropertiesType from '../TV/TVViewPropTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import Platform from '../../Utilities/Platform';
 import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
@@ -317,14 +318,17 @@ function Pressable(props: Props, forwardedRef): React.Node {
       unstable_pressDelay,
     ],
   );
+  // $FlowFixMe[incompatible-call]
   const eventHandlers = usePressability(config);
 
   const pressableTVFocusEventHandler = useCallback(
-    (evt: Event) => {
+    (evt: FocusEvent) => {
       if (isTVSelectable !== false || focusable !== false) {
+        // $FlowFixMe[prop-missing]
         if (evt?.eventType === 'focus') {
           setFocused(true);
           onFocus && onFocus(evt);
+        // $FlowFixMe[prop-missing]
         } else if (evt.eventType === 'blur') {
           onBlur && onBlur(evt);
           setFocused(false);
@@ -333,10 +337,14 @@ function Pressable(props: Props, forwardedRef): React.Node {
       // Use these on tvOS only. Android press events go to onClick() so we don't
       // need to call onPress() again here
       if (Platform.isTVOS) {
+        // $FlowFixMe[prop-missing]
         if (focused && evt.eventType === 'select') {
+        // $FlowFixMe[incompatible-exact]
           onPress && onPress(evt);
         }
+        // $FlowFixMe[prop-missing]
         if (focused && evt.eventType === 'longSelect') {
+        // $FlowFixMe[incompatible-exact]
           onLongPress && onLongPress(evt);
         }
       }
@@ -348,6 +356,7 @@ function Pressable(props: Props, forwardedRef): React.Node {
     if (!tvFocusEventHandler) {
       return;
     }
+    // $FlowFixMe[prop-missing]
     const viewTag = viewRef?.current?._nativeTag;
     tvFocusEventHandler.register(viewTag, pressableTVFocusEventHandler);
     return () => {

package/Libraries/Components/ScrollView/ScrollView.js

@@ -1834,6 +1834,7 @@ ForwardedScrollView.Context = ScrollViewContext;
 
 ForwardedScrollView.displayName = 'ScrollView';
 
+// $FlowFixMe[not-an-object]
 module.exports = ((ForwardedScrollView: $FlowFixMe): React.AbstractComponent<
   React.ElementConfig<typeof ScrollView>,
   $ReadOnly<{|

package/Libraries/Components/TV/TVEventHandler.js

@@ -14,20 +14,22 @@ import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
 class TVEventHandler {
   __nativeTVNavigationEventListener: ?EventSubscription = null;
-  __nativeTVNavigationEventEmitter: ?NativeEventEmitter = null;
+  __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEvent> = null;
 
   enable(component: ?any, callback: Function): void {
     if (Platform.OS === 'ios' && !NativeTVNavigationEventEmitter) {
       return;
     }
 
-    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter(
+    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEvent>(
       NativeTVNavigationEventEmitter,
     );
     this.__nativeTVNavigationEventListener = this.__nativeTVNavigationEventEmitter.addListener(
+      // $FlowFixMe[prop-missing]
       'onHWKeyEvent',
       data => {
         if (callback) {

package/Libraries/Components/TV/TVFocusEventHandler.js

@@ -14,10 +14,11 @@ import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
 import NativeTVNavigationEventEmitter from './NativeTVNavigationEventEmitter';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
 class TVFocusEventHandler {
   __nativeTVNavigationEventListener: ?EventSubscription = null;
-  __nativeTVNavigationEventEmitter: ?NativeEventEmitter = null;
+  __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEvent> = null;
   __callbackMap: Map<any, Function> = new Map();
 
   constructor() {
@@ -25,10 +26,11 @@ class TVFocusEventHandler {
       return;
     }
 
-    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter(
+    this.__nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEvent>(
       NativeTVNavigationEventEmitter,
     );
     this.__nativeTVNavigationEventListener = this.__nativeTVNavigationEventEmitter.addListener(
+       // $FlowFixMe[prop-missing]
       'onHWKeyEvent',
       data => {
         const callback = this.__callbackMap.get(data.tag);

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -23,81 +23,71 @@ type TVFocusGuideViewProps = $ReadOnly<{
    * Useful for absolute focus guides without children
    * Defaults to true
    */
-  enabled: ?Boolean,
+  enabled?: boolean,
 
   /**
    * The views the focus should go to
    */
-  destinations: ?(Object[]),
+  destinations?: ?(Object[]),
 
   /**
-   * How the TVFocusGuideView content safe padding should be applied. "null" to disable it.
+   * @deprecated Don't use it, no longer necessary.
    */
   safePadding?: 'vertical' | 'horizontal' | 'both' | null,
+
+  autoFocus?: boolean,
 }>;
 
 const TVFocusGuideView = ({
   enabled = true,
   safePadding,
-  style,
-  ...otherProps
+  ...props
 }: TVFocusGuideViewProps): React.Node => {
-  const paddingChoice = safePadding === undefined ? 'both' : safePadding;
-  const focusGuidePadding =
-    paddingChoice === 'both'
-      ? {padding: 1}
-      : paddingChoice === 'vertical'
-      ? {paddingVertical: 1}
-      : paddingChoice === 'horizontal'
-      ? {paddingHorizontal: 1}
-      : null;
-
   const enabledStyle = {display: enabled ? 'flex' : 'none'};
+  const style = [styles.container, props.style, enabledStyle];
 
-  /**
-   * 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, style, styles.focusGuide];
+  // `autoFocus` and `destinations` props shouldn't be used together.
+  // Otherwise they can conflict with each other. So if `destinations` is
+  // provided, we set `autoFocus` prop to false to avoid that conflict.
+  const autoFocus = props.destinations?.length ? false : props.autoFocus;
 
-  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={[style, styles.container, enabledStyle]}>
-      {Platform.isTV ? (
-        Platform.isTVOS ? (
-          <FocusGuideViewTVOS {...otherProps} style={focusGuideStyle} />
-        ) : (
-          <FocusGuideViewAndroidTV {...otherProps} style={focusGuideStyle} />
-        )
-      ) : (
-        otherProps.children
-      )}
-    </ReactNative.View>
-  );
+  if (Platform.isTVOS) {
+    return (
+      <FocusGuideViewTVOS {...props} style={style} autoFocus={autoFocus} />
+    );
+  }
+
+  if (Platform.isTV) {
+    return (
+      <FocusGuideViewAndroidTV {...props} style={style} autoFocus={autoFocus} />
+    );
+  }
+
+  // $FlowFixMe[prop-missing]
+  return <ReactNative.View {...props} style={style} />;
 };
 
 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);
+    if (props.destinations) {
+      const nativeDestinations: any = (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 ref={focusGuideRef} {...props} />;
+  return (
+    // $FlowFixMe[prop-missing]
+    <ReactNative.View ref={focusGuideRef} {...props} collapsable={false} />
+  );
 };
 
 const FocusGuideViewAndroidTV = (props: TVFocusGuideViewProps) => {
@@ -110,10 +100,12 @@ const FocusGuideViewAndroidTV = (props: TVFocusGuideViewProps) => {
   );
 
   return (
+    // $FlowFixMe[prop-missing]
     <ReactNative.View
       {...props}
       focusable={props.focusable ?? true}
       destinations={nativeDestinations}
+      collapsable={false}
     />
   );
 };
@@ -122,22 +114,6 @@ const styles = ReactNative.StyleSheet.create({
   container: {
     minWidth: 1,
     minHeight: 1,
-    paddingTop: 0,
-    paddingBottom: 0,
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
-  focusGuide: {
-    position: 'relative',
-    opacity: 1,
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    marginLeft: 0,
-    marginTop: 0,
-    marginRight: 0,
-    marginBottom: 0,
   },
 });
 

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -78,4 +78,11 @@ export type TVViewProps = $ReadOnly<{|
    */
   tvParallaxProperties?: TVParallaxPropertiesType,
 
+  /**
+   * Additional properties needed for flow checks on TVFocusGuideView
+   */
+  destinations?: ?(Object[]),
+  enabled?: boolean,
+  autofocus?: boolean,
+  safePadding?: string | null,
 |}>;

package/Libraries/Components/TV/useTVEventHandler.js

@@ -1,8 +1,9 @@
 // @flow
 import React from 'react';
 import TVEventHandler from './TVEventHandler';
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
-const useTVEventHandler = (handleEvent: (evt: Event) => void) => {
+const useTVEventHandler = (handleEvent: (evt: TVRemoteEvent) => void) => {
   React.useEffect(() => {
     const handler: TVEventHandler = new TVEventHandler();
     handler.enable(null, function(cmp, evt) {

package/Libraries/Components/TextInput/TextInput.js

@@ -1233,7 +1233,7 @@ function InternalTextInput(props: Props): React.Node {
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
       !(props.onChange || props.onChangeText);
 
-    if (props.multiline && Platform.isTVOS) {
+    if (props.multiline === true && Platform.isTVOS) {
       warnOnce(
         'text-input-multiline-tvos',
         'Multiline TextInput not supported on Apple TV.  See https://github.com/react-native-tvos/react-native-tvos/issues/109',

package/Libraries/Components/Touchable/TVTouchable.js

@@ -46,7 +46,7 @@ export default class TVTouchable {
             config.onPress(tvData);
           }
         } else if (tvData.eventType === 'longSelect') {
-          if (!config.getDisabled()) {
+          if (Platform.OS !== 'android' && !config.getDisabled()) {
             config.onLongPress(tvData);
           }
         }

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -187,6 +187,11 @@ class TouchableBounce extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null) {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -19,7 +19,7 @@ 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 type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
@@ -34,7 +34,7 @@ type AndroidProps = $ReadOnly<{|
 type TVProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
-  tvParallaxProperties?: ?TVParallaxPropertiesType,
+  tvParallaxProperties?: TVParallaxPropertiesType,
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
@@ -379,6 +379,11 @@ class TouchableHighlight extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null && Platform.OS !== 'android') {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -19,7 +19,7 @@ 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 '../TV/TVViewPropTypes';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 
 import * as React from 'react';
@@ -27,7 +27,7 @@ import * as React from 'react';
 type TVProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
-  tvParallaxProperties?: ?TVParallaxPropertiesType,
+  tvParallaxProperties?: TVParallaxPropertiesType,
   nextFocusDown?: ?number,
   nextFocusForward?: ?number,
   nextFocusLeft?: ?number,
@@ -292,6 +292,11 @@ class TouchableOpacity extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null && Platform.OS !== 'android') {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -13,6 +13,7 @@ import Pressability, {
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import TVTouchable from './TVTouchable';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -65,6 +66,7 @@ type Props = $ReadOnly<{|
   rejectResponderTermination?: ?boolean,
   testID?: ?string,
   touchSoundDisabled?: ?boolean,
+  tvParallaxProperties?: TVParallaxPropertiesType,
 |}>;
 
 type State = $ReadOnly<{|
@@ -156,6 +158,11 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
             this.props.onPress(event);
           }
         },
+        onLongPress: event => {
+          if (this.props.onLongPress != null) {
+            this.props.onLongPress(event);
+          }
+        },
       });
     }
   }

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 69,
   patch: 6,
-  prerelease: '1',
+  prerelease: '3',
 };

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -19,10 +19,6 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
-const LogBoxTouchable = Platform.isTVOS ?
-                            TouchableHighlight :
-                            TouchableWithoutFeedback;
-
 type Props = $ReadOnly<{|
   backgroundColor: $ReadOnly<{|
     default: string,
@@ -61,15 +57,23 @@ function LogBoxButton(props: Props): React.Node {
 
   return props.onPress == null ? (
     content
+  ) : Platform.isTV ? (
+        <TouchableHighlight
+          tvParallaxProperties={{enabled: false}}
+          hitSlop={props.hitSlop}
+          onPress={props.onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}>
+          {content}
+        </TouchableHighlight>
   ) : (
-    <LogBoxTouchable
-      tvParallaxProperties={{enabled: false}}
-      hitSlop={props.hitSlop}
-      onPress={props.onPress}
-      onPressIn={() => setPressed(true)}
-      onPressOut={() => setPressed(false)}>
-      {content}
-    </LogBoxTouchable>
+        <TouchableWithoutFeedback
+          hitSlop={props.hitSlop}
+          onPress={props.onPress}
+          onPressIn={() => setPressed(true)}
+          onPressOut={() => setPressed(false)}>
+          {content}
+        </TouchableWithoutFeedback>
   );
 }
 

package/Libraries/LogBox/UI/LogBoxNotification.js

@@ -67,7 +67,7 @@ function LogBoxLogNotification(props: Props): React.Node {
           }}>
           <View
             style={toastStyles.tvDismissContainer}>
-            <Message message={{content: 'Dismiss'}} />
+            <Message message={{content: 'Dismiss', substitutions: []}} />
           </View>
         </LogBoxButton>
       ) : null}

package/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -26,9 +26,6 @@ typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
   NSMutableArray<AnimatedOperation> *_operations;
   // Operations called before views have been updated.
   NSMutableArray<AnimatedOperation> *_preOperations;
-  NSMutableDictionary<NSNumber *, NSNumber *> *_animIdIsManagedByFabric;
-  // A set of nodeIDs managed by Fabric.
-  NSMutableSet<NSNumber *> *_nodeIDsManagedByFabric;
 }
 
 RCT_EXPORT_MODULE();
@@ -43,8 +40,6 @@ RCT_EXPORT_MODULE();
   if (self = [super init]) {
     _operations = [NSMutableArray new];
     _preOperations = [NSMutableArray new];
-    _animIdIsManagedByFabric = [NSMutableDictionary new];
-    _nodeIDsManagedByFabric = [NSMutableSet new];
   }
   return self;
 }
@@ -113,9 +108,6 @@ RCT_EXPORT_METHOD(updateAnimatedNodeConfig:(double)tag
 RCT_EXPORT_METHOD(connectAnimatedNodes:(double)parentTag
                   childTag:(double)childTag)
 {
-  if ([_nodeIDsManagedByFabric containsObject:@(childTag)]) {
-    [_nodeIDsManagedByFabric addObject:@(parentTag)];
-  }
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     [nodesManager connectAnimatedNodes:[NSNumber numberWithDouble:parentTag] childTag:[NSNumber numberWithDouble:childTag]];
   }];
@@ -138,11 +130,7 @@ RCT_EXPORT_METHOD(startAnimatingNode:(double)animationId
     [nodesManager startAnimatingNode:[NSNumber numberWithDouble:animationId] nodeTag:[NSNumber numberWithDouble:nodeTag] config:config endCallback:callBack];
   }];
 
-  BOOL isNodeManagedByFabric = [_nodeIDsManagedByFabric containsObject:@(nodeTag)];
-  if (isNodeManagedByFabric) {
-    self->_animIdIsManagedByFabric[[NSNumber numberWithDouble:animationId]] = @YES;
-    [self flushOperationQueues];
-  }
+  [self flushOperationQueues];
 }
 
 RCT_EXPORT_METHOD(stopAnimation:(double)animationId)
@@ -150,9 +138,7 @@ RCT_EXPORT_METHOD(stopAnimation:(double)animationId)
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     [nodesManager stopAnimation:[NSNumber numberWithDouble:animationId]];
   }];
-  if ([_animIdIsManagedByFabric[[NSNumber numberWithDouble:animationId]] boolValue]) {
-    [self flushOperationQueues];
-  }
+  [self flushOperationQueues];
 }
 
 RCT_EXPORT_METHOD(setAnimatedNodeValue:(double)nodeTag
@@ -192,9 +178,6 @@ RCT_EXPORT_METHOD(extractAnimatedNodeOffset:(double)nodeTag)
 RCT_EXPORT_METHOD(connectAnimatedNodeToView:(double)nodeTag
                   viewTag:(double)viewTag)
 {
-  if (RCTUIManagerTypeForTagIsFabric(@(viewTag))) {
-    [_nodeIDsManagedByFabric addObject:@(nodeTag)];
-  }
   [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
     // viewName is not used when node is managed by Fabric, and nodes are always managed by Fabric in Bridgeless.
     [nodesManager connectAnimatedNodeToView:[NSNumber numberWithDouble:nodeTag] viewTag:[NSNumber numberWithDouble:viewTag] viewName:nil];
@@ -291,7 +274,6 @@ RCT_EXPORT_METHOD(getValue:(double)nodeTag saveValueCallback:(RCTResponseSenderB
   _preOperations = [NSMutableArray new];
   _operations = [NSMutableArray new];
 
-
   RCTExecuteOnMainQueue(^{
     for (AnimatedOperation operation in preOperations) {
       operation(self->_nodesManager);

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -16,6 +16,7 @@ import type {NativeColorValue} from './PlatformColorValueTypes';
 
 export type ____ColorValue_Internal = null | string | number | NativeColorValue;
 
+export type ColorValue = ____ColorValue_Internal;
 export type ColorArrayValue = null | $ReadOnlyArray<____ColorValue_Internal>;
 export type PointValue = {
   x: number,

package/Libraries/Types/CoreEventTypes.js

@@ -164,3 +164,12 @@ export type MouseEvent = SyntheticEvent<
     timestamp: number,
   |}>,
 >;
+
+export type TVRemoteEvent = 
+  $ReadOnly<{|
+    eventType: string,
+    eventKeyAction?: string,
+    // $FlowFixMe[unclear-type]
+    body?: any,
+  |}>;
+

package/README.md

@@ -206,8 +206,8 @@ class Game2048 extends React.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. |
+| destinations | any[]? | Array of `Component`s to register as destinations of the FocusGuideView |
+| autoFocus | boolean? | If true, `TVFocusGuide` will automatically manage focus for you. It will redirect the focus to the first focusable child on the first visit. It also remembers the last focused child and redirects the focus to it on the subsequent visits. |
 
 - _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/Base/RCTTVRemoteHandler.h

@@ -22,6 +22,10 @@ extern NSString * _Nonnull const RCTTVRemoteEventSelect;
 
 extern NSString * _Nonnull const RCTTVRemoteEventLongPlayPause;
 extern NSString * _Nonnull const RCTTVRemoteEventLongSelect;
+extern NSString * _Nonnull const RCTTVRemoteEventLongUp;
+extern NSString * _Nonnull const RCTTVRemoteEventLongDown;
+extern NSString * _Nonnull const RCTTVRemoteEventLongLeft;
+extern NSString * _Nonnull const RCTTVRemoteEventLongRight;
 
 extern NSString * _Nonnull const RCTTVRemoteEventLeft;
 extern NSString * _Nonnull const RCTTVRemoteEventRight;

package/React/Base/RCTTVRemoteHandler.m

@@ -35,6 +35,10 @@ NSString *const RCTTVRemoteEventSelect = @"select";
 
 NSString *const RCTTVRemoteEventLongPlayPause = @"longPlayPause";
 NSString *const RCTTVRemoteEventLongSelect = @"longSelect";
+NSString *const RCTTVRemoteEventLongUp = @"longUp";
+NSString *const RCTTVRemoteEventLongDown = @"longDown";
+NSString *const RCTTVRemoteEventLongLeft = @"longLeft";
+NSString *const RCTTVRemoteEventLongRight = @"longRight";
 
 NSString *const RCTTVRemoteEventLeft = @"left";
 NSString *const RCTTVRemoteEventRight = @"right";
@@ -187,6 +191,22 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
                                         pressType:UIPressTypeSelect
                                              name:RCTTVRemoteEventLongSelect];
 
+  [self addLongPressGestureRecognizerWithSelector:@selector(longUpPressed:)
+                                        pressType:UIPressTypeUpArrow
+                                             name:RCTTVRemoteEventLongUp];
+
+  [self addLongPressGestureRecognizerWithSelector:@selector(longDownPressed:)
+                                        pressType:UIPressTypeDownArrow
+                                             name:RCTTVRemoteEventLongDown];
+
+  [self addLongPressGestureRecognizerWithSelector:@selector(longLeftPressed:)
+                                        pressType:UIPressTypeLeftArrow
+                                             name:RCTTVRemoteEventLongLeft];
+
+  [self addLongPressGestureRecognizerWithSelector:@selector(longRightPressed:)
+                                        pressType:UIPressTypeRightArrow
+                                             name:RCTTVRemoteEventLongRight];
+
   // Recognizers for Apple TV remote trackpad swipes
 
   // Up
@@ -378,6 +398,26 @@ static __volatile BOOL __gestureHandlersCancelTouches = YES;
   [self sendAppleTVEvent:RCTTVRemoteEventLongSelect];
 }
 
+- (void)longUpPressed:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventLongUp];
+}
+
+- (void)longDownPressed:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventLongDown];
+}
+
+- (void)longLeftPressed:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventLongLeft];
+}
+
+- (void)longRightPressed:(UIGestureRecognizer *)r
+{
+  [self sendAppleTVEvent:RCTTVRemoteEventLongRight];
+}
+
 - (void)swipedUp:(UIGestureRecognizer *)r
 {
   [self sendAppleTVEvent:RCTTVRemoteEventSwipeUp];