react-native-tvos 0.69.6-2 → 0.69.8-0

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

@@ -10,10 +10,13 @@
 
 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';
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
+
+const {View} = ReactNative;
 
 type TVFocusGuideViewProps = $ReadOnly<{
   ...ViewProps,
@@ -28,70 +31,91 @@ type TVFocusGuideViewProps = $ReadOnly<{
   /**
    * The views the focus should go to
    */
-  destinations: ?(Object[]),
+  destinations?: (?React.ElementRef<HostComponent<mixed>>)[],
 
   /**
    * @deprecated Don't use it, no longer necessary.
    */
   safePadding?: 'vertical' | 'horizontal' | 'both' | null,
-}>;
 
-const TVFocusGuideView = ({
-  enabled = true,
-  safePadding,
-  ...props
-}: TVFocusGuideViewProps): React.Node => {
-  const enabledStyle = {display: enabled ? 'flex' : 'none'};
-  const style = [styles.container, props.style, enabledStyle];
+  autoFocus?: boolean,
 
-  if (Platform.isTVOS) {
-    return <FocusGuideViewTVOS {...props} style={style} />;
-  }
+  trapFocusUp?: boolean,
+  trapFocusDown?: boolean,
+  trapFocusLeft?: boolean,
+  trapFocusRight?: boolean,
+}>;
 
-  if (Platform.isTV) {
-    return <FocusGuideViewAndroidTV {...props} style={style} />;
-  }
+export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
+  setDestinations: (
+    destinations: (?React.ElementRef<HostComponent<mixed>>)[],
+  ) => void,
+}>;
 
-  return <ReactNative.View {...props} style={style} />;
-};
+function TVFocusGuideView(
+  {
+    enabled = true,
+    safePadding,
+    destinations: destinationsProp,
+    ...props
+  }: TVFocusGuideViewProps,
+  forwardedRef,
+): React.Node {
+  const focusGuideRef = React.useRef<React.ElementRef<
+    typeof ReactNative.View,
+  > | null>(null);
+
+  const setDestinations = React.useCallback(
+    (destinations: (?React.ElementRef<HostComponent<mixed>>)[]) => {
+      const dests: number[] = (destinations || [])
+        .map(ReactNative.findNodeHandle)
+        .filter(Boolean);
+
+      if (focusGuideRef.current != null) {
+        Commands.setDestinations(focusGuideRef.current, dests);
+      }
+    },
+    [],
+  );
 
-const FocusGuideViewTVOS = (props: TVFocusGuideViewProps) => {
-  const focusGuideRef = React.useRef(null);
+  const _setNativeRef = setAndForwardRef({
+    getForwardedRef: () => forwardedRef,
+    setLocalRef: ref => {
+      focusGuideRef.current = ref;
+
+      // This is a hack. Ideally we would forwardRef to the underlying
+      // host component. However, since TVFocusGuide has its own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible
+      //
+      // Here we mutate the ref, so that the user can use the standard native
+      // methods like `focus()`, `blur()`, etc. while also having access to
+      // imperative methods of this component like `setDestinations()`.
+      if (ref) {
+        ref.setDestinations = setDestinations;
+      }
+    },
+  });
 
   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]);
+    if (destinationsProp != null) {
+      setDestinations(destinationsProp);
+    }
+  }, [setDestinations, destinationsProp]);
 
-  return (
-    <ReactNative.View ref={focusGuideRef} {...props} collapsable={false} />
-  );
-};
-
-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],
-  );
+  const enabledStyle = {display: enabled ? 'flex' : 'none'};
+  const style = [styles.container, props.style, enabledStyle];
 
   return (
+    // $FlowFixMe[prop-missing]
     <ReactNative.View
       {...props}
-      focusable={props.focusable ?? true}
-      destinations={nativeDestinations}
+      style={style}
+      ref={_setNativeRef}
       collapsable={false}
     />
   );
