react-native/Libraries
Spencer Ahrens cae7179c94 new feature to support smooth bi-directional content loading
Summary:
== Problem / Background ==

Most lists paginate in a single direction (standard infinite list), but some paginate in both directions. Most common example is a chat thread where new messages show up on the bottom, and old content can be loaded by scrolling up. Comment threads are another example.

Right now, adding content to the bottom of a scroll view is smooth - the content doesn't jump. But when adding to the top of the scrollview, the content gets pushed down, which is jarring (note this may appear reversed because of inverting the list which is common for chat applications).

== Approach ==

The basic idea is simple - we set a flag in JS, then for every uimanager transaction, we record which is the first eligible and visible view in the ScrollView, and compare it's new origin to the old one. If it has changed, we update the contentOffset of the ScrollView to compensate.

This is done by observing `willPerformMounting` directly (only from scrollviews that have this new property set), and then observing the prev state with prependUIBlock and making the update synchronously in addUIBlock to avoid any flicker.

There is also a way to skip views that we don't care about, like a spinner at the top of the view that we don't want to stay in place - we actually want it to get pushed up by the new content, replaced visually in the viewport.

== Notes ==

Most chat applications will probably want to do a scrollToTop when new content comes in and the user is already scrolled at or near the bottom.

This is glitchy if visible children are re-ordered, which could be fixed with additional logic, but it doesn't come up in the type of applications we're targetting here so punting on that.

== Test Plan ==

https://youtu.be/4GcqDGz9eOE

Reviewed By: shergin

Differential Revision: D6696921

fbshipit-source-id: 822e7dfcb207006cd1ba098356324ea81f619428
2018-01-12 19:16:00 -08:00
..
ART Fixed black ARTSurfaceView 2017-12-19 19:46:06 -08:00
ActionSheetIOS Flow Type ActionSheetIOS 2017-12-13 16:19:21 -08:00
Alert Migrate additional docs to the new format 2017-11-20 13:16:12 -08:00
Animated Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
AppState Migrate additional docs to the new format 2017-11-20 13:16:12 -08:00
BatchedBridge Finish migration from jasmine to jest 2018-01-08 14:17:55 -08:00
Blob Upgrade to 1.9.1 2017-12-06 17:34:26 -08:00
BugReporting Add extra data view to RN RedBox 2017-12-14 10:50:24 -08:00
CameraRoll iOS: Fix Crash when CameraRoll is getting assets from iCloud and no filename is provided. #13671 2018-01-12 00:16:07 -08:00
Components new feature to support smooth bi-directional content loading 2018-01-12 19:16:00 -08:00
Core Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
EventEmitter RN: Improve NativeEventEmitter Flow Types 2017-10-13 08:04:17 -07:00
Experimental Fix re-render case on SwipeableRow 2018-01-11 15:42:17 -08:00
Geolocation re #17486 - set _locationManager if auth skipped 2018-01-12 19:00:36 -08:00
Image remove embeddedBundleURL 2017-12-21 12:02:32 -08:00
Inspector Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
Interaction @allow-large-files [Flow] Upgrade xplat/js to flow v0.63 2018-01-08 12:49:53 -08:00
JSInspector Add Network agent 2016-11-02 12:29:15 -07:00
LayoutAnimation @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
Linking fix flow warning and typo 2017-09-08 14:46:14 -07:00
LinkingIOS Standardize project indentation settings on 2 spaces 2017-07-31 05:20:03 -07:00
Lists Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
Modal Add onDismiss to Modal.js 2017-09-21 15:01:52 -07:00
NativeAnimation Renaming uiManagerWillFlushUIBlocks -> uiManagerWillPerformMounting 2017-12-11 17:10:48 -08:00
Network Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
Performance Log query name for fetchRelayQuery 2018-01-11 04:47:57 -08:00
PermissionsAndroid Update documentation for PermissionsAndroid 2017-08-16 15:01:51 -07:00
PushNotificationIOS Add support for "thread-id" in PushNotificationIOS 2018-01-10 17:47:28 -08:00
RCTTest RNTester: Relax Bridge Release Check 2018-01-05 15:05:31 -08:00
ReactNative Support for inherited events in view managers 2018-01-11 19:04:14 -08:00
Renderer Temporarily patched Map/Set non-extensible check into RN dev renderer 2017-12-05 12:27:12 -08:00
Sample Standardize project indentation settings on 2 spaces 2017-07-31 05:20:03 -07:00
Settings Fix infinite recursion in RCTSettingsManager init 2017-08-09 09:39:40 -07:00
Share Flow 0.59 xplat/js deploy 2017-11-10 21:15:48 -08:00
Storage Migrate additional docs to the new format 2017-11-20 13:16:12 -08:00
StyleSheet @allow-large-files [Flow] Upgrade xplat/js to flow v0.63 2018-01-08 12:49:53 -08:00
SurfaceBackedComponent RCTSurface: Couple helper functions for Stage 2017-12-03 20:16:35 -08:00
SurfaceHostingComponent Add explicit componentControllerClass to CKComponent 2018-01-10 02:48:09 -08:00
Text CI for iOS fixed 2018-01-12 07:46:17 -08:00
Types Tweak FIGListItem layout 2017-12-18 18:31:19 -08:00
Utilities Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
Vibration Run eslint --fix 2017-10-09 17:46:44 -07:00
WebSocket adds --port option to `react-native run-ios` as well as patches port … 2018-01-04 20:11:10 -08:00
Wrapper Yoga float vs. CoreGraphics float in RCTWrapper 2018-01-08 14:48:55 -08:00
fishhook Merge fishhook.xcodeproj in RCTWebSocket 2017-08-09 07:48:09 -07:00
polyfills Fixing eslint-comments warnings 2018-01-08 17:04:29 -08:00
react-native Switch to `declare module.exports` syntax 2017-12-14 16:31:14 -08:00
vendor @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
.eslintrc Disallow trailing commas in react-native-github 2017-08-17 16:20:04 -07:00
Promise.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00
promiseRejectionIsError.js @allow-large-files Flow v0.54.0 2017-09-06 03:33:43 -07:00