react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Improve android horizontal snap to scroll when pagingEnabled and snapToInterval

Open AndreiCalazans opened this issue 3 years ago • 1 comments

Summary

We implemented a TabView component using a ScrollView. it works nicely overall on both iOS and Android with the exception of one edge case.

On Android when we release our finger while holding, the scroll to snap position is very slow and even jumpy at times on lower end Android devices.

Investigating ReactHorizontalScrollView.java this is caused by the mScroller.fling animation receiving very low values for its velocityX param.

This patch gives a little boost to velocityX when the flingAndSnap's velocityX argument is zero.

This isn't the first time this boost has been done as we can see in previous lines. The multiplier (50) was chosen based on experimenting the UI.

Without changes:

before_changes.webm

With changes:

android_demo_tabview.webm

Changelog

[Android] [Changed] - Increased horizontal snap to velocity when pagingEnabled and snapToInterval is used on the ScrollView.

[Android] [Added] - Added a TabView implementation example to RNTester app for Android based on ScrollView.

Test Plan

AndreiCalazans avatar Sep 21 '22 19:09 AndreiCalazans

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

facebook-github-bot avatar Oct 01 '22 01:10 facebook-github-bot

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

github-actions[bot] avatar Apr 27 '23 12:04 github-actions[bot]