Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TouchableHighlight object inside a RecyclerListView Losing Focus on fast key navigation with React Native TVOS #768

Open
shyamsrj opened this issue Aug 11, 2023 · 0 comments

Comments

@shyamsrj
Copy link

TouchableHighlight object inside a RecyclerListView/FlashList/FlatList Losing Focus on fast key navigation

I have a RecyclerListView/FlashList/FlatList with 100 TouchableHighlight with images.

On navigation, the TouchableHighlight gets the focus properly (underlay colour).

but when we do fast navigation (left/right keys), the Focus is lost. This happens when you see empty scrolling without containers, you can stop here to load the items and see the focus is lost.

When checked with Flipper, The focus is given to the parent RecyclerListView/FlashList/FlatList container tag.

On further left/right arrow keys able to highlight the children again.

This issue is easily reproduced with FireTV-4k

This issue is very easily seen with RecyclerList and also happens with FlatList.

With android emulator little hard to reproduce running in MAC-M1, can also reproduce by making the app little slow with some timers/keeping-js-busy. (use on-screen directional pad for key navigation for fast key repeats.)

A Test app is provided with FlatList and FlashList and recyclerListView.

We are facing this issue in our project running on fireTv with recycler list.
has anyone faced this issue or already have any solution for this ?

Steps to reproduce:

PFA test app.js

  1. Run on android emulator or with FireTV

  2. Do fast left/right key navigation with FireTV remote or with android-tv emulator's directional keypad.
    You see the focus changing on navigation, but on fast navigation see the focus is Lost. This happens when you see empty scrolling without containers, you can stop here to load the items and see the focus is lost.

  3. If you are running on android emulator and not seeing the issue, please make the app slow by configuring the following values in the test app provided.
    Please configure the following values before running.

    let TIMERS_COUNT = 35; // On FireTV 4k, you can just set to 0. On MAC with android-tv emulator set to 35
    let MATH_LOOP = 2500; // on FireTV 4k, you can just set this to 1000 or calibrate this to see the issue with emulator running in MAC.

App.js.zip

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant