Detect onScrollEndDrag and execute final animation.

[benevbright]

It does not detect the end of scroll and make final action.
At the result, when we scroll to make it half collapsed, it stays there.
So we detect onScrollEndDrag of ScrollView and execute final animation.

reference:
https://medium.com/appandflow/react-native-collapsible-navbar-e51a049b560a

[benevbright]

I'm more than happy to discuss it here.

[paolospag]

Hi @benevbright ,
I'm trying to do that with the latest version of react-navigation-collapsible (3.0.3).

Using withCollapsibleForTabChild HOC, I do that:

...
componentDidMount = () => {
...
    this.props.collapsible.navigation.setParams({isHeaderCollapsed: false});
...
}
...
_onScrollEndDrag = (e) => {
    const { contentOffset } = e.nativeEvent;
    const { isHeaderCollapsed } = this.props.collapsible.navigation.getParam('isHeaderCollapsed', false);
    const { animatedY } = this.props.collapsible;
    if (contentOffset.y >= 30 && !isHeaderCollapsed) {
      Animated.timing(animatedY, {
        toValue: 165,
        duration: 200,
        useNativeDriver: true
      }).start()
    } else if (contentOffset.y < 30) {
      Animated.timing(animatedY, {
        toValue: 0,
        duration: 200,
        useNativeDriver: true
      }).start()
    }
  }
...
render() {
    const { data } = this.state;
    const { animatedY, onScroll } = this.props.collapsible;
    return (
      <AnimatedFlatList 
        bounces={false}
        data={data || []}
        keyExtractor={item => item.id}
        renderItem={this._renderFlatListItem}
        contentContainerStyle={styles.listContainer}
        showsVerticalScrollIndicator={false}
        onScrollEndDrag={this._onScrollEndDrag} // <-- add this line
        onScroll={onScroll} 
        _mustAddThis={animatedY}
      />
    )
  }
...

I point out that 165 is extra header height.

With these changes everything seems to work correctly: on drag end, the header is collapsed immediately, but I'm not able to continue scrolling with collapsed header because the animatedY keeps updating due to the onScroll event (and accordingly other values such as translateY, translateOpacity, translateProgress).

This isn't a working solution, but it could be a good starting point.

What do you think about it?

[benevbright]

Oh, Nice! and I'm so sorry for the late response... 😭
You're correct. This can't be done because of the reason you mentioned.

I have different approach in my mind, which is setting a Timer loop that is adding the height like animatedY = Animated.add(animatedY, 1) until they reached to place where it should be. I know this sounds really weird, but I think it would be the only solution I guess..

[paolospag]

Hi @benevbright,
don't worry for the late response...

I think only you can find the solution to this problem, I will be grateful.

[benevbright]

Thanks. But your example is really useful.
I will use it. It's defitetly good starting point.

[andyr6381]

I ended up towards this library as I was using the medium example mentioned and it's far from perfect. (UX experience is jittery and small incremental scrolls just hides the nav bar once you reach the threshold)

What I'm trying to accomplish is if the user scrolls down any amount, run the timing animation, hide the NavBar and clamp. If the user scrolls up the show the nav bar parallel with the distance the user scrolls and clamp if it reaches the max height.. #struggling

[poonamdhomane]

for me if scroll it in landscape mode its working but for portrait mode it is not scrolling ...even the list larger than screen