react-native-tvos 0.75.2-0rc1 → 0.75.4-0

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -23,14 +22,14 @@ import type {
   LayoutEvent,
   PressEvent,
 } from '../../Types/CoreEventTypes';
-import {Platform} from '../../Utilities/Platform';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 
 import View from '../../Components/View/View';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
+import useTVEventHandler from '../TV/useTVEventHandler';
 import * as React from 'react';
 import {useMemo} from 'react';
-import useTVEventHandler from '../TV/useTVEventHandler';
 
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
@@ -204,7 +203,7 @@ module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
     eventHandlers || {};
 
   useTVEventHandler(evt => {
-    if (props.disabled || props.ariaDisabled) {
+    if (props.disabled === true || props['aria-disabled'] === true) {
       return;
     }
     if (evt.eventType === 'focus') {

package/Libraries/Core/ReactNativeVersion.js

@@ -16,8 +16,8 @@ const version: $ReadOnly<{
 }> = {
   major: 0,
   minor: 75,
-  patch: 2,
-  prerelease: '0rc1',
+  patch: 4,
+  prerelease: '0',
 };
 
 module.exports = {version};

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @noflow
  * @format
  * @oncall react_native
  */

package/Libraries/Debugging/useSubscribeToDebuggingOverlayRegistry.js

@@ -4,11 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow
  * @format
  * @oncall react_native
  */
 
+/*
 import type {
   AppContainerRootViewRef,
   DebuggingOverlayRef,
@@ -30,3 +31,4 @@ const useSubscribeToDebuggingOverlayRegistry = (
 };
 
 export default useSubscribeToDebuggingOverlayRegistry;
+ */

package/Libraries/NativeComponent/BaseViewConfig.android.js

@@ -10,9 +10,8 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import {validAttributesForTVProps} from './TVViewConfig';
-
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {validAttributesForTVProps} from './TVViewConfig';
 import {DynamicallyInjectedByGestureHandler} from './ViewConfigIgnore';
 
 const bubblingEventTypes = {

package/Libraries/NativeComponent/BaseViewConfig.ios.js

@@ -10,9 +10,8 @@
 
 import type {PartialViewConfigWithoutName} from './PlatformBaseViewConfig';
 
-import {validAttributesForTVProps} from './TVViewConfig';
-
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
+import {validAttributesForTVProps} from './TVViewConfig';
 import {
   ConditionallyIgnoredEventHandlers,
   DynamicallyInjectedByGestureHandler,

package/Libraries/NativeComponent/TVViewConfig.js

@@ -1,3 +1,6 @@
+/*
+ * @flow
+ */
 
 export const validAttributesForTVProps = {
   isTVSelectable: true,
@@ -5,7 +8,7 @@ export const validAttributesForTVProps = {
   tvParallaxProperties: true,
   destinations: true,
   enabled: true,
-  autofocus: true,
+  autoFocus: true,
   safePadding: true,
   focusable: true,
   nextFocusDown: true,

package/Libraries/NewAppScreen/components/DebugInstructions.js

@@ -22,20 +22,20 @@ const styles = StyleSheet.create({
 });
 
 const DebugInstructions: () => Node = Platform.select({
-  ios: () => (
-    Platform.isTVOS ? (
+  ios: () =>
+    Platform.isTVOS === true ? (
       <Text>
         Press <Text style={styles.highlight}>Cmd + D</Text> in the simulator or{' '}
-        <Text style={styles.highlight}>long press the play/pause button</Text> on
-        the Apple TV remote to open the Dev Menu.
+        <Text style={styles.highlight}>long press the play/pause button</Text>{' '}
+        on the Apple TV remote to open the Dev Menu.
       </Text>
     ) : (
       <Text>
         Press <Text style={styles.highlight}>Cmd + D</Text> in the simulator or{' '}
-        <Text style={styles.highlight}>Shake</Text> your device to open the Dev Menu.
+        <Text style={styles.highlight}>Shake</Text> your device to open the Dev
+        Menu.
       </Text>
-    )
-  ),
+    ),
   default: () => (
     <Text>
       Press <Text style={styles.highlight}>Cmd or Ctrl + M</Text> or{' '}

package/Libraries/NewAppScreen/components/HermesBadge.js

@@ -10,23 +10,20 @@
 
 import type {Node} from 'react';
 
-import Platform from '../../Utilities/Platform';
 import useTVEventHandler from '../../Components/TV/useTVEventHandler';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
 import useColorScheme from '../../Utilities/useColorScheme';
 import Colors from './Colors';
 import React from 'react';
 
 const HermesBadge = (): Node => {
   const [lastEventType, setLastEventType] = React.useState('');
-  const myTVEventHandler = evt => {
+  useTVEventHandler(evt => {
     setLastEventType(evt.eventType);
-  };
-  if (Platform.isTV) {
-    useTVEventHandler(myTVEventHandler);
-  }
+  });
   const isDarkMode = useColorScheme() === 'dark';
   const version =
     global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version'] ??

package/Libraries/Pressability/Pressability.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow strict-local
+ * @flow
  * @format
  */
 
@@ -529,7 +529,7 @@ export default class Pressability {
         return cancelable ?? true;
       },
 
-      onClick: (event: PressEvent): void => {
+      onClick: (event: any): void => {
         // If event has `pointerType`, it was emitted from a PointerEvent and
         // we should ignore it to avoid triggering `onPress` twice.
         if (event?.nativeEvent?.hasOwnProperty?.('pointerType')) {
@@ -544,7 +544,10 @@ export default class Pressability {
         }
 
         // Remove spurious onClick events with empty event object generated on Android TV
-        if (Platform.isTV && !event?.eventType) {
+        if (
+          Platform.isTV &&
+          (event?.eventType === null || event?.eventType === undefined)
+        ) {
           return;
         }
 

package/Libraries/ReactNative/AppContainer-dev.js

@@ -17,7 +17,6 @@ import type {Props} from './AppContainer';
 
 import ReactNativeStyleAttributes from '../Components/View/ReactNativeStyleAttributes';
 import View from '../Components/View/View';
-import Platform from '../Utilities/Platform';
 /*
 // Stub out DebuggingOverlay from TV for now
 import DebuggingOverlay from '../Debugging/DebuggingOverlay';
@@ -28,6 +27,7 @@ import LogBoxNotificationContainer from '../LogBox/LogBoxNotificationContainer';
 import StyleSheet from '../StyleSheet/StyleSheet';
 import {RootTagContext, createRootTag} from './RootTag';
 import * as React from 'react';
+// import DebuggingOverlay from 'react-native/Libraries/Debugging/DebuggingOverlay';
 
 const {useEffect, useState, useCallback} = React;
 
@@ -100,7 +100,7 @@ const AppContainer = ({
 }: Props): React.Node => {
   const appContainerRootViewRef: AppContainerRootViewRef = React.useRef(null);
   const innerViewRef: InspectedViewRef = React.useRef(null);
-/*
+  /*
   const debuggingOverlayRef: DebuggingOverlayRef = React.useRef(null);
 
   useSubscribeToDebuggingOverlayRegistry(
@@ -211,8 +211,9 @@ export type AppContainerRootViewRef = React.RefObject<React.ElementRef<
 export type InspectedViewRef = React.RefObject<React.ElementRef<
   typeof View,
 > | null>;
+/*
 export type DebuggingOverlayRef = React.RefObject<React.ElementRef<
   typeof DebuggingOverlay,
 > | null>;
-
+ */
 export default AppContainer;

package/Libraries/ReactNative/RendererImplementation.js

@@ -65,11 +65,11 @@ export function findHostInstance_DEPRECATED<TElementType: ElementType>(
 
 export function findNodeHandle<TElementType: ElementType>(
   componentOrHandle: ?(ElementRef<TElementType> | number),
-  suppressWarning: ?Boolean,
+  suppressWarning: ?boolean,
 ): ?number {
   return require('../Renderer/shims/ReactNative').findNodeHandle(
     componentOrHandle,
-    suppressWarning,
+    suppressWarning ?? false,
   );
 }
 

package/Libraries/Renderer/shims/ReactNativeTypes.js

@@ -205,6 +205,7 @@ export type ReactNativeType = {
   ): ?ElementRef<HostComponent<mixed>>,
   findNodeHandle<TElementType: ElementType>(
     componentOrHandle: ?(ElementRef<TElementType> | number),
+    suppressWarning?: boolean,
   ): ?number,
   isChildPublicInstance(
     parent: PublicInstance | HostComponent<mixed>,

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -182,21 +182,23 @@ type MaximumOneOf<T, K extends keyof T = keyof T> = K extends keyof T
 
 export interface TransformsStyle {
   transform?:
-    | MaximumOneOf<
-        PerspectiveTransform &
-          RotateTransform &
-          RotateXTransform &
-          RotateYTransform &
-          RotateZTransform &
-          ScaleTransform &
-          ScaleXTransform &
-          ScaleYTransform &
-          TranslateXTransform &
-          TranslateYTransform &
-          SkewXTransform &
-          SkewYTransform &
-          MatrixTransform
-      >[]
+    | Readonly<
+        MaximumOneOf<
+          PerspectiveTransform &
+            RotateTransform &
+            RotateXTransform &
+            RotateYTransform &
+            RotateZTransform &
+            ScaleTransform &
+            ScaleXTransform &
+            ScaleYTransform &
+            TranslateXTransform &
+            TranslateYTransform &
+            SkewXTransform &
+            SkewYTransform &
+            MatrixTransform
+        >[]
+      >
     | string
     | undefined;
   transformOrigin?: Array<string | number> | string | undefined;

package/Libraries/Utilities/BackHandler.ios.js

@@ -13,8 +13,8 @@
 
 'use strict';
 
-const Platform = require('./Platform');
 const TVEventHandler = require('../Components/TV/TVEventHandler');
+const Platform = require('./Platform');
 
 type BackPressEventName = 'backPress' | 'hardwareBackPress';
 
@@ -50,6 +50,7 @@ function emptyFunction(): void {}
  * });
  * ```
  */
+
 type TBackHandler = {|
   +exitApp: () => void,
   +addEventListener: (
@@ -62,10 +63,24 @@ type TBackHandler = {|
   ) => void,
 |};
 
-let BackHandler: TBackHandler;
+let BackHandler: TBackHandler = {
+  exitApp: emptyFunction,
+  addEventListener: function (
+    _eventName: BackPressEventName,
+    _handler: () => ?boolean,
+  ): {remove: () => void, ...} {
+    return {
+      remove: emptyFunction,
+    };
+  },
+  removeEventListener: function (
+    _eventName: BackPressEventName,
+    _handler: () => ?boolean,
+  ) {},
+};
 
 if (Platform.isTV) {
-  const _backPressSubscriptions = new Set();
+  const _backPressSubscriptions = new Set<() => ?boolean>();
 
   TVEventHandler.addListener(function (evt) {
     if (evt && evt.eventType === 'menu') {
@@ -91,34 +106,21 @@ if (Platform.isTV) {
     exitApp: emptyFunction,
 
     addEventListener: function (
-      eventName: BackPressEventName,
-      handler: () => ?boolean,
+      _eventName: BackPressEventName,
+      _handler: () => ?boolean,
     ): {remove: () => void, ...} {
-      _backPressSubscriptions.add(handler);
+      _backPressSubscriptions.add(_handler);
       return {
-        remove: () => BackHandler.removeEventListener(eventName, handler),
+        remove: () => BackHandler.removeEventListener(_eventName, _handler),
       };
     },
 
     removeEventListener: function (
-      eventName: BackPressEventName,
-      handler: () => ?boolean,
-    ): void {
-      _backPressSubscriptions.delete(handler);
-    },
-  };
-} else {
-  BackHandler = {
-    exitApp: emptyFunction,
-    addEventListener(_eventName: BackPressEventName, _handler: () => ?boolean) {
-      return {
-        remove: emptyFunction,
-      };
-    },
-    removeEventListener(
       _eventName: BackPressEventName,
       _handler: () => ?boolean,
-    ) {},
+    ) {
+      _backPressSubscriptions.delete(_handler);
+    },
   };
 }
 

package/Libraries/Utilities/Platform.d.ts

@@ -29,6 +29,7 @@ type PlatformConstants = {
 };
 interface PlatformStatic {
   isTV: boolean;
+  isTVOS: boolean;
   isTesting: boolean;
   Version: number | string;
   constants: PlatformConstants;

package/Libraries/Utilities/Platform.flow.js

@@ -42,6 +42,8 @@ type IOSPlatform = {
   // $FlowFixMe[unsafe-getters-setters]
   get isTV(): boolean,
   // $FlowFixMe[unsafe-getters-setters]
+  get isTVOS(): boolean,
+  // $FlowFixMe[unsafe-getters-setters]
   get isVision(): boolean,
   // $FlowFixMe[unsafe-getters-setters]
   get isTesting(): boolean,

package/Libraries/Vibration/Vibration.js

@@ -11,7 +11,7 @@
 
 // import NativeVibration from './NativeVibration';
 const Platform = require('../Utilities/Platform');
-const NativeVibration = require('./NativeVibration');
+const NativeVibration: $FlowFixMe = require('./NativeVibration');
 
 /**
  * Vibration API

package/README-core.md

@@ -50,7 +50,7 @@ React Native brings [**React**'s][r] declarative UI framework to iOS and Android
 
 React Native is developed and supported by many companies and individual core contributors. Find out more in our [ecosystem overview][e].
 
-[r]: https://reactjs.org/
+[r]: https://react.dev/
 [p]: https://reactnative.dev/docs/out-of-tree-platforms
 [e]: https://github.com/facebook/react-native/blob/HEAD/ECOSYSTEM.md
 
@@ -67,7 +67,7 @@ React Native is developed and supported by many companies and individual core co
 
 ## 📋 Requirements
 
-React Native apps may target iOS 12.4 and Android 5.0 (API 21) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like [Expo](https://expo.dev) can be used to work around this.
+React Native apps may target iOS 13.4 and Android 6.0 (API 23) or newer. You may use Windows, macOS, or Linux as your development operating system, though building and running iOS apps is limited to macOS. Tools like [Expo](https://expo.dev) can be used to work around this.
 
 ## 🎉 Building your first React Native app
 
@@ -90,7 +90,7 @@ The React Native documentation discusses components, APIs, and topics that are s
 The source for the React Native documentation and website is hosted on a separate repo, [**@facebook/react-native-website**][repo-website].
 
 [docs]: https://reactnative.dev/docs/getting-started
-[r-docs]: https://reactjs.org/docs/getting-started.html
+[r-docs]: https://react.dev/learn
 [repo-website]: https://github.com/facebook/react-native-website
 
 ## 🚀 Upgrading
@@ -143,5 +143,5 @@ React Native is MIT licensed, as found in the [LICENSE][l] file.
 
 React Native documentation is Creative Commons licensed, as found in the [LICENSE-docs][ld] file.
 
-[l]: https://github.com/facebook/react-native/blob/HEAD/LICENSE
-[ld]: https://github.com/facebook/react-native/blob/HEAD/LICENSE-docs
+[l]: https://github.com/facebook/react-native/blob/main/LICENSE
+[ld]: https://github.com/facebook/react-native/blob/main/LICENSE-docs

package/README.md

@@ -2,7 +2,7 @@
 
 Apple TV and Android TV support for React Native are maintained here and in the corresponding `react-native-tvos` NPM package, and not in the [core repo](https://github.com/facebook/react-native/).  This is a full fork of the main repository, with only the changes needed to support Apple TV and Android TV.
 
-Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.74.0-0 release of this package will be derived from the 0.74.0 release of `react-native`. All releases of this repo will follow the 0.xx.x-y format, where x digits are from a specific RN core release, and y represents the additional versioning from this repo.
+Releases of `react-native-tvos` will be based on a public release of `react-native`; e.g. the 0.75.2-0 release of this package will be derived from the 0.75.0 release of `react-native`. All releases of this repo will follow the 0.xx.x-y format, where x digits are from a specific RN core release, and y represents the additional versioning from this repo.
 
 Releases will be published on npmjs.org and you may find the latest release version here: https://www.npmjs.com/package/react-native-tvos?activeTab=versions or use the tag `@latest`
 
@@ -27,12 +27,10 @@ As of the 0.71 release, Hermes is fully working on both Apple TV and Android TV,
 
 ### React Native new architecture (Fabric) support
 
-- _Apple TV_: Modify your app's Podfile to set the `:fabric_enabled` value to `true` in both iOS and tvOS targets. After that, run `pod install` to pick up the additional pods needed for the new architecture. Some components (TVTextScrollView, TabBarIOS) have not been reimplemented in the new architecture so they will show up as an "unimplemented component".
+- _Apple TV_: Modify your app's Podfile to set the `:fabric_enabled` value to `true` in both iOS and tvOS targets. After that, run `pod install` to pick up the additional pods needed for the new architecture. Components that have not been reimplemented in the new architecture will show up as an "unimplemented component".
 - _Android TV_: To enable Fabric, modify `android/gradle.properties` in your app and set `newArchEnabled=true`, then rebuild your app.
 
-As of the 0.74 release, bridgeless is the default when Fabric is enabled.
-
-Known issue: The `TVFocusGuide` `autofocus` API has problems on Apple TV when bridgeless is enabled. If you need to use Fabric without bridgeless on Apple TV, you can override the default by adding the method below in `AppDelegate.mm`:
+As of the 0.74 release, bridgeless is the default when Fabric is enabled. If you need to use Fabric without bridgeless on Apple TV, you can override the default by adding the method below in `AppDelegate.mm`:
 
 ```objc
 - (BOOL)bridgelessEnabled
@@ -63,43 +61,83 @@ Minimum operating system versions:
 - _Native layer for Apple TV_: React Native Xcode projects all now have Apple TV build targets, with names ending in the string '-tvOS'.  Changes in the React Native podspecs in 0.73 now require that your application `Podfile` only have one target. This repo supports either an iOS target or a tvOS target, but both targets should not be active at the same time. The new app template now has the iOS target commented out.
 - _Maven artifacts for Android TV_: In 0.71 and later releases, the React Native Android prebuilt archives are published to Maven instead of being included in the NPM. We are following the same model, except that the Maven artifacts will be in group `io.github.react-native-tvos` instead of `com.facebook.react`. The `@react-native/gradle-plugin` module has been upgraded so that the Android dependencies will be detected correctly during build.
 
-## _(New)_ Project creation using the Expo CLI
+## _(New)_ TV project creation in React Native 0.75 and later
 
-> _Pitfall:_ Make sure you do not globally install `react-native` or `react-native-tvos`. If you have done this the wrong way, you may get error messages like `ld: library not found for -lPods-TestApp-tvOS`.
+> _Warning:_ Make sure you do not globally install `react-native` or `react-native-tvos`. If you have done this the wrong way, you may get error messages like `ld: library not found for -lPods-TestApp-tvOS`.
 
 We strongly recommend [Yarn](https://classic.yarnpkg.com/en/docs/install) as the package manager.
-You should install `yarn` globally, as it should be used instead of `npm` for working in React Native projects.
 
-To create a new project, use `yarn create react-native-app` as shown below. (This will install the Expo tool `create-react-native-app` for you if it is not already present.)
+### Using the Expo SDK with TV apps
+
+As of React Native version 0.75.x, the core team [recommends Expo for new projects](https://reactnative.dev/docs/environment-setup).
+
+See the [Building Expo apps for TV](https://docs.expo.dev/guides/building-for-tv/) guide from Expo for details on how to set up a new Expo project, including supported Expo modules and limitations.
+
+Using Expo's [continuous native generation (CNG)](https://docs.expo.dev/workflow/continuous-native-generation/) model, projects created this way can be used to build either mobile or TV apps, taking advantage of the full support for both mobile and TV platforms in this repo.
+
+### Project creation using the React Native Community CLI
+
+As of React Native 0.75.x, the template that used to reside in the `react-native` core package has been moved to a [new community repo](https://github.com/react-native-community/template) and will be maintained there. To support developers that wish to continue using the community CLI, we have created a [new TV template repository](https://github.com/react-native-tvos/template-tv) and will maintain a TV port of this template.
 
-New projects created this way will automatically have properly configured iPhone and Apple TV targets created in their XCode projects, and will have the Android manifest correctly configured for both Android phone and Android TV.  New projects are set up to use the Expo CLI; the Expo dependency and `react-native.config.js` are included in the new app template.
+> _Note:_ The new TV template will only build apps for Apple TV and Android TV. Multiple platform targets are no longer supported in React Native app Podfiles.
+
+To create a new project:
 
 ```sh
-# Init an app called 'TestApp', note that you must not be in a node module (directory with node_modules sub-directory) for this to work
-yarn create react-native-app TestApp --template https://github.com/react-native-tvos/react-native-template-typescript-tv/tree/tv-release-0.73.0 --template-path template
-cd TestApp
+# 
+# Init an app called 'TVTest', note that you must not be in a node module (directory with node_modules sub-directory) for this to work
+$ npx @react-native-community/cli@latest init TVTest --template @react-native-tvos/template-tv
+                                                          
+               ######                ######               
+             ###     ####        ####     ###             
+            ##          ###    ###          ##            
+            ##             ####             ##            
+            ##             ####             ##            
+            ##           ##    ##           ##            
+            ##         ###      ###         ##            
+             ##  ########################  ##             
+          ######    ###            ###    ######          
+      ###     ##    ##              ##    ##     ###      
+   ###         ## ###      ####      ### ##         ###   
+  ##           ####      ########      ####           ##  
+ ##             ###     ##########     ###             ## 
+  ##           ####      ########      ####           ##  
+   ###         ## ###      ####      ### ##         ###   
+      ###     ##    ##              ##    ##     ###      
+          ######    ###            ###    ######          
+             ##  ########################  ##             
+            ##         ###      ###         ##            
+            ##           ##    ##           ##            
+            ##             ####             ##            
+            ##             ####             ##            
+            ##          ###    ###          ##            
+             ###     ####        ####     ###             
+               ######                ######               
+                                                          
+
+              Welcome to React Native 0.75.2!                
+                 Learn once, write anywhere               
+
+✔ Downloading template
+✔ Copying template
+✔ Processing template
+✔ Installing dependencies
+✔ Do you want to install CocoaPods now? Only needed if you run your project in Xcode directly … yes
+✔ Installing Ruby Gems
+✔ Installing CocoaPods dependencies  (this may take a few minutes)
+.
+.
+.
+$ cd TVTest
 # Now build and start the app in the tvOS Simulator - this will only work on a macOS machine.
-# This command can also be run via "yarn tvos".
-npx expo run:ios --scheme MyApp-tvOS --device "Apple TV"
-# You can also build and start the app on an iOS phone simulator.
-# This command can also be run via "yarn ios".
-npx expo run:ios
-# or specify a simulator:
-npx expo run:ios --scheme MyApp --device "iPhone 15"
-# This command builds and starts the app in an Android TV emulator or a phone emulator (needs to be created in advance).
-# This command can also be run via "yarn android".
-npx expo run:android --device tv_api_31
+npx react-native run-ios --simulator "Apple TV"
+# This command builds and starts the app in an Android TV emulator (needs to be created in advance).
+npx react-native run:android --device tv_api_31
 ```
 
 See [this document](https://docs.expo.dev/bare/using-expo-cli/) for more details on Expo CLI functionality. (Note that many of these features require that Expo SDK modules be built into your app. Expo SDK support requires a different project configuration as described below.)
 
-## _(New)_ Using the Expo SDK with TV apps
-
-See the [Building Expo apps for TV](https://docs.expo.dev/guides/building-for-tv/) guide from Expo for details, including supported Expo modules and limitations.
-
-Expo SDK 50 or greater, and react-native-tvos 0.73.x or later, are required.
-
-## _(New)_ How to support TV specific file extensions
+## How to support TV specific file extensions
 
 The template contains an [example Metro configuration](./packages/react-native/template/metro.config.js) that allows Metro to resolve application source files with TV-specific code, indicated by specific file extensions (e.g. `*.ios.tv.tsx`, `*.android.tv.tsx`, `*.tv.tsx`). The config will work the same way with the other standard source file extensions (`.js`, etc.), as documented in [Metro docs](https://metrobundler.dev/docs/configuration/#sourceexts)
 
@@ -172,11 +210,10 @@ const TVEventHandlerView: () => React.Node = () => {
 // Class based component
 
 class Game2048 extends React.Component {
-  _tvEventHandler: any;
+  _tvEventHandlerSubscription: EventSubscription || undefined;
 
   _enableTVEventHandler() {
-    this._tvEventHandler = new TVEventHandler();
-    this._tvEventHandler.enable(this, function(cmp, evt) {
+    this._tvEventHandlerSubscription = TVEventHandler.addListener(function(evt) {
       if (evt && evt.eventType === 'right') {
         cmp.setState({board: cmp.state.board.move(2)});
       } else if(evt && evt.eventType === 'up') {
@@ -192,9 +229,9 @@ class Game2048 extends React.Component {
   }
 
   _disableTVEventHandler() {
-    if (this._tvEventHandler) {
-      this._tvEventHandler.disable();
-      delete this._tvEventHandler;
+    if (this._tvEventHandlerSubscription) {
+      this._tvEventHandlerSubscription.remove();
+      delete this._tvEventHandlerSubscription;
     }
   }
 
@@ -239,11 +276,9 @@ class Game2048 extends React.Component {
   
   - _TVTextScrollView_: On Apple TV, a ScrollView will not scroll unless there are focusable items inside it or above/below it.  This component wraps ScrollView and uses tvOS-specific native code to allow scrolling using swipe gestures from the remote control.
 
-- VirtualizedList: We extend `VirtualizedList` to make virtualization work well with focus management in mind. All of the improvements that we made are automatically available to all the VirtualizedList based components such as `FlatList`.
-  - Defaults
-    - VirtualizeList contents are automatically wrapped with a `TVFocusGuideView` with `trapFocus*` properties enabled depending on the orientation of the list. This default makes sure that focus doesn't leave the list accidentally due to a virtualization issue etc. until reaching the beginning or the end of the list.
-
-  New Props:
+  - _VirtualizedList_: We extend `VirtualizedList` to make virtualization work well with focus management in mind. All of the improvements that we made are automatically available to all the VirtualizedList based components such as `FlatList`.
+    - Defaults: VirtualizeList contents are automatically wrapped with a `TVFocusGuideView` with `trapFocus*` properties enabled depending on the orientation of the list. This default makes sure that focus doesn't leave the list accidentally due to a virtualization issue etc. until reaching the beginning or the end of the list.
+    - New Props:
 
   | Prop | Value | Description | 
   |---|---|---|

package/React/Base/RCTVersion.m

@@ -23,8 +23,8 @@ NSDictionary* RCTGetReactNativeVersion(void)
     __rnVersion = @{
                   RCTVersionMajor: @(0),
                   RCTVersionMinor: @(75),
-                  RCTVersionPatch: @(2),
-                  RCTVersionPrerelease: @"0rc1",
+                  RCTVersionPatch: @(4),
+                  RCTVersionPrerelease: @"0",
                   };
   });
   return __rnVersion;