RE: [Bug - Flatlist] Focus gets lost when using flatlist with numColumns

:warning: Before you continue


Before submitting a bug report, please review our troubleshooting documentation at https://developer.amazon.com/docs/kepler-tv/troubleshoot-overview.html.

If you still want to file a bug report, please make sure to fill in all the details below and provide the necessary information.

NOTE: PLEASE ONLY REPORT A SINGLE BUG USING THIS TEMPLATE.
If you’re experiencing multiple issues, please file a separate report for each.


:backhand_index_pointing_right: Bug Description


1. Summary

I am reoppening the issue reported in this ticket - https://community.amazondeveloper.com/t/bug-flatlist-focus-gets-lost-when-using-flatlist-with-numcolumns/11074

We are having issues with using flatList infinite pagination (using onEndReached) along with numColumns, whenever new data is added to the flatlist’s data prop, the data gets rendered but at the same time app loses the focus. If we press a d-pad button to bring back the focus, it goes to a random focusable element and does not go back to the previously focused item.

  1. Screen-Record of the Bug - https://drive.google.com/file/d/1Ipk0ShoTwEzfqgxZPnH8yJoNowyXmzTS/view?usp=sharing

  2. Minimal reproduction kepler app - https://drive.google.com/file/d/1QMSisebMA5Q2GnLKUq-wv7LtpcOXA8Pd/view?usp=sharing

App Name:
App Link on Amazon Appstore (found through Developer Console → Actions column in App List → View on Amazon.com):

Bug Severity
Select one that applies

  • Impacts operation of app
  • Blocks current development
  • Improvement suggestion
  • Issue with documentation (If selected, please share the doc link and describe the issue)
  • Other

2. Steps to Reproduce

  1. Create a Flatlist Grid using numColumns.
  2. Enable it to have infinite scrolling by adding more data to the list using onEndReached
  3. Observe the behaviour when you reach the end and more data is rendered in the list.

3. Observed Behavior

Explain what actually happened, noting any discrepancies or malfunctions.

When more data is added to the list on `onEndReached`, the focus gets lost.

4. Expected Behavior

Describe what you expected the SDK to do under normal operation.

Focus should stay at the currently focused component 

4.a Possible Root Cause & Temporary Workaround

Fill out anything you have tried. If you don’t know, N/A is acceptable

1. Tried fixing it by making the changes suggested in this thread - https://github.com/facebook/react-native/pull/43205
2. Tried the solutions discussed in this - https://community.amazondeveloper.com/t/bug-flatlist-focus-gets-lost-when-using-flatlist-with-numcolumns/11074

5. Logs or crash report

(Please make sure to provide relevant logs as attachment and share VPKG file with your Amazon contact)

For crash issues, please refer this guide for faster troubleshooting: https://developer.amazon.com/docs/kepler-tv/detect-crash.html.

  • App/Device Logs

  • Crash Logs

  • Crash Report

  • For issues with Kepler Studio Extension, please share log files from below folders:

     ~/.vscode/extensions/amazon.kepler-extension-<version>/ExtensionLogs
     ~/.vscode/extensions/amazon.kepler-ui-extension-<version>/ExtensionLogs
    

6. Environment

Please fill out the fields related to your bug below:

  • SDK Version: 0.20.2975
  • App State: Foreground
  • OS Information
    Please ssh into the device via kepler exec vda shelland copy the output from cat /etc/os-releaseinto the answer section below. Note, if you don’t have a simulator running or device attached kepler exec vda shell will respond with vda: no devices/emulators found
NAME="OS"
OE_VERSION="4.0.0"
OS_MAJOR_VERSION="1"
OS_MINOR_VERSION="1"
RELEASE_ID="2"
OS_VERSION="1.1"
BRANCH_CODE="VegaMainlineTvIntegration"
BUILD_DESC="OS 1.1 (VegaMainlineTvIntegration/1037420)"
BUILD_FINGERPRINT="1.0.3742.0(9a1d8dfa7da5d600)/1037420N:user/dev-keys"
BUILD_VARIANT="user"
BUILD_TAGS="dev-keys"
BUILD_DATE="Sun Jul 06 22:51:18 UTC 2025"
BUILD_TIMESTAMP="1751842278"
VERSION_NUMBER="201113742030"

7. Example Code Snippet / Screenshots / Screengrabs

Include any relevant code or component setup in React Native that can help reproduce the bug.

  1. Download Minimal kepler app with the bug - https://drive.google.com/file/d/1QMSisebMA5Q2GnLKUq-wv7LtpcOXA8Pd/view?usp=sharing
  2. Install dependancies and run the app.
  3. Observe the behaviour when you reach the end of the list and more data is added.

:backhand_index_pointing_right: Playback Issues


If this is a playback issue, please provide your VPKG and/or content URL, any pre-conditions (like geo-location) [Share privately with your Amazon contact] , and let us know if it’s x86 or arm7.


<!-- Describe your playback issue if applicable -->

Please share the following details in addition:_

  • Player SDK: [Bitmovin, Shaka, ...]
  • Player SDK Version: [e.g. 1.23]
    • Audio Codecs: [AAC, ...]
    • Video Codecs: [h.264, mp4]
    • Manifest Types: [m3u8, dash, etc ..]

Q: Would you like to be contacted to share your latest VPKG compiled with latest SDK:

[Y/N] [Share privately with your Amazon contact]

Q: VPN or Login needed to verify functionality in VPKG?

[Y/N] [Share privately with your Amazon contact]

Q: If applicable, please provide your media/content url
If this is created dynamically, tokenized, etc please provide a way for us to access it

[N/A or Content / Media Url for testing] [Share privately with your Amazon contact]

Q: Are there any special headers required to reproduce the issue you are facing?

[N/A or Insert Headers]

Additionally please provide the following if possible
Provide Screenshots / Screengrabs / Logs. Please include as much information as you can that will help debug.

<!-- Answer here if applicable --> 

:backhand_index_pointing_right: Additional Context


Any Additional Context you would like to provide?
Add any other relevant information, such as recent updates to the SDK, dependencies, or device OS that may affect the bug.

<!-- Answer here if applicable  --> 

Hi @Chandraprakash_Sutha
Thank you for bringing this to our notice. The team is looking into it and we’ll get back to you with an update soon.
Warm regards,
Ivy

Thank you Ivy, looking forward to the update.

Hi @Chandraprakash_Sutha
Just to be on the same page, did you try out all the probable workarounds given as a response to your last issue?

Please try this suggested solution:
Root Cause: When new items are appended via onEndReached in a paginated way, the previously focused item often gets unmounted and remounted. I tried your sample code over React native tvOS and this seems to be an open issue there(React native tvOS ) as well where focus becomes unpredictable on dynamic item updates

App side Fix: Capture the last focused index using onFocus, and after adding new items, assign hasTVPreferredFocus={true} to that same index. This guides React Native TV to restore focus predictably.

  • You should consider preserving focus with hasTVPreferredFocus. ie. Each item checks if it’s the last focused index and conditionally sets hasTVPreferredFocus. This prevents the TV runtime from guessing the focus when new items arrive.
  • Updating lastFocusedIndex on onFocus. ie. Ensuring the next batch of items respects the user’s last interaction.
  • Using extraData in FlatList. ie. Guaranteeing proper re-render when lastFocusedIndex changes, which is critical for updating focus props.
  • Timed reset of preferred focus. ie. ensuring preferred focus doesn’t linger forever and accidentally affect future focus behavior when it’s no longer relevant.

Warm regards,
Ivy

HI Ivy, thanks for the reply.

Yes, i tried the solutions from my previous post, but that did not fix it. Hence, had to create this post.
I will try the workaround you suggested and will let you know.

Thanks,
Chandra

Sure @Chandraprakash_Sutha, in the meantime, I’ll look around for more solutions as well.
Warm regards,
Ivy

Hi @Chandraprakash_Sutha
Did you get a chance to try the workaround? Please let us know if the issue still persists.
Warm regards,
Ivy

Hi @Ivy_Mahajan, I am currently working on few higher priority tasks.
I will try it as soon as i am done with those and will let you know.

Thanks.

Hi @Ivy_Mahajan, I tried the solution you provided but its not working.
Grid is not honouring its items’ hasTvPreferredFocus when new data is added. When new data was added the item at 0th position got focused even though the previously focused item’s hasTvPreferredFocus was set to true.

It would be helpful if you could provide a minimal code for the fix that you suggested.

Thanks,
Chandra

Hi @Chandraprakash_Sutha
Let me work on providing you the minimal code for this and also check for a better fix/workaround for your issue.
I’ll update you ASAP.
Warm regards,
Ivy

Thank you @Ivy_Mahajan

Hi @Chandraprakash_Sutha

Apologies for the delay.

FlatList with numColumns recalculates the entire grid layout when new data is added through onEndReached, resulting in component unmounting and remounting, which consequently causes focus loss.

To address this issue, I implemented a solution utilizing two nested FlatLists as an alternative to the numColumns approach. In this architecture, the outer FlatList is responsible for managing vertical scrolling and pagination, while the inner FlatList handles the horizontal row layout. When new data is appended, the existing rows maintain identical references, allowing existing row components to be preserved and focus to be retained within the currently focused row. I have validated this solution.

Would you like to give this a try?

Warm regards,
Ivy

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.