status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
react-native/React/Views
History
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
..
SafeAreaView Fix memory leak in RCTSafeAreaView 2017-11-02 08:51:34 -07:00
ScrollView new feature to support smooth bi-directional content loading 2018-01-12 19:16:00 -08:00
RCTActivityIndicatorView.h Fixes ActivityIndicatorIOS doesn't hide initially 2016-06-27 17:13:27 -07:00
RCTActivityIndicatorView.m Fixes ActivityIndicatorIOS doesn't hide initially 2016-06-27 17:13:27 -07:00
RCTActivityIndicatorViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTActivityIndicatorViewManager.m Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTAnimationType.h [LayoutAnimation] RCTAnimationTypeKeyboard 2015-06-25 09:17:01 -08:00
RCTAutoInsetsProtocol.h Automatically adjust content inset after view controller did layout subviews 2015-09-04 07:00:21 -08:00
RCTBorderDrawing.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTBorderDrawing.m Fixed fractional border width on iOS 2017-11-21 12:16:21 -08:00
RCTBorderStyle.h Add property mapping for `borderStyle` from JS to `RCTView` (iOS) 2015-12-01 09:00:28 -08:00
RCTComponent.h New implementation of handling `didUpdateReactSubviews` and `didUpdateReactSubviews` events 2017-12-19 23:46:09 -08:00
RCTComponentData.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTComponentData.m New implementation of handling `didUpdateReactSubviews` and `didUpdateReactSubviews` events 2017-12-19 23:46:09 -08:00
RCTConvert+CoreLocation.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTConvert+CoreLocation.m [MapView] Support for annotation callouts, annotation press, callout presses and pin animation 2015-06-25 09:15:21 -08:00
RCTConvert+Transform.h Drive any numerical prop via NativeAnimated 2017-01-26 18:28:53 -08:00
RCTConvert+Transform.m Fixed previously broken support for negative `scale` (`transform` style property) 2017-03-24 18:15:42 -07:00
RCTDatePicker.h Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTDatePicker.m Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTDatePickerManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTDatePickerManager.m - Adding locale prop to DatePickerIOS 2017-11-04 14:40:24 -07:00
RCTFont.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTFont.mm (iOS) Support for ExtraBold alias of Heavy (font-weight 800) 2017-10-23 11:24:18 -07:00
RCTMaskedView.h MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedView.m MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedViewManager.h MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTMaskedViewManager.m MaskedViewIOS -- A way to apply alpha masks to views on iOS 2017-07-11 15:05:57 -07:00
RCTModalHostView.h Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389) 2017-11-09 13:54:54 -08:00
RCTModalHostView.m Import RCTTVRemoteHandler only on tvOS 2018-01-09 15:46:47 -08:00
RCTModalHostViewController.h Apple TV support 1: existing Objective C code should compile for tvOS 2016-09-27 06:28:33 -07:00
RCTModalHostViewController.m Replacing all instances of [UIApplication sharedApplication] wi… 2017-04-01 03:34:41 -07:00
RCTModalHostViewManager.h iOS `presentationStyle` Modal Appearance 2017-06-20 19:22:57 -07:00
RCTModalHostViewManager.m Add onDismiss to Modal.js 2017-09-21 15:01:52 -07:00
RCTModalManager.h Add onDismiss to Modal.js 2017-09-21 15:01:52 -07:00
RCTModalManager.m Avoid oversending modalDismissed event 2017-09-23 10:46:17 -07:00
RCTNavItem.h Expose barStyle for NavigatorIOS and TabBarIOS 2017-08-25 00:14:46 -07:00
RCTNavItem.m NavigatorIOS System Icon Support 2016-09-08 17:58:50 -07:00
RCTNavItemManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavItemManager.m Expose barStyle for NavigatorIOS and TabBarIOS 2017-08-25 00:14:46 -07:00
RCTNavigator.h `reactBridgeDidFinishTransaction` was removed from RCTNavigator 2017-12-18 11:47:26 -08:00
RCTNavigator.m `reactBridgeDidFinishTransaction` was removed from RCTNavigator 2017-12-18 11:47:26 -08:00
RCTNavigatorManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTNavigatorManager.m `reactBridgeDidFinishTransaction` was removed from RCTNavigator 2017-12-18 11:47:26 -08:00
RCTPicker.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTPicker.m Adjust row height by font size in PickerIOS 2017-08-23 20:30:10 -07:00
RCTPickerManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTPickerManager.m Improve types in RCTFont API 2016-08-05 12:44:21 -07:00
RCTPointerEvents.h [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
RCTProgressViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTProgressViewManager.m Apple TV support 1: existing Objective C code should compile for tvOS 2016-09-27 06:28:33 -07:00
RCTRefreshControl.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTRefreshControl.m Fix RCTRefreshControl jumping 2017-12-03 16:15:53 -08:00
RCTRefreshControlManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTRefreshControlManager.m Allow to set refresh control title color 2016-04-16 15:15:25 -07:00
RCTRootShadowView.h Simplifying mess with RCTRootViewSizeFlexibility 2017-02-19 23:19:47 -08:00
RCTRootShadowView.m Setting `availableSize` for `RCTRootShadowView` on earlier stage 2017-03-08 19:00:14 -08:00
RCTSegmentedControl.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSegmentedControl.m Added lightweight generic annotations 2015-11-03 14:49:30 -08:00
RCTSegmentedControlManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSegmentedControlManager.m Removed exported constants for fixed-size views 2016-04-26 04:21:39 -07:00
RCTShadowView+Internal.h RCTShadowView have got `rootView` property 2017-08-24 00:05:48 -07:00
RCTShadowView+Internal.m RCTShadowView have got `rootView` property 2017-08-24 00:05:48 -07:00
RCTShadowView+Layout.h Sideeffectless measuring of shadow views 2018-01-07 18:31:20 -08:00
RCTShadowView+Layout.m Sideeffectless measuring of shadow views 2018-01-07 18:31:20 -08:00
RCTShadowView.h The Great File Renaming in RCTText 2017-12-19 20:14:00 -08:00
RCTShadowView.m New implementation of handling `didUpdateReactSubviews` and `didUpdateReactSubviews` events 2017-12-19 23:46:09 -08:00
RCTSlider.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSlider.m remove unused includes in fbobjc/Libraries 2017-02-19 18:33:49 -08:00
RCTSliderManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSliderManager.m Add option for both min/max track image. 2015-12-21 10:30:39 -08:00
RCTSwitch.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSwitch.m [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
RCTSwitchManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTSwitchManager.m Added mechanism for directly mapping JS event handlers to blocks 2015-09-02 06:11:24 -08:00
RCTTVView.h Apple TV support 4: support for input (tvOS focus engine) 2016-12-19 06:28:40 -08:00
RCTTVView.m Fix warnings in React.xcodeproj 2017-03-23 11:36:17 -07:00
RCTTabBar.h reactBridgeDidFinishTransaction was removed from RCTTabBar 2017-12-18 11:47:26 -08:00
RCTTabBar.m Fix ReactLegacy and delete RCTViewControllerProtocol 2017-12-20 15:20:00 -08:00
RCTTabBarItem.h Make testID work for iOS tabs 2017-12-04 11:17:10 -08:00
RCTTabBarItem.m Make testID work for iOS tabs 2017-12-04 11:17:10 -08:00
RCTTabBarItemManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTabBarItemManager.m Make testID work for iOS tabs 2017-12-04 11:17:10 -08:00
RCTTabBarManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTTabBarManager.m reactBridgeDidFinishTransaction was removed from RCTTabBar 2017-12-18 11:47:26 -08:00
RCTTextDecorationLineType.h <Text> module add textDecoration style attributes 2015-07-07 06:15:20 -08:00
RCTView.h Adding support for custom accessibility actions on iOS. 2017-12-04 23:31:50 -08:00
RCTView.m reactSetInheritedBackgroundColor was removed from RCTView 2017-12-18 11:47:26 -08:00
RCTViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTViewManager.m Demolishing of background color propagation infra 2017-12-19 09:11:49 -08:00
RCTWebView.h Add a injectJavaScript method to the WebView component 2017-01-06 20:29:02 -08:00
RCTWebView.m Fix iOS 11 WebView extra white space on top due to contentInsetAdjustmentBehavior 2017-10-30 23:29:20 -07:00
RCTWebViewManager.h Move all header imports to "<React/..>" 2016-11-23 07:58:39 -08:00
RCTWebViewManager.m Fix format warnings for clang 5.0 2017-09-25 10:30:53 -07:00
RCTWrapperViewController.h Fix ReactLegacy and delete RCTViewControllerProtocol 2017-12-20 15:20:00 -08:00
RCTWrapperViewController.m Fix ReactLegacy and delete RCTViewControllerProtocol 2017-12-20 15:20:00 -08:00
UIView+Private.h Improve z-index implementation on iOS 2017-05-28 21:45:32 -07:00
UIView+React.h `-[UIView _DEBUG_reactShadowView]` was removed 2017-12-19 23:46:09 -08:00
UIView+React.m `-[UIView _DEBUG_reactShadowView]` was removed 2017-12-19 23:46:09 -08:00