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

[shyamsrj]

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