'Add custom component after searchbar in @react-navigation/native-stack

I'm having the following design

Looking for a smart way to accomplish my mission using @react-navigation/native-stack Requirements are the following:

Filters should be present after native search bar.
Screen title should automatically shrink/expand upon scroll. As it's done by default.

The problem is I don't see any proper place to put filters component to.

If I put it to content title animation doesn't work. It's always small because content's outer component should be a ScrollView or its ancestor like FlatList or SectionList. Nested ScrollView of the same direction are not supported too.

<View>
  <FiltersComponent />
  <SectionList ... />
</View>

If I put it like that title animation works, but filters go out of bounds on scroll.

<SectionList ListHeaderComponent={FiltersComponent} ... />

I tried even following, but title looks buggy, its both presentations (small and large) visible in the same time.

// set headerLargeTitle: true initially
<SectionList
  onScroll={(e) => {
    navigation.setOptions({ headerLargeTitle: e.nativeEvent.contentOffset.y === 0 });
  }}
/>

Can anyone suggest something?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Add custom component after searchbar in @react-navigation/native-stack

Sources

Related Questions