janicduplessis / collapsible-navbar Goto Github PK

Thanks for creating this. Very useful!

Since the clampedScroll depends on both the offsetAnim and the scrollAnim _clampedScrollValue needs to be computed for both.

Here is my code (slightly modified to fit our client)

    // Keep track of animation values because we need them when the scrolling ends.

    const updateClampedScrollValue = diff => {
      this._clampedScrollValue = Math.min(
        Math.max(this._clampedScrollValue + diff, 0),
        TOOLBAR_HEIGHT,
      );
    };

    this._scrollAnim.addListener(({value}) => {
      // clamped animation does not implement addListener but since the animation depends on the
      // this anim we compute the value here.
      const diff = value - this._scrollValue;
      this._scrollValue = value;
      updateClampedScrollValue(diff);

      const {onScrolledToTop} = this.props;
      onScrolledToTop(value === 0);
    });

    this._toolbarOffsetAnim.addListener(({value}) => {
      // clamped animation does not implement addListener but since the animation depends on the
      // this anim we compute the value here.
      const diff = value - this._toolbarOffsetValue;
      this._toolbarOffsetValue = value;
      updateClampedScrollValue(diff);
    });
  }

Without this fix, scrolling a few pixels at a time ends up hiding the toolbar when it should be shown.

I can make this into a PR if you want?

Great stuff, however I'm only able to get 3FPS on Android devices. Do you think it has to do with Animation support on Android?

Cheers @janicduplessis

Hi @janicduplessis,

Thanks a lot for this UI pattern, it's very usefull !

Juste one thing ; when i'm adding a RefreshControl to the AnimatedListView, the navbar is not collapsible anymore on Android only and I can't figure why (everything is working fine on IOS).
I saw you manage to handle it on the Th3rdwave app, can you give me an hint to make it work ?

Thanks a lot !

Hi i saw your fixed this issue. But i still getting this error(if i click animated view header button). Can u help me?

Thanks for creating this. Very useful!

Please help how can we use this for WebView

Please look at the header
https://www.dropbox.com/s/neb61iatjzacnz8/collapsing_bug.mov?dl=0
After gesture release scroll still going with deceleration even if scrollsToTop happened.
when I was debugging https://github.com/facebook/react-native/blob/master/Libraries/NativeAnimation/Nodes/RCTDiffClampAnimatedNode.m#L49
it seems that it getting events from 2 sources

1. scroll to to top
2. decelerating scroll (which is not happening)

Thanks for this example working like a charm!

The app crashes on Android when closing the app with the back button and open it again (I did not test it on iOS). This gets resolved when cleaning the app from the background opened apps.

I think this is related to facebook/react-native#11317 which has an open PR facebook/react-native#12910.

So I'll re-test it when that PR is merged :) just keeping track of it here too.