allow custom StickyHeader in ScrollView-based components #25428
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
the
CLA Signed
cpojer
reviewed
Jul 1, 2019
| @@ -18,7 +18,7 @@ import type {LayoutEvent} from '../../Types/CoreEventTypes'; | |||
|
|
|||
| const AnimatedView = AnimatedImplementation.createAnimatedComponent(View); | |||
|
|
|||
| type Props = { | |||
| export type ScrolViewStickyHeaderProps = { | |||
There was a problem hiding this comment.
I think I would prefer calling this Props and then using import type {Props as ScrollViewStickyHeaderProps} where it is being imported.
cpojer
suggested changes
Jul 1, 2019
facebook-github-bot
approved these changes
Jul 1, 2019
There was a problem hiding this comment.
@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
|
This pull request was successfully merged by @vonovak in e6c7846. When will my fix make it into a release? | Upcoming Releases |
M-i-k-e-l
pushed a commit
to M-i-k-e-l/react-native
that referenced
this pull request
Mar 10, 2020
) Summary: This PR adds support for custom `StickyHeaderComponent` to be used in ScrollView (and by extension in FlatList, SectionList..). Motivation: I've been working on a FlatList with hidable header that has a search field in it. Something like https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a but using a FlatList w/ pull-to-refresh. The implementation can be found at https://snack.expo.io/vonovak/hidable-header-flatlist . I used the `ListHeaderComponent` prop to render the custom header - as opposed to absolute positioning which is used in the linked article because I also need the loading indicator (I added `refreshing` and `onRefresh` for that) to show up above the header. I proceeded by adding `stickyHeaderIndices={[0]}` to keep the header at the top, which seems to be the idiomatic way to do so. Then I added `Animated.View` with custom translation logic to the rendered header. All appears to be working fine at the first sight - when you tap any item, you'll see it react to touch (red underlay). You'll also see the header becomes hidden if I scroll far enough and appears again after scrolling up. BUT - when you scroll down so that the header becomes hidden and tap the first visible item in the list, it will not react to touches! The reason is that `ScrollViewStickyHeader` https://github.com/facebook/react-native/blob/9a84970c35d22b68fb3d8eac019c7f415a14c888/Libraries/Components/ScrollView/ScrollView.js#L984 has its own translation logic and when I tap onto the item at the top of the list, it seems like I'm tapping the item but I'm in fact tapping that `ScrollViewStickyHeader`. I tried working around this by not specifying `stickyHeaderIndices={[0]}` and using `ListHeaderComponentStyle` prop (this needed some additional changes in https://github.com/facebook/react-native/blob/9a84970c35d22b68fb3d8eac019c7f415a14c888/Libraries/Lists/VirtualizedList.js#L786, and the animation is junky for some reason - as if the header always needed to "catch up" with the scroll offset, causing jitter) and `CellRendererComponent` (junky animations too), but concluded that allowing to specify custom `StickyHeaderComponent` is the cleanest way to make something like this work. I'm slightly surprised I needed to do all this to make such a usual pattern work - am I missing something? ## Changelog [GENERAL] [ADDED] - allow custom StickyHeader in ScrollView-based components Pull Request resolved: facebook#25428 Test Plan: This is a minor change that should not break anything; tested locally. Differential Revision: D16073016 Pulled By: cpojer fbshipit-source-id: cdb878d12a426068dbaa9a54367c1190a6c55328
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds support for custom
StickyHeaderComponentto be used in ScrollView (and by extension in FlatList, SectionList..).Motivation: I've been working on a FlatList with hidable header that has a search field in it. Something like https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a but using a FlatList w/ pull-to-refresh. The implementation can be found at https://snack.expo.io/@vonovak/hidable-header-flatlist .
I used the
ListHeaderComponentprop to render the custom header - as opposed to absolute positioning which is used in the linked article because I also need the loading indicator (I addedrefreshingandonRefreshfor that) to show up above the header.I proceeded by adding
stickyHeaderIndices={[0]}to keep the header at the top, which seems to be the idiomatic way to do so. Then I addedAnimated.Viewwith custom translation logic to the rendered header.All appears to be working fine at the first sight - when you tap any item, you'll see it react to touch (red underlay). You'll also see the header becomes hidden if I scroll far enough and appears again after scrolling up. BUT - when you scroll down so that the header becomes hidden and tap the first visible item in the list, it will not react to touches! The reason is that
ScrollViewStickyHeaderreact-native/Libraries/Components/ScrollView/ScrollView.js
Line 984 in 9a84970
has its own translation logic and when I tap onto the item at the top of the list, it seems like I'm tapping the item but I'm in fact tapping that
ScrollViewStickyHeader.I tried working around this by not specifying
stickyHeaderIndices={[0]}and usingListHeaderComponentStyleprop (this needed some additional changes inreact-native/Libraries/Lists/VirtualizedList.js
Line 786 in 9a84970
CellRendererComponent(junky animations too), but concluded that allowing to specify customStickyHeaderComponentis the cleanest way to make something like this work. I'm slightly surprised I needed to do all this to make such a usual pattern work - am I missing something?Changelog
[GENERAL] [ADDED] - allow custom StickyHeader in ScrollView-based components
Test Plan
This is a minor change that should not break anything; tested locally.