Android TV onFocus not work on RN 0.64

[AdamChrist]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

Android TV onFocus not work on RN 0.64

React Native version:

System: OS: Windows 10 10.0.18363 CPU: (16) x64 Intel(R) Core(TM) i9-9900KF CPU @ 3.60GHz Memory: 11.02 GB / 31.92 GB Binaries: Node: 14.15.4 - ~\scoop\apps\nodejs-lts\current\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.10 - ~\scoop\apps\nodejs-lts\current\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: 24, 26, 27, 28, 29, 30 Build Tools: 26.0.2, 27.0.3, 28.0.3, 29.0.2, 29.0.3, 30.0.0 System Images: android-23 | Android TV ARM EABI v7a, android-28 | Android TV Intel x86 Atom Android NDK: 21.3.6528147 Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: Not Found Languages: Java: 1.8.0_151 - C:\Program Files\Java\jdk1.8.0_151\bin\javac.EXE npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.0 => 0.64.0 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. npx react-native init myApp
2. onFocus not work on TouchableOpacity or TouchableHighlight

Expected Results

onFocus will be executed when the touchable view goes into focus

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

[GeorgWolle]

Same here! My (mobile) working react native project won't call onFocus, onBlur methods. If I revert RN to 0.63.4 it works.

Tried with TouchableOpacity, TouchableHighlight, TouchableFeedback and Pressable. The only thing where I see focus (but also onFocus, onBlur methods are not called) is a button.

This really seems to be a bug in RN 0.64?

[asgvard]

I can confirm the same behavior, we are using RN on the Android TV devices and we rely on onFocus callback for highlighting the active items, and now nothing gets highlighted

[stijnstroeve]

I have also had issues with this. I reverted my project back to RN 0.63.4 and it works again.

[MwareSolutons]

Same here not working for 0.64

[stijnstroeve]

I'd like to have a look at this issue, could you assign me? @AdamChrist

[AdamChrist]

I'd like to have a look at this issue, could you assign me? @AdamChrist

No problem, but I can't assign it to you directly.

[RameshkrishnanV]

I'm using react native for Android SmartTV app, I was using hasTVPreferredFocus to handle focus, focusing on touchables and onFocus is not working after upgrading to v64.2. Nothing helps. Any help on this issue?

[RameshkrishnanV]

I'd like to have a look at this issue, could you assign me? @AdamChrist

I'm also facing this issue. Is there any solution to this issue?

[ahmadfreijeh]

I'm also facing same issue in v64.2. please any update?!

[vivekspraxa]

Same issue on 0.64.2 also

[JerryBels]

I'm using react native for Android SmartTV app, I was using hasTVPreferredFocus to handle focus, focusing on touchables and onFocus is not working after upgrading to v64.2. Nothing helps. Any help on this issue?

Doesn't hasTVPreferredFocus work only for Apple TV? The documentation says so.

[wouterds]

Can confirm this is an issue, demo repo: https://github.com/wouterds/react-native-tv-demo

On the last commit (7a0456a), with react-native 0.65.1 it won't work. If you checkout 49b1ff7 (react-native 0.63.4) it will work.

[asgvard]

I'm using react native for Android SmartTV app, I was using hasTVPreferredFocus to handle focus, focusing on touchables and onFocus is not working after upgrading to v64.2. Nothing helps. Any help on this issue?

Doesn't hasTVPreferredFocus work only for Apple TV? The documentation says so.

It does work on AndroidTV as well. In fact it can be used to force the focus onto some component by setting this to false and back to true with "setNativeProps" on both AppleTV and AndroidTV.

[asgvard]

I'm curious about the overall support and maintenance of AndroidTV by React Native team. I understand that AppleTV has moved to a community supported fork, but is AndroidTV still officially supported and tested with new releases? This onFocus issue is around for more than half a year, and this functionality is crucial for any TV app where you need to highlight an element when it gets focused. Can anyone from React Native team elaborate on this please?

[wouterds]

Exactly, critical functionality, this shouldn't just break and go unnoticed for months.

[wouterds]

Aha, you need to move from react-native to react-native-tvos. All TV related stuff has been moved to that package. It tracks react-native but with additional TV support. It won't be coming back to react-native core package.

See below:

• https://reactnative.dev/blog/2020/03/26/version-0.62#moving-apple-tv-to-react-native-tvos
• https://reactnative.dev/docs/building-for-tv
• https://github.com/react-native-tvos/react-native-tvos

To be clear: onFocus & TVEventHandler are fully working & typed in that package.

[asgvard]

Interesting enough that the AppleTV fork also includes fixes for AndroidTV then 🙂 perhaps it should be renamed to just "react-native-tv" then, otherwise it is not clear who is maintaining the AndroidTV.

[MwareSolutons]

what is also handy is the ability to add more devices as TV device such as android AOSP set-top boxes

[JerryBels]

what is also handy is the ability to add more devices as TV device such as android AOSP set-top boxes

That highly interests me, I have issues with my app on an AOSP box, while it works perfectly on my Android TV box. Care to elaborate please?

[MwareSolutons]

what we do now is remover all checks Platform.isTV and then it works fine on an stb but this is a little hacky

[RameshkrishnanV]

Hi, Is there any solution found for this issue, Even i have tried with react native v0.66, Still issue persists. Do we need to use react native tv-os? nothing mentioned in the docs about the tv-os for android devices

[RameshkrishnanV]

Interesting enough that the AppleTV fork also includes fixes for AndroidTV then 🙂 perhaps it should be renamed to just "react-native-tv" then, otherwise it is not clear who is maintaining the AndroidTV.

Is it working for Android devices?

[Bibazavr]

RN 0.68 on ios/android TouchableOpacity onFocus onBlur doesn't work at all

Step for reproduce:

const App = () => {
  return (
    <TouchableOpacity
      onFocus={(event) => console.log('onFocus', event)}
      onBlur={(event) => console.log('onBlur', event)}
    />
  )
}

Expected: see logs Actually: Doesen't see logs

[TDanks2000]

RN 0.68 on ios/android TouchableOpacity onFocus onBlur doesn't work at all

Step for reproduce:

const App = () => {
  return (
    <TouchableOpacity
      onFocus={(event) => console.log('onFocus', event)}
      onBlur={(event) => console.log('onBlur', event)}
    />
  )
}

Expected: see logs Actually: Doesen't see logs

yep same thing here any updates on this

[wouterds]

RN 0.68 on ios/android TouchableOpacity onFocus onBlur doesn't work at all Step for reproduce:

const App = () => {
  return (
    <TouchableOpacity
      onFocus={(event) => console.log('onFocus', event)}
      onBlur={(event) => console.log('onBlur', event)}
    />
  )
}

Expected: see logs Actually: Doesen't see logs

yep same thing here any updates on this

You need to switch to react-native-tvos/react-native-tvos, all TV support is being extracted from React Native core.

[TDanks2000]

RN 0.68 on ios/android TouchableOpacity onFocus onBlur doesn't work at all Step for reproduce:

const App = () => {
  return (
    <TouchableOpacity
      onFocus={(event) => console.log('onFocus', event)}
      onBlur={(event) => console.log('onBlur', event)}
    />
  )
}

Expected: see logs Actually: Doesen't see logs

yep same thing here any updates on this

You need to switch to react-native-tvos/react-native-tvos, all TV support is being extracted from React Native core.

i already switched and still onfocus and onblur are not being called

[wouterds]

@TDanks2000: please file an issue with react-native-tvos with an example repository to reproduce the issue. In my demo project - on the latest version - I cannot reproduce the issue.

[Bibazavr]

This is not only a TV issue. In bare React native on Android/iOS methods doesn't call at all

[wouterds]

This is not only a TV issue. In bare React native on Android/iOS methods doesn't call at all

Focus only works for TV platforms, iOS and Android mobile don't have a concept of "focus", there's no remote or arrows to navigate.

[TDanks2000]

This is not only a TV issue. In bare React native on Android/iOS methods doesn't call at all

Focus only works for TV platforms, iOS and Android mobile don't have a concept of "focus", there's no remote or arrows to navigate.

it should work on android stock because my android tv box is running stock android but I am using a remote, and you can also you use a keyboard on the mobile or tablet

[TDanks2000]

also windows 11 you can install stock android apps so also should work on there

[TDanks2000]

in case you just want use a keyboard

[wouterds]

Then you would need to use react-native-tvos :)

[TDanks2000]

Then you would need to use react-native-tvos :)

again i am using this and error still persists

[maximilize]

Use TouchableNativeFeedback on TV, there onFocus and so on will work without any issues.

[ROG3R-DEV]

Use TouchableNativeFeedback on TV, there onFocus and so on will work without any issues.

I can confirm that the current version of react native "TouchableNativeFeedback" really works. Tested on Android TV and Google TV

however the onFocus event is not fired.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.