mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Genki KondoandFacebook GitHub Bot
289c7f7180
Summary: Sticky headers (via OCScrollTrackerStickyHeader) did not work with RN because overscroll does not trigger onScroll events. This diff adds a listener to overscroll, which then emits scroll events. Changelog: [Internal][Changed] - Changed ScrollEvent's scrollX and scrollY to float --- # Context GamingActivity headers are part of the FlatList; on overscroll (when you scroll up when you're already at the top of the FlatList), the header is translated via Animated's native event. The problem on RN is that onScroll is not fired during overscroll (due to how overscroll-decor works - it merely applies a translation on the scroll view itself). Scroll events propagate to the native animated events as follows: - ReactScrollView.onScrollChanged -> ReactScrollViewHelper.updateStateOnScrollChanged -> ReactScrollViewHelper.emitScrollEvent -> EventDispatcher.dispatchEvent -> NativeAnimatedNodesManager.onEventDispatch # Approaches Two approaches were considered to fix sticky headers: - [Implemented in this diff] Attach a listener on OverScrollDecor and fire onScroll events. I ran into 2 main issues with this: - The header clips as the scroll view is translated down. This is fixed via setting clipChildren. - Move headers out of FlatList, and translate the header only for positive scroll offsets. - Requires product-side code changes - Hover outline is cut off by the header - Click-drag to scroll does not work on the header Reviewed By: javache Differential Revision: D34696042 fbshipit-source-id: 15450f31a7042ce67cdffc74614f4f7b9684d0ca