Android TV device with custom OS not recognized as TV (and other related issues)

Description

onFocus and onBlur not work in TouchableHighlight or Pressable

Version

npm:react-native-tvos@0.68.1-1

Output of npx react-native info

System: OS: Windows 10 10.0.22000 CPU: (8) x64 AMD Ryzen 5 2400G with Radeon Vega Graphics
Memory: 3.75 GB / 13.95 GB Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Version 2021.1.0.0 AI-211.7628.21.2111.8309675 Visual Studio: Not Found Languages: Java: 11.0.14 - C:\Program Files\RedHat\java-11-openjdk-11.0.14-1\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.2 => 17.0.2 react-native: Not Found react-native-tvos: 0.68.1-1 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

1. init

npx react-native init TestApp --template=react-native-template-typescript-tv

1. change App.tsx

import React from "react"
import { TouchableHighlight, View, Text, Pressable } from "react-native"
import "react-native/tvos-types.d"

declare const global: { HermesInternal: null | {} }

export default () => {
    return (
        <View>
            <TouchableHighlight
                onFocus={() => console.log("TouchableHighlight Focus")}
                onBlur={() => console.log("TouchableHighlight Blur")}
                onPress={() => console.log("TouchableHighlight Press")}
            >
                <Text>Touchable</Text>
            </TouchableHighlight>
            <Pressable
                onFocus={() => console.log("Pressable Focus")}
                onBlur={() => console.log("Pressable Blur")}
                onPress={() => console.log("Pressable Press")}
            >
                <Text>Pressable</Text>
            </Pressable>
        </View>
    )
}

1. run on Android TV

npx react-native run-android

1. onFocus and OnBlur not working, onPress works

I didn’t make any other changes, but it really doest not work. What should I do?

Snack, code example, screenshot, or link to a repository

No response

[douglowder]

I’m not sure that your TV is really running the Android TV OS, as understood by React Native. Your device may be running a custom Android kernel with custom UI built on top.

An article explaining the differences: https://divitel.com/news/android-tv-vs-android-open-source-platform-which-is-right-for-you/

If you just want to hack the isTV flag, you can modify node_modules/react-native/Libraries/Utilities/Platform.android.js and change the method to always return true, and see what that does.

[douglowder]

Yes that will actually have an effect on React Native JS code that looks specifically for the TV flag. It won’t change anything on the native side, but hopefully you don’t need that 😃