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

ListView scrolling in Apple TV (TV OS) #12793

Closed
milhauscz opened this Issue Mar 8, 2017 · 14 comments

Comments

Projects
None yet
5 participants
@milhauscz

milhauscz commented Mar 8, 2017

Description

In an Apple TV app I use a horizontal ListView. When the last visible item is focused, sometimes the ListView starts frantically scrolling, reaches the end of the ListView and then even bounces back and scrolls to the first item again.

Reproduction

Can be reproduced with both horizontal and vertical ListView. It seems that the bug occurs more if the items inside the ListView are bigger.

Solution

So far I didn't find any solution.

Additional Information

  • React Native version: 0.42
  • Platform: TV OS (Apple TV)
  • Operating System: MacOS
@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos
Contributor

hramos commented Mar 8, 2017

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 8, 2017

Collaborator

I'll take a look....

Collaborator

dlowder-salesforce commented Mar 8, 2017

I'll take a look....

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 8, 2017

Collaborator

Yep if you scale up the grid cells in ListViewGridLayoutExample.js this is pretty reproducible. Looks like a bad interaction between native scrolling by the focus engine and ScrollView code. This will take some time to debug properly.

Collaborator

dlowder-salesforce commented Mar 8, 2017

Yep if you scale up the grid cells in ListViewGridLayoutExample.js this is pretty reproducible. Looks like a bad interaction between native scrolling by the focus engine and ScrollView code. This will take some time to debug properly.

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 9, 2017

Collaborator

Debugging indicates that the problem is all happening on the native side -- setting breakpoints or modifying JS code has no effect.

Collaborator

dlowder-salesforce commented Mar 9, 2017

Debugging indicates that the problem is all happening on the native side -- setting breakpoints or modifying JS code has no effect.

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 10, 2017

Collaborator

Native debugging indicates that the problem is actually in the way the focus engine implements scrolling, and there are some recommendations on how to fix this.... https://forums.developer.apple.com/thread/19638

Collaborator

dlowder-salesforce commented Mar 10, 2017

Native debugging indicates that the problem is actually in the way the focus engine implements scrolling, and there are some recommendations on how to fix this.... https://forums.developer.apple.com/thread/19638

@shergin

This comment has been minimized.

Show comment
Hide comment
@shergin

shergin Mar 10, 2017

Contributor

Possible related: #12374

Contributor

shergin commented Mar 10, 2017

Possible related: #12374

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 10, 2017

Collaborator

@milhauscz this can be fixed by setting the ListView's removeClippedSubviews property to false. Otherwise, tvOS will believe that the bottommost unclipped view is the last one, and try to scroll all the way to the bottom of the view, leading to the unpleasant behavior you are seeing. For example code see the commits in https://github.com/dlowder-salesforce/react-native/tree/tvos-listview

Collaborator

dlowder-salesforce commented Mar 10, 2017

@milhauscz this can be fixed by setting the ListView's removeClippedSubviews property to false. Otherwise, tvOS will believe that the bottommost unclipped view is the last one, and try to scroll all the way to the bottom of the view, leading to the unpleasant behavior you are seeing. For example code see the commits in https://github.com/dlowder-salesforce/react-native/tree/tvos-listview

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 11, 2017

Collaborator

https://github.com/dlowder-salesforce/react-native/tree/tvos-listview-fix has a modification to actually fix this for all ListViews, and some changes to the UIExplorer ListViewGridLayoutExample. When you run the example on tvOS with these changes, the scrolling problem is fixed, and also you can actually see new cells render at the bottom of the screen as you navigate down using the TV remote.

Collaborator

dlowder-salesforce commented Mar 11, 2017

https://github.com/dlowder-salesforce/react-native/tree/tvos-listview-fix has a modification to actually fix this for all ListViews, and some changes to the UIExplorer ListViewGridLayoutExample. When you run the example on tvOS with these changes, the scrolling problem is fixed, and also you can actually see new cells render at the bottom of the screen as you navigate down using the TV remote.

@milhauscz

This comment has been minimized.

Show comment
Hide comment
@milhauscz

milhauscz Mar 13, 2017

@dlowder-salesforce Works like a charm, thank you for your help!

milhauscz commented Mar 13, 2017

@dlowder-salesforce Works like a charm, thank you for your help!

@shergin

This comment has been minimized.

Show comment
Hide comment
@shergin

shergin Mar 15, 2017

Contributor

@dlowder-salesforce, @milhauscz I would love to fix this issue properly... but... Could you please confirm one more time: Does setting removeClippedSubviews really fix the problem?
I am asking because... I double check and found that setting removeClippedSubviews for UIScrollView does literally nothing, the proof:

Contributor

shergin commented Mar 15, 2017

@dlowder-salesforce, @milhauscz I would love to fix this issue properly... but... Could you please confirm one more time: Does setting removeClippedSubviews really fix the problem?
I am asking because... I double check and found that setting removeClippedSubviews for UIScrollView does literally nothing, the proof:

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 15, 2017

Collaborator

@shergin Yes it really fixes the problem... PR #12944 fixes it on the JS side.

Collaborator

dlowder-salesforce commented Mar 15, 2017

@shergin Yes it really fixes the problem... PR #12944 fixes it on the JS side.

@dlowder-salesforce

This comment has been minimized.

Show comment
Hide comment
@dlowder-salesforce

dlowder-salesforce Mar 15, 2017

Collaborator

Inspecting the code, it seems that the real implementation that uses removeClippedSubviews is in RCTView.m and RCTViewManager.m

Collaborator

dlowder-salesforce commented Mar 15, 2017

Inspecting the code, it seems that the real implementation that uses removeClippedSubviews is in RCTView.m and RCTViewManager.m

@shergin

This comment has been minimized.

Show comment
Hide comment
@shergin

shergin Mar 15, 2017

Contributor

@dlowder-salesforce Oh, thank you! I missed that this property is also proxied to ScrollContentContainerViewClass.

Contributor

shergin commented Mar 15, 2017

@dlowder-salesforce Oh, thank you! I missed that this property is also proxied to ScrollContentContainerViewClass.

@shergin shergin added the 🔷iOS label Mar 15, 2017

@hramos

This comment has been minimized.

Show comment
Hide comment
@hramos

hramos Jul 25, 2017

Contributor

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

Contributor

hramos commented Jul 25, 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

  • Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
  • If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
  • Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

@hramos hramos added the Icebox label Jul 25, 2017

@hramos hramos closed this Jul 25, 2017

@facebook facebook locked as resolved and limited conversation to collaborators Jul 25, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.