-};
+}
 
 const styles = ReactNative.StyleSheet.create({
   container: {
@@ -100,4 +124,10 @@ const styles = ReactNative.StyleSheet.create({
   },
 });
 
-module.exports = TVFocusGuideView;
+const ForwardedTVFocusGuideView: React.AbstractComponent<
+  TVFocusGuideViewProps,
+  React.ElementRef<typeof View> & TVFocusGuideViewImperativeMethods,
+> = React.forwardRef(TVFocusGuideView);
+ForwardedTVFocusGuideView.displayName = 'TVFocusGuideView';
+
+module.exports = ForwardedTVFocusGuideView;

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/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/Components/View/View.js

@@ -13,6 +13,9 @@ import type {ViewProps} from './ViewPropTypes';
 import ViewNativeComponent from './ViewNativeComponent';
 import TextAncestor from '../../Text/TextAncestor';
 import * as React from 'react';
+import {Commands} from './ViewNativeComponent';
+
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
 
 export type Props = ViewProps;
 
@@ -23,13 +26,44 @@ export type Props = ViewProps;
  *
  * @see https://reactnative.dev/docs/view
  */
+type ViewImperativeMethods = $ReadOnly<{
+  requestTVFocus: () => void,
+}>;
+
 const View: React.AbstractComponent<
   ViewProps,
-  React.ElementRef<typeof ViewNativeComponent>,
+  React.ElementRef<typeof ViewNativeComponent> & ViewImperativeMethods,
 > = React.forwardRef((props: ViewProps, forwardedRef) => {
+  const viewRef = React.useRef<?React.ElementRef<typeof View>>(null);
+
+  const requestTVFocus = React.useCallback(() => {
+    if (viewRef.current) {
+      Commands.requestTVFocus(viewRef.current);
+    }
+  }, []);
+
+  const _setNativeRef = setAndForwardRef({
+    getForwardedRef: () => forwardedRef,
+    setLocalRef: ref => {
+      viewRef.current = ref;
+
+      // This is a hack. Ideally we would forwardRef to the underlying
+      // host component. However, since TVFocusGuide has its own methods that can be
+      // called as well, if we used the standard forwardRef then these
+      // methods wouldn't be accessible
+      //
+      // Here we mutate the ref, so that the user can use the standart native
+      // methods like `measureLayout()` etc. while also having access to
+      // imperative methods of this component like `requestTVFocus()`.
+      if (ref) {
+        ref.requestTVFocus = requestTVFocus;
+      }
+    },
+  });
+
   return (
     <TextAncestor.Provider value={false}>
-      <ViewNativeComponent {...props} ref={forwardedRef} />
+      <ViewNativeComponent {...props} ref={_setNativeRef} />
     </TextAncestor.Provider>
   );
 });

package/Libraries/Components/View/ViewNativeComponent.js

@@ -93,15 +93,21 @@ interface NativeCommands {
     viewRef: React.ElementRef<HostComponent<mixed>>,
     pressed: boolean,
   ) => void;
-  // Apple TV focus guide API
+  // Focus Guide API
   +setDestinations: (
     viewRef: React.ElementRef<HostComponent<mixed>>,
-    destinations: Array<React.ElementRef<HostComponent<mixed>>>,
+    destinations: Array<number>, // Node handles are basically integers
   ) => void;
+  +requestTVFocus: (viewRef: React.ElementRef<HostComponent<mixed>>) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['hotspotUpdate', 'setPressed', 'setDestinations'],
+  supportedCommands: [
+    'hotspotUpdate',
+    'setPressed',
+    'setDestinations',
+    'requestTVFocus',
+  ],
 });
 
 export default ViewNativeComponent;

package/Libraries/Core/ReactNativeVersion.js

@@ -12,6 +12,6 @@
 exports.version = {
   major: 0,
   minor: 69,
-  patch: 6,
-  prerelease: '2',
+  patch: 8,
+  prerelease: '0',
 };

package/Libraries/Lists/VirtualizedList.js

@@ -42,6 +42,7 @@ import {
   type ChildListState,
   type ListDebugInfo,
 } from './VirtualizedListContext.js';
+import TVFocusGuideView from '../Components/TV/TVFocusGuideView';
 
 type Item = any;
 
@@ -1116,16 +1117,30 @@ class VirtualizedList extends React.PureComponent<Props, State> {
           unregisterAsNestedChild: this._unregisterAsNestedChild,
           debugInfo: this._getDebugInfo(),
         }}>
-        {React.cloneElement(
-          (
-            this.props.renderScrollComponent ||
-            this._defaultRenderScrollComponent
-          )(scrollProps),
-          {
-            ref: this._captureScrollRef,
-          },
-          cells,
-        )}
+        <TVFocusGuideView
+          trapFocusLeft={
+            horizontalOrDefault(this.props.horizontal) && this.state.first > 0
+          }
+          trapFocusRight={
+            horizontalOrDefault(this.props.horizontal) && this._hasMore
+          }
+          trapFocusUp={
+            !horizontalOrDefault(this.props.horizontal) && this.state.first > 0
+          }
+          trapFocusDown={
+            !horizontalOrDefault(this.props.horizontal) && this._hasMore
+          }>
+          {React.cloneElement(
+            (
+              this.props.renderScrollComponent ||
+              this._defaultRenderScrollComponent
+            )(scrollProps),
+            {
+              ref: this._captureScrollRef,
+            },
+            cells,
+          )}
+        </TVFocusGuideView>
       </VirtualizedListContextProvider>
     );
     let ret: React.Node = innerRet;

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}