Define a minimum header hight

[kiwina]

Hi, love this plugin well written.
I'm trying to make a header with several animated objects in it that fade out but some will stay. So far i have not figured out where the final offset is calculated to keep some of the header without closing it compleately

[PedroBern]

Hi @kiwina can you share some code or a screenshot?

[PentamapRainer]

Same here: How is it possible to set a minimum height of the remaining collapsible header so that there can be shown an ActionBar? It should look similar to that:

[PedroBern]

Hi @PentamapRainer you can render the toolbar above the CollapsibleTabView and pass the same Animated.Value to both (<CollapsibleTabView animatedValue={scrollY} ... />)

I have a setup like this where I'm using a react-navigation header and animating the title when the user is scrolling.

[PentamapRainer]

When I try to render the toolbar above the CollapsibleTabView with following code, then the CollapsibleTabView is not shown any more. Just the Text element is shown.

<View>
    <Text>HERE COMES THE NAVIGATIONBAR</Text>        
    <CollapsibleTabView<Route>
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={handleIndexChange}
        renderHeader={renderHeader}
        headerHeight={HEADER_HEIGHT}
        tabBarHeight={150}
        {...props}
    />
</View>

So where do I have to render the NavigationBar above the CollapsibleTabView?

[PedroBern]

Did you try flex: 1?

[PentamapRainer]

Did you try flex: 1?

Thanks a lot! That worked:

<View style={{flex:1}}>
    <Text>HERE COMES THE NAVIGATIONBAR</Text>
    <CollapsibleTabView<Route>
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={handleIndexChange}
        renderHeader={renderHeader}
        headerHeight={HEADER_HEIGHT}
        tabBarHeight={150}
        {...props}
    />
</View>

[PentamapRainer]

One more question to this issue: Is it possible to make the collapsible header behind the (transparent) NavigationBar, so that the header image is visible behind the NavigtionBar when scrolling to the top.

This is how it looks now:

This is how the header should look like:

[tcorreiaubi]

@PentamapRainer If I got your question right, you can interpolate the opacity of the "bar", to do so, you can use the animated value coming from the CollapsibleTabView and interpolate it between 0 and the header height to get the opacity, something like

  const backgroundOpacity = scrollYPosition.interpolate({
    inputRange: [0, scrollSize],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });

[tcorreiaubi]

@PedroBern Is it possible to configure a minimum header height with the v3 version? While the approach of placing the component outside the Collapsible tab view component is an easy and simple approach, if you need to place the content with an absolute position on the header(something similar to the previous image on the comments), it becomes really hard to come with a solution since the absolute position removes the component from the screen flow and its size is not taken into consideration.
This is more of a discussion other than an "issue" for me, wasn't just sure how to reach you to discuss it, thanks in advance.

[PedroBern]

@tcorreiaubi no, it's still not possible in v3, I know, this desired configuration is probably hard to get with the current implementation, but it's open for PR.