fix(CX-2543): Fix performance with my collection search

[lordkiz]

This PR resolves CX-2543

Description

Previous Issues this PR fixes:

• MyCollection screen hangs because we try to store yScrollOffset
• Header animation into view is a bit janky
• When moving from FilteredStateZero to another state, SearchBar jumps across the screen from the top to the bottom
• Switching from Grid to List view, search bar jumps from top to bottom
• SearchBar is added to StickyHeader thereby reducing available scrollable area

What was done in this PR:

• Remove need for scrolloffset, instead using staticHeader height to scroll
• Remove hideStaticHeader and showStaticHeader. Instead get a handle on the inner flatlist and perform scroll on it. This removes the jumping from bottom to top.
• Pass the search bar as a header component instead, thereby not reducing the scrollable area.
• contentOffset to initially hide the header.
• When switching from Grid to List or to ZerofilteredArtworks state: SearchBar should remain at its previous position and not jump across screens, SearchBar should remain focused if was previously focused on the previous View, and do not hide the searchbar if it has been interacted with on a previous View

Possible Remaining issues:

• iOS: None
• Android: User will have to have scrolled atleast an offset of greater than zero to reveal hidden search bar.

coll-search-ios.mp4

coll-search-android.mp4

PR Checklist

• I tested my changes on iOS / Android.
• I added screenshots or videos to illustrate my changes.
• I added Tests and Stories for my changes.
• I added an app state migration.
• I hid my changes behind a feature flag.

To the reviewers 👀

• I would like at least one of the reviewers to run this PR on the simulator or device.

Changelog updates

Changelog updates

Cross-platform user-facing changes

• Fix performance issues associated with MyCollectionSearch - kizito

iOS user-facing changes

Android user-facing changes

Dev changes

Need help with something? Have a look on our docs, or get in touch with us.

[olerichter00]

This is great work! 🌟 I've tested it on the simulator and it works very well. I'll approve but please let someone else review as well before merging.

[olerichter00]

Can we just check for the type of the header component and change this to:

Suggested change

	return React.isValidElement(HeaderComponent) ? (
	<View onLayout={this.onHeaderLayout}>{HeaderComponent}</View>
	) : (
	<View onLayout={this.onHeaderLayout}>
	<HeaderComponent />
	</View>
	)
	return (
	<View onLayout={this.onHeaderLayout}>
	<HeaderComponent />
	</View>
	)

[lordkiz]

@olerichter00 I think it reduces ambiguity. Reason being that this allows for devs to pass () => </> or Element as is. Typically this Header should be in a ListHeaderComponent where you would pass element that passes React.isValidElement, but it isn't because of how the grid is composed. I think the original authors wanted devs to have the freedom to use it as they would typically use a FlatList's ListHeaderComponent and I think that makes a lot of sense. I only wrapped a view around it to measure the height.

[olerichter00]

Ok

[olerichter00]

Same comment as above.

[lordkiz]

@olerichter00 This only emulates what's in InfiniteGridArtworks so they stay consistent since we use both same way.

[MounirDhahri]

Niice thanks a lot Kizito!