Android TV onFocus not work on RN 0.64 #31391

AdamChrist · 2021-04-20T08:54:39Z

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.

npx react-native init myApp
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 · 2021-04-25T08:53:03Z

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 · 2021-04-26T12:05:03Z

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 · 2021-04-28T18:23:39Z

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

MwareSolutons · 2021-05-19T11:28:21Z

Same here not working for 0.64

stijnstroeve · 2021-05-19T13:06:36Z

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

AdamChrist · 2021-06-03T04:30:03Z

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 · 2021-06-30T05:26:34Z

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 · 2021-06-30T05:52:57Z

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 · 2021-07-07T07:30:29Z

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

vivekspraxa · 2021-08-03T10:33:01Z

Same issue on 0.64.2 also

JerryBels · 2021-08-31T08:51:54Z

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 · 2021-09-10T12:47:31Z

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 · 2021-09-10T13:10:44Z

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 · 2021-09-10T13:26:48Z

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 · 2021-09-10T14:01:01Z

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

wouterds · 2021-09-17T08:42:48Z

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:

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

asgvard · 2021-09-17T10:14:00Z

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 · 2021-09-17T10:55:34Z

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

JerryBels · 2021-09-17T12:13:14Z

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 · 2021-09-17T12:17:57Z

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 · 2021-11-11T07:21:49Z

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 · 2021-11-11T07:22:31Z

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 · 2022-11-22T06:56:15Z

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 · 2022-12-21T19:25:19Z

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 · 2022-12-21T19:57:17Z

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 · 2022-12-21T19:59:54Z

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 · 2022-12-21T20:09:09Z

@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 · 2022-12-22T14:14:26Z

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

wouterds · 2022-12-22T14:19:57Z

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 · 2022-12-22T16:18:57Z

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 · 2022-12-22T16:19:32Z

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

TDanks2000 · 2022-12-22T16:19:52Z

in case you just want use a keyboard

wouterds · 2022-12-22T16:52:40Z

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

TDanks2000 · 2022-12-22T17:01:29Z

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

again i am using this and error still persists

maximilize · 2022-12-28T00:33:50Z

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

ROG3R-DEV · 2023-04-09T03:43:38Z

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 · 2024-01-06T05:40:46Z

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 · 2024-01-13T05:40:47Z

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

AdamChrist added the Needs: Triage 🔍 label Apr 20, 2021

github-actions bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 6, 2024

github-actions bot closed this as completed Jan 13, 2024

Android TV onFocus not work on RN 0.64 #31391

Android TV onFocus not work on RN 0.64 #31391

Comments

AdamChrist commented Apr 20, 2021

Description

React Native version:

Steps To Reproduce

Expected Results

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

GeorgWolle commented Apr 25, 2021

asgvard commented Apr 26, 2021

stijnstroeve commented Apr 28, 2021

MwareSolutons commented May 19, 2021

stijnstroeve commented May 19, 2021 • edited Loading

AdamChrist commented Jun 3, 2021

RameshkrishnanV commented Jun 30, 2021 • edited Loading

RameshkrishnanV commented Jun 30, 2021 • edited Loading

ahmadfreijeh commented Jul 7, 2021

vivekspraxa commented Aug 3, 2021

JerryBels commented Aug 31, 2021

wouterds commented Sep 10, 2021

asgvard commented Sep 10, 2021

asgvard commented Sep 10, 2021

wouterds commented Sep 10, 2021

wouterds commented Sep 17, 2021 • edited Loading

asgvard commented Sep 17, 2021

MwareSolutons commented Sep 17, 2021

JerryBels commented Sep 17, 2021

MwareSolutons commented Sep 17, 2021

RameshkrishnanV commented Nov 11, 2021

RameshkrishnanV commented Nov 11, 2021

Bibazavr commented Nov 22, 2022

TDanks2000 commented Dec 21, 2022

wouterds commented Dec 21, 2022 • edited Loading

TDanks2000 commented Dec 21, 2022

wouterds commented Dec 21, 2022

Bibazavr commented Dec 22, 2022

wouterds commented Dec 22, 2022

TDanks2000 commented Dec 22, 2022

TDanks2000 commented Dec 22, 2022

TDanks2000 commented Dec 22, 2022

wouterds commented Dec 22, 2022

TDanks2000 commented Dec 22, 2022

maximilize commented Dec 28, 2022

ROG3R-DEV commented Apr 9, 2023 • edited Loading

github-actions bot commented Jan 6, 2024

github-actions bot commented Jan 13, 2024

stijnstroeve commented May 19, 2021 •

edited

Loading

RameshkrishnanV commented Jun 30, 2021 •

edited

Loading

RameshkrishnanV commented Jun 30, 2021 •

edited

Loading

wouterds commented Sep 17, 2021 •

edited

Loading

wouterds commented Dec 21, 2022 •

edited

Loading

ROG3R-DEV commented Apr 9, 2023 •

edited

Loading