search

Shopify / flash-list

A better list for React Native
https://shopify.github.io/flash-list/
MIT License
5.47k stars 281 forks source link

TouchableHighlight object inside a FlashList Losing Focus on fast key navigation with React Native TVOS #895

Open shyamsrj opened 1 year ago

shyamsrj commented 1 year ago

TouchableHighlight object inside a FlatList Losing Focus on fast key navigation

I have a FlashList 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 FlashList 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.

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:

  1. PFA test app.js
  2. Run on android emulator or with FireTV
  3. Do fast left/right key navigation with FireTV remote or with android-tv emulator's directional keypad.
  4. 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.
  5. 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.
  6. 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

DevineDecrypter commented 1 year ago

if you are using this repo for making your tvos app, use TVFocusGuideView as mentioned in it's documents, it solves many issues regarding focus management in TVs