New Version

0.73

Old Version

0.71

Build Target(s)

tvOS simulator, androidTV simulator

Output of react-native info

info Fetching system and libraries information… System: OS: macOS 14.3.1 CPU: (8) arm64 Apple M3 Memory: 137.59 MB / 8.00 GB Shell: version: “5.9” path: /bin/zsh Binaries: Node: version: 20.11.0 path: ~/.nvm/versions/node/v20.11.0/bin/node Yarn: version: 1.22.21 path: ~/.nvm/versions/node/v20.11.0/bin/yarn npm: version: 10.2.4 path: ~/.nvm/versions/node/v20.11.0/bin/npm Watchman: Not Found Managers: CocoaPods: version: 1.15.2 path: /opt/homebrew/lib/ruby/gems/3.1.0/bin/pod SDKs: iOS SDK: Platforms: - DriverKit 23.2 - iOS 17.2 - macOS 14.2 - tvOS 17.2 - visionOS 1.0 - watchOS 10.2 Android SDK: Not Found IDEs: Android Studio: 2023.1 AI-231.9392.1.2311.11330709 Xcode: version: 15.2/15C500b path: /usr/bin/xcodebuild Languages: Java: version: 17.0.9 path: /opt/homebrew/opt/openjdk@17/bin/javac Ruby: version: 3.1.4 path: /opt/homebrew/opt/ruby@3.1/bin/ruby npmPackages: “@react-native-community/cli”: Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: Not Found react-native-macos: Not Found react-native-tvos: installed: 0.73.2-0 npmGlobalPackages: “react-native”: Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: true newArchEnabled: false

info React Native v0.73.4 is now available (your project is running on v0.73.2-0). info Changelog: https://github.com/facebook/react-native/releases/tag/v0.73.4 info Diff: https://react-native-community.github.io/upgrade-helper/?from=0.73.4 info For more info, check out “https://reactnative.dev/docs/upgrading?os=macos”.

Issue and Reproduction Steps

Issue

Recently my team and I faced an issue with certain Apple devices, those Apple TV with direction keys, where focus wouldn’t move with swipes unless you press a direction key first, after doing it would work as expected. We decided to upgrade from react-native-tvos@0.71.0 we upgraded to react-native-tvos@0.73.0, everything worked as expected! Until we got into the streaming screens of the app.

When you start video stream with HLS video in react-native-video@^5.2.1 in tvOS, the audio tool box show these logs and the video/stream doesn’t start, although it does works in androidTV as expected.

[CoreFoundation] AddInstanceForFactory: No factory registered for id <CFUUID 0x600000290440> F8BB1C28-BAE8-11D6-9C31-00039315CD46
[AudioToolbox]                AQMEIO.cpp:198   timed out after 15.000s (0 0); suspension count=0 (IOSuspensions: )
[AudioToolbox]  MEDeviceStreamClient.cpp:467   AQME Default-InputOutput: client stopping after failed start: <CA_UISoundClientBase@0x108107980>; running count now 0
[AudioToolbox]      CA_UISoundClient.cpp:293   CA_UISoundClientBase::StartPlaying: AddRunningClient failed (status = -66681).
[AudioToolbox]        MEMixerChannel.cpp:1006  MEMixerChannel::EnableProcessor: failed to open processor type 0x705f6571
[AudioToolbox]        MEMixerChannel.cpp:1006  MEMixerChannel::EnableProcessor: failed to open processor type 0x705f6571
[AudioToolbox]                AQMEIO.cpp:198   timed out after 15.000s (0 0); suspension count=0 (IOSuspensions: )
[AudioToolbox]  MEDeviceStreamClient.cpp:467   AQME Default-InputOutput: client stopping after failed start: <AudioQueueObject@0x10a838e00; Unknown figplayer;
[14037]; play>; running count now 0

Steps to reproduce

create app using the template and installing react-native-video

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

yard add react-native-video
yard add --dev @types/react-native-video

Code

package.json

{
  "name": "testapp",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "start": "expo start",
    "tvos": "expo run:ios --scheme testApp-tvOS --device \"Apple TV\"",
    "lint": "eslint .",
    "test": "jest"
  },
  "dependencies": {
    "expo": "^50.0.2",
    "react": "18.2.0",
    "react-native": "npm:react-native-tvos@^0.73.2-0",
    "react-native-video": "^5.2.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "^0.73.19",
    "@react-native/eslint-config": "^0.73.2",
    "@react-native/metro-config": "^0.73.3",
    "@react-native/typescript-config": "^0.73.1",
    "@types/react": "^18.2.6",
    "@types/react-native-video": "^5.0.19",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.2.0",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

app.tsx

import React, {useRef} from 'react';
import {StyleSheet} from 'react-native';
import Video from 'react-native-video';
import VideoRef from 'react-native-video';

function App(): React.JSX.Element {
  const videoRef = useRef<VideoRef>(null);

  return (
    <Video
      // Big Buck Bunny video adaptive HLS stream URL
      source={{uri: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'}}
      // Store reference
      ref={videoRef}
      resizeMode="cover"
      style={styles.backgroundVideo}
    />
  );
}

var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    backgroundColor: 'gray',
  },
});

export default App;

Results

tvOS

androidTV