When I am sliding down the drawer when its in collapsed state, the onExpanded function is still calling

[raghav275]

So I wanted to change the content of the drawer when it gets expanded. So I have 2 components, one will render when the drawer is in the collapsed state and one when the drawer is expanded. But when i am even touching the drawer, the onExpanded gets called and the expanded component gets render even if the drawer is not opened.

The component renders even if the drawer is pulled downwards when it is in a collapsed state

[0xPBIT]

I am running into a similar issue. The "onExpanded" callback is running at the start of the action rather than at the completion of the animation. I have a state toggle tied with onExpanded and onCollapsed, and the onExpanded will run by slightly dragging the drawer up and releasing before it is far enough to switch state.

[0xPBIT]

I managed to get a quasi-fix to my problem. In the Animator.js I changed: _handlePanResponderRelease = (e, gesture) => { if (gesture.dy > this.props.toggleThreshold && this.props.currentPosition === this.props.upPosition) { this._transitionTo(this.props.downPosition, this.props.onCollapsed); } else if (gesture.dy < -this.props.toggleThreshold && this.props.currentPosition === this.props.downPosition) { this._transitionTo(this.props.upPosition, this.props.onExpanded); } else { this._resetPosition(); } }

to this: _handlePanResponderRelease = (e, gesture) => { if (gesture.dy > this.props.toggleThreshold && this.props.currentPosition === this.props.upPosition) { this._transitionTo(this.props.downPosition, this.props.onCollapsed); console.log('collapsed') } else if (gesture.dy < this.props.toggleThreshold && this.props.currentPosition === this.props.downPosition) { this._transitionTo(this.props.upPosition, this.props.onExpanded); console.log('expanded') } else { this._resetPosition(); console.log('reset') } }

this is not the best solution, because it prevents canceling the animation by dragging the drawer back to the original position before letting go, but it's the best I can do at the moment.

[0xPBIT]

I have added a simple callback onCompletedToggle() that triggers when the drawer animation successfully completes opening or closing. I can submit a PR.

[0xPBIT]

https://github.com/jacklein/rn-bottom-drawer/pull/31

[eurobob]

@phbprogramming You were on the right lines, but in the wrong function. Under _transitionTo, remove the callback from the Animated.spring(...)start() function:

Animated.spring(this.position, { toValue: position }).start();