React-Native TouchableHighlight onFocus not work in Android TV

Question

I'm trying to create an app with React Native + Expo for Adnroid TV and onFocus doesn't work on any element.

I tried to fix it by migrating to "react-native": "npm:react-native-tvos@latest" but that doesn't work either.

Any idea how to fix it?

<TouchableHighlight
            style={{backgroundColor: 'green', backfaceVisibility: 'visible', shadowColor: 'red'}}  
            hasTVPreferredFocus
            tvParallaxProperties={{ magnification: 1.2 }}
      onPress={() => {console.log('pres')}} 
      onFocus={() => {console.log('focus')}} >
          <Text style={{width: 50, height: 50, backgroundColor: 'transparent'}}>1</Text>
      </TouchableHighlight >

Answer 1

I have recently solved this issue. I was under impression that simply changing package.json contents to read "react-native": "npm:react-native-tvos@latest" would suffice, but it won't. It would, if you would have built the project, but even then it would probably complain about lot of stuff.

Try running npm i react-native@npm:react-native-tvos@latest it should complain about conflicting dependencies. Go one by one, removing the dependencies using npm uninstall [dependency] and then try to install again, until you are successful. Note the dependencies you removed and then install them back again. I've only had to remove react-native react @types/react-native. If it complains about version, just use the suggested version such as npm i [email protected] worked for me. I had to run npm ci to get clean install of all my packages after this process as my build didn't work initially, but after that, everything worked smoothly.

They are mentioning in the documentation of https://www.npmjs.com/package/react-native-tvos that their version is derived from the public version of react-native, but it didn't seem to be the case with the @latest version.

If you are using typescript, don't forget to include import 'react-native/tvos-types.d' in some of your typescript files, preferably the root.

It seems that the package still has some issues, such as not allowing you to set opacity properly for the TouchableHighlight component, but I am currently working on workarounds for everything.

Hope this helps, cheers